国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

angularjs 源碼解析之injector

2019-11-20 09:11:00
字體:
來源:轉載
供稿:網(wǎng)友

簡介

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

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

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

其實很容易想明白,injector做了兩件事

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

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

結構

createInjector -> createInternalInjector  return: instanceInjector

所以 createInjector() 返回的是 instanceInjector,結構如下:

{ 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),   // 預先配置$provide,供loadModules中調用注冊service等   providerCache = {    $provide: {      provider: supportObject(provider),      factory: supportObject(factory),      service: supportObject(service),      value: supportObject(value),      constant: supportObject(constant),      decorator: decorator     }   },   // providerInjector, instanceInjector 兩個注入器   // instanceInjector對外提供service等注入,providerInjector對內提供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

用于包裝方法,包裝前的方法接受兩個參數(shù) (key, value),經(jīng)過包裝后的方法能支持傳入object參數(shù),即多個 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'); // 當provider_是fn或者array時可以將其他provider注入到參數(shù) // 因為providerInjector.instantiate(provider_)時可以傳入依賴的其他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的實現(xiàn),將provider緩存到providerCache,供調用

跟其他不一樣的就是constant的實現(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);  // 就是調用$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實例,需要在該實例上添加方法都可以,即所謂的裝飾器

源碼:

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

3. createInternalInjector

3.1 整體結構

// 從cache中獲取,沒有的話調用factory進行創(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,  // 實例化fn, 可以參數(shù)注入  instantiate: instantiate,  // 獲取provider或者service  get: getService,  // 獲取方法的參數(shù)列表,供注入使用  annotate: annotate,  // 確認是否含有provider或service  has: function(name) {   return providerCache.hasOwnProperty(name + providerSuffix) || cache.hasOwnProperty(name);  } };}

3.2 annotate

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

// type1function fn (a, b, c) -> ['a', 'b', 'c']// type2['a', 'b', fn] -> ['a', 'b']// type3function 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) {    // 嚴格模式下或拋錯    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

// 當cache中沒有該service時,進入else, 先cache[serviceName] = INSTANTIATING 做一個標記// 因為接下來調用factory(serviceName),其實是一個遞歸調用// function(servicename) {//  var provider = providerInjector.get(servicename + providerSuffix);//  return instanceInjector.invoke(provider.$get, provider, undefined, servicename);// }// instanceInjector.invoke(provider.$get 時會將需要注入的參數(shù)get出來然后注入// 因此做上標記后就可以判斷是否有循環(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;  // 當type為array時,獲取最后的參數(shù)如:['$window', function($win){}] Constructor.prototype = (isArray(Type) ? Type[Type.length - 1] : Type).prototype; instance = new Constructor(); // 調用invoke執(zhí)行Type方法 returnedValue = invoke(Type, instance, locals, serviceName); return isObject(returnedValue) || isFunction(returnedValue) ? returnedValue : instance;}

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

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 庆城县| 南宁市| 沙田区| 富蕴县| 武乡县| 安仁县| 肇东市| 绥阳县| 芜湖市| 沾化县| 宝兴县| 商河县| 名山县| 荥经县| 仙桃市| 昌邑市| 夏津县| 牙克石市| 建瓯市| 阿瓦提县| 弥渡县| 峡江县| 屏东市| 左贡县| 斗六市| 公安县| 米易县| 扎兰屯市| 镶黄旗| 余江县| 永泰县| 西乌珠穆沁旗| 鹤峰县| 武冈市| 杭锦后旗| 康保县| 岳西县| 建昌县| 云和县| 松滋市| 商城县|