欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

angularjs 源碼解析之injector

 更新時(shí)間:2016年08月22日 08:55:09   作者:alexqdjay  
這篇文章主要介紹angular中實(shí)現(xiàn)依賴注入的”幕后英雄” — 注入器(Injector)。說它是”幕后英雄”,是因?yàn)樗攀且蕾囎⑷氲靡詫?shí)現(xiàn)的主力。我們從源碼上來分析下他吧

簡介

injector是用來做參數(shù)自動注入的,例如

function fn ($http, $scope, aService) {
}

ng在運(yùn)行時(shí)會把$http, $scope, aService 自動作為參數(shù)傳入進(jìn)行執(zhí)行。

其實(shí)很容易想明白,injector做了兩件事

  1. 緩存那些service,以后作為參數(shù)注入
  2. 分析參數(shù)列表,找到需要的參數(shù)注入

下面源碼分析如何實(shí)現(xiàn)上面兩件事情。

結(jié)構(gòu)

createInjector -> createInternalInjector  return: instanceInjector

所以 createInjector() 返回的是 instanceInjector,結(jié)構(gòu)如下:

{
 invoke: invoke,
 instantiate: instantiate,
 get: getService,
 annotate: annotate,
 has: function(name) {
  return providerCache.hasOwnProperty(name + providerSuffix) || cache.hasOwnProperty(name);
 }
}

源碼分析

1. createInjector

function createInjector(modulesToLoad, strictDi) {
 strictDi = (strictDi === true);
 var INSTANTIATING = {},
   providerSuffix = 'Provider',
   path = [],
   loadedModules = new HashMap([], true),
   // 預(yù)先配置$provide,供loadModules中調(diào)用注冊service等
   providerCache = {
    $provide: {
      provider: supportObject(provider),
      factory: supportObject(factory),
      service: supportObject(service),
      value: supportObject(value),
      constant: supportObject(constant),
      decorator: decorator
     }
   },

   // providerInjector, instanceInjector 兩個(gè)注入器
   // instanceInjector對外提供service等注入,providerInjector對內(nèi)提供provider獲取
   providerInjector = (providerCache.$injector =
     createInternalInjector(providerCache, function() {
      throw $injectorMinErr('unpr', "Unknown provider: {0}", path.join(' <- '));
     }, strictDi)),
   instanceCache = {},
   instanceInjector = (instanceCache.$injector =
     createInternalInjector(instanceCache, function(servicename) {
      var provider = providerInjector.get(servicename + providerSuffix);
      return instanceInjector.invoke(provider.$get, provider, undefined, servicename);
     }, strictDi));

 // 加載模塊
 forEach(loadModules(modulesToLoad), function(fn) { instanceInjector.invoke(fn || noop); });

 return instanceInjector;
}

2. $provide

$provide: {
  provider: supportObject(provider),
  factory: supportObject(factory),
  service: supportObject(service),
  value: supportObject(value),
  constant: supportObject(constant),
  decorator: decorator
}

2.1 supportObject

用于包裝方法,包裝前的方法接受兩個(gè)參數(shù) (key, value),經(jīng)過包裝后的方法能支持傳入object參數(shù),即多個(gè) key -> value。

function supportObject(delegate) {
 return function(key, value) {
  if (isObject(key)) {
   forEach(key, reverseParams(delegate));
  } else {
   return delegate(key, value);
  }
 };
}

2.2 provider

回顧下provider、service 和 factory的使用方式

app.factory('serviceName', function(){
 return {
  getName: function(){},
  setName: function(){}
 }
});

app.service('serviceName', function(){
 this.getName = function() {}

 this.setName = function() {}
});

app.provider('serviceName', function($httpProvider){
 // 注入$httpProvider
 this.$get = function() {
  return {
   getName: function(){},
   setName: function(){}
  };
 }
});

app.provider('serviceName', {
  $get: function () {}
});
function provider(name, provider_) {
 assertNotHasOwnProperty(name, 'service');
 // 當(dāng)provider_是fn或者array時(shí)可以將其他provider注入到參數(shù)
 // 因?yàn)閜roviderInjector.instantiate(provider_)時(shí)可以傳入依賴的其他provider
 // 這也是provider與service,factory方法不一樣的地方
 if (isFunction(provider_) || isArray(provider_)) {
  provider_ = providerInjector.instantiate(provider_);
 }
 if (!provider_.$get) {
  throw $injectorMinErr('pget', "Provider '{0}' must define $get factory method.", name);
 }
 return providerCache[name + providerSuffix] = provider_;
}

function factory(name, factoryFn) { return provider(name, { $get: factoryFn }); }

function service(name, constructor) {
 return factory(name, ['$injector', function($injector) {
  return $injector.instantiate(constructor);
 }]);
}

function value(name, val) { return factory(name, valueFn(val)); }

最終匯總到provider的實(shí)現(xiàn),將provider緩存到providerCache,供調(diào)用

跟其他不一樣的就是constant的實(shí)現(xiàn),分別保存到providerCache和instanceCache中,這樣在定義provider還是在定義service是都能注入。

function constant(name, value) {
 assertNotHasOwnProperty(name, 'constant');
 providerCache[name] = value;
 instanceCache[name] = value;
}

2.3 回顧 loadModules

function runInvokeQueue(queue) {
 var i, ii;
 for(i = 0, ii = queue.length; i < ii; i++) {
  var invokeArgs = queue[i],
    provider = providerInjector.get(invokeArgs[0]);
  // 存入queue的如格式[$provide, factory, arguments]
  // 經(jīng)過替換,$provide.factory.apply($provide, arguments);
  // 就是調(diào)用$provid的factory,service等
  provider[invokeArgs[1]].apply(provider, invokeArgs[2]);
 }
}

2.4 decorator

示例:

module.config(function($provide) {
 $provide.decorator('Mail', function($delegate) {
  $delegate.addCC = function(cc) {
   this.cc.push(cc);
  };
  return $delegate;
 });
})

使用示例看出,傳入的參數(shù)$delegate是原先的service實(shí)例,需要在該實(shí)例上添加方法都可以,即所謂的裝飾器

源碼:

function decorator(serviceName, decorFn) {
 var origProvider = providerInjector.get(serviceName + providerSuffix),
   orig$get = origProvider.$get;

 origProvider.$get = function() {
  // 通過上面獲取的provider生成需要的service實(shí)例,再以$delegate注入到參數(shù)列表
  var origInstance = instanceInjector.invoke(orig$get, origProvider);
  return instanceInjector.invoke(decorFn, null, {$delegate: origInstance});
 };
}

3. createInternalInjector

3.1 整體結(jié)構(gòu)

// 從cache中獲取,沒有的話調(diào)用factory進(jìn)行創(chuàng)建,具體看getService解析

function createInternalInjector(cache, factory) {

 function getService(serviceName) {
 }

 function invoke(fn, self, locals, serviceName){
 }

 function instantiate(Type, locals, serviceName) {
 }

 return {
  // 執(zhí)行fn,具有參數(shù)注入功能
  invoke: invoke,
  // 實(shí)例化fn, 可以參數(shù)注入
  instantiate: instantiate,
  // 獲取provider或者service
  get: getService,
  // 獲取方法的參數(shù)列表,供注入使用
  annotate: annotate,
  // 確認(rèn)是否含有provider或service
  has: function(name) {
   return providerCache.hasOwnProperty(name + providerSuffix) || cache.hasOwnProperty(name);
  }
 };
}

3.2 annotate

獲取fn的參數(shù)列表

// type1
function fn (a, b, c) -> ['a', 'b', 'c']

// type2
['a', 'b', fn] -> ['a', 'b']

// type3
function fn () {}
fn.$inject = ['a', 'c']
-> ['a', 'c']

源碼:

function annotate(fn, strictDi, name) {
 var $inject,
   fnText,
   argDecl,
   last;

 if (typeof fn === 'function') {
  if (!($inject = fn.$inject)) {
   $inject = [];
   if (fn.length) {
    // 嚴(yán)格模式下或拋錯(cuò)
    if (strictDi) {
     if (!isString(name) || !name) {
      name = fn.name || anonFn(fn);
     }
     throw $injectorMinErr('strictdi',
      '{0} is not using explicit annotation and cannot be invoked in strict mode', name);
    }
    // 將注釋去掉
    fnText = fn.toString().replace(STRIP_COMMENTS, '');
    // 將參數(shù)全部選出fn(a,b,c,d) -> 'a,b,c,d'
    argDecl = fnText.match(FN_ARGS);
    // 分割成array
    forEach(argDecl[1].split(FN_ARG_SPLIT), function(arg){
     arg.replace(FN_ARG, function(all, underscore, name){
      $inject.push(name);
     });
    });
   }
   fn.$inject = $inject;
  }
 } else if (isArray(fn)) {
  last = fn.length - 1;
  assertArgFn(fn[last], 'fn');
  $inject = fn.slice(0, last);
 } else {
  assertArgFn(fn, 'fn', true);
 }
 return $inject;
}

3.3 getService

// 當(dāng)cache中沒有該service時(shí),進(jìn)入else, 先cache[serviceName] = INSTANTIATING 做一個(gè)標(biāo)記
// 因?yàn)榻酉聛碚{(diào)用factory(serviceName),其實(shí)是一個(gè)遞歸調(diào)用
// function(servicename) {
//  var provider = providerInjector.get(servicename + providerSuffix);
//  return instanceInjector.invoke(provider.$get, provider, undefined, servicename);
// }
// instanceInjector.invoke(provider.$get 時(shí)會將需要注入的參數(shù)get出來然后注入
// 因此做上標(biāo)記后就可以判斷是否有循環(huán)依賴
function getService(serviceName) {
 if (cache.hasOwnProperty(serviceName)) {
  if (cache[serviceName] === INSTANTIATING) {
   throw $injectorMinErr('cdep', 'Circular dependency found: {0}',
        serviceName + ' <- ' + path.join(' <- '));
  }
  return cache[serviceName];
 } else {
  try {
   path.unshift(serviceName);
   cache[serviceName] = INSTANTIATING;
   return cache[serviceName] = factory(serviceName);
  } catch (err) {
   if (cache[serviceName] === INSTANTIATING) {
    delete cache[serviceName];
   }
   throw err;
  } finally {
   path.shift();
  }
 }
}

3.4 invoke

function invoke(fn, self, locals, serviceName){
 if (typeof locals === 'string') {
  serviceName = locals;
  locals = null;
 }

 var args = [],
   // 獲取參數(shù)列表
   $inject = annotate(fn, strictDi, serviceName),
   length, i,
   key;

 for(i = 0, length = $inject.length; i < length; i++) {
  key = $inject[i];
  if (typeof key !== 'string') {
   throw $injectorMinErr('itkn',
       'Incorrect injection token! Expected service name as string, got {0}', key);
  }
  // locals優(yōu)先
  args.push(
   locals && locals.hasOwnProperty(key)
   ? locals[key]
   : getService(key)
  );
 }
 if (isArray(fn)) {
  fn = fn[length];
 }

 return fn.apply(self, args);
}

3.5 instantiate

function instantiate(Type, locals, serviceName) {
 var Constructor = function() {},
   instance, returnedValue;
 
 // 當(dāng)type為array時(shí),獲取最后的參數(shù)如:['$window', function($win){}]
 Constructor.prototype = (isArray(Type) ? Type[Type.length - 1] : Type).prototype;
 instance = new Constructor();
 // 調(diào)用invoke執(zhí)行Type方法
 returnedValue = invoke(Type, instance, locals, serviceName);

 return isObject(returnedValue) || isFunction(returnedValue) ? returnedValue : instance;
}

instantiate 的作用是用來實(shí)例化Type的,在實(shí)例化的過程中可以自動傳入?yún)?shù)到構(gòu)造函數(shù)。

相關(guān)文章

  • angular使用md5,CryptoJS des加密的方法

    angular使用md5,CryptoJS des加密的方法

    這篇文章主要介紹了angular使用md5,CryptoJS des加密的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • Angular2實(shí)現(xiàn)的秒表及改良版示例

    Angular2實(shí)現(xiàn)的秒表及改良版示例

    這篇文章主要介紹了Angular2實(shí)現(xiàn)的秒表及改良版,結(jié)合實(shí)例形式分析 Angular2實(shí)現(xiàn)秒表功能的原理、操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2019-05-05
  • Angular頁面間切換及傳值的4種方法

    Angular頁面間切換及傳值的4種方法

    這篇文章主要為大家詳細(xì)介紹了Angular頁面間切換及傳值的四種方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法

    Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法

    這篇文章主要給大家介紹了關(guān)于在Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
    2017-06-06
  • 強(qiáng)大的 Angular 表單驗(yàn)證功能詳細(xì)介紹

    強(qiáng)大的 Angular 表單驗(yàn)證功能詳細(xì)介紹

    本篇文章主要介紹了強(qiáng)大的 Angular 表單驗(yàn)證功能詳細(xì)介紹,使用 Angular 的內(nèi)置表單校驗(yàn)?zāi)軌蛲瓿山^大多數(shù)的業(yè)務(wù)場景的校驗(yàn)需求,有興趣的可以了解一下
    2017-05-05
  • Angularjs的啟動過程分析

    Angularjs的啟動過程分析

    本篇文章主要介紹了Angularjs的啟動過程分析,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-07-07
  • 詳解AngularJS驗(yàn)證、過濾器、指令

    詳解AngularJS驗(yàn)證、過濾器、指令

    這篇文章主要介紹了AngularJS驗(yàn)證、過濾器、指令的相關(guān)知識,angularJS中提供了許多的驗(yàn)證指令,可以輕松的實(shí)現(xiàn)驗(yàn)證,具體詳情大家通過本文一起學(xué)習(xí)吧,需要的朋友可以參考下
    2017-01-01
  • AngularJS實(shí)現(xiàn)給動態(tài)生成的元素綁定事件的方法

    AngularJS實(shí)現(xiàn)給動態(tài)生成的元素綁定事件的方法

    這篇文章主要介紹了AngularJS實(shí)現(xiàn)給動態(tài)生成的元素綁定事件的方法,結(jié)合實(shí)例形式分析了AngularJS動態(tài)生成元素與事件綁定相關(guān)操作技巧,需要的朋友可以參考下
    2016-12-12
  • 對angular 監(jiān)控?cái)?shù)據(jù)模型變化的事件方法$watch詳解

    對angular 監(jiān)控?cái)?shù)據(jù)模型變化的事件方法$watch詳解

    今天小編就為大家分享一篇對angular 監(jiān)控?cái)?shù)據(jù)模型變化的事件方法$watch詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-10-10
  • 在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟

    在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟

    在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個(gè)現(xiàn)有組件并重寫它以使用 NgTemplateOutlet,需要的朋友可以參考下
    2024-03-03

最新評論