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

Angular.JS學(xué)習(xí)之依賴注入$injector詳析

 更新時(shí)間:2016年10月20日 14:29:12   作者:royalrover  
隨著javaEE的spring框架的興起,依賴注入(IoC)的概念徹底深入人心,它徹底改變了我們的編碼模式和思維。在AngularJS中也有依賴注入的概念,像spring中的依賴注入,但是又有所不同。Angular中只需要在需要的地方聲明一下即可,類似模塊的引用,因此十分方便。

前言

在依賴注入(IoC)之前,我們?cè)诔绦蛑行枰獎(jiǎng)?chuàng)建一個(gè)對(duì)象很簡(jiǎn)單也很直接,就是在代碼中new Object即可,有我們自己負(fù)責(zé)創(chuàng)建、維護(hù)、修改和刪除,也就是說,我們控制了對(duì)象的整個(gè)生命周期,直到對(duì)象沒有被引用,被回收。誠(chéng)然,當(dāng)創(chuàng)建或者維護(hù)的對(duì)象數(shù)量較少時(shí),這種做法無(wú)可厚非,但是當(dāng)一個(gè)大項(xiàng)目中需要?jiǎng)?chuàng)建大數(shù)量級(jí)的對(duì)象時(shí),僅僅依靠程序員來進(jìn)行維護(hù)所有對(duì)象,這是難以做到的,特別是如果想在程序的整個(gè)生命周期內(nèi)復(fù)用一些對(duì)象,我們需要自己寫一個(gè)緩存模塊對(duì)所有對(duì)象進(jìn)行緩存,這加大了復(fù)雜度。當(dāng)然,IoC的好處并不僅限于此,它也降低了對(duì)依賴的耦合度,不必在代碼中進(jìn)行引用或者傳參即可操作依賴。

在js中,我們可以這樣引入依賴

1、使用全局變量引用

2、在需要的地方通過函數(shù)參數(shù)傳遞

使用全局變量的壞處自不必說,污染了全局的名字空間,而通過函參傳遞引用,也可以通過兩種方法實(shí)現(xiàn):

1、閉包傳遞

2、后臺(tái)解析出依賴對(duì)象,并通過Function.prototype.call進(jìn)行傳參

而在AngularJS中,依賴注入是通過后者實(shí)現(xiàn)的,接下來的幾節(jié)將會(huì)介紹IoC模塊的具體實(shí)現(xiàn)。

獲取依賴

var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m;
var FN_ARG_SPLIT = /,/;
 // 獲取服務(wù)名
var FN_ARG = /^\s*(_?)(\S+?)\1\s*$/;
var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;
var $injectorMinErr = minErr('$injector');

function anonFn(fn) {
 // For anonymous functions, showing at the very least the function signature can help in
 // debugging.
 var fnText = fn.toString().replace(STRIP_COMMENTS, ''),
  args = fnText.match(FN_ARGS);
 if (args) {
 return 'function(' + (args[1] || '').replace(/[\s\r\n]+/, ' ') + ')';
 }
 return 'fn';
}

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, '');
  argDecl = fnText.match(FN_ARGS);
  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;
}

annotate函數(shù)通過對(duì)入?yún)⑦M(jìn)行針對(duì)性分析,若傳遞的是一個(gè)函數(shù),則依賴模塊作為入?yún)鬟f,此時(shí)可通過序列化函數(shù)進(jìn)行正則匹配,獲取依賴模塊的名稱并存入$inject數(shù)組中返回,另外,通過函數(shù)入?yún)鬟f依賴的方式在嚴(yán)格模式下執(zhí)行會(huì)拋出異常;第二種依賴傳遞則是通過數(shù)組的方式,數(shù)組的最后一個(gè)元素是需要使用依賴的函數(shù)。annotate函數(shù)最終返回解析的依賴名稱。

注入器的創(chuàng)建

AngularJS的API也提供了injector部分,通過injector部分,通過injector可以使用get,has,instantiate,invoke以及上節(jié)提到的annotate等方法,通過源碼可以更清晰的理解。

function createInternalInjector(cache, factory) {
 // 對(duì)服務(wù)注入器 providerInjector而言,只根據(jù)服務(wù)名獲取服務(wù),factory會(huì)拋出異常
 function getService(serviceName, caller) {
  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, caller);
  } catch (err) {
   if (cache[serviceName] === INSTANTIATING) {
   delete cache[serviceName];
   }
   throw err;
  } finally {
   path.shift();
  }
  }
 }

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

  var args = [],
   // 解析并獲取注入服務(wù)列表
   $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);
  }
  // 注入的服務(wù)作為參數(shù)傳入
  args.push(
   locals && locals.hasOwnProperty(key)
   ? locals[key]
   : getService(key, serviceName)
  );
  }
  if (isArray(fn)) {
  fn = fn[length];
  }

  // http://jsperf.com/angularjs-invoke-apply-vs-switch
  // #5388
  return fn.apply(self, args);
 }

 function instantiate(Type, locals, serviceName) {
  // Check if Type is annotated and use just the given function at n-1 as parameter
  // e.g. someModule.factory('greeter', ['$window', function(renamed$window) {}]);
  // Object creation: http://jsperf.com/create-constructor/2
  var instance = Object.create((isArray(Type) ? Type[Type.length - 1] : Type).prototype);
  var returnedValue = invoke(Type, instance, locals, serviceName);

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

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

createInternalInjector方法創(chuàng)建$injector對(duì)象,傳遞的參數(shù)分別為緩存對(duì)象和工廠函數(shù)。在具體實(shí)現(xiàn)中,AngularJS創(chuàng)建了兩個(gè)injector對(duì)象--providerInjector和instanceInjector(這兩個(gè)對(duì)象的不同主要是createInternalInjector方法傳遞的緩存對(duì)象不同),而通過angular.injector()導(dǎo)出的就是instanceInjector。對(duì)于providerInjector,主要用來獲取服務(wù)的提供者,即serviceProvider。而對(duì)于instanceInjector而言,主要用于執(zhí)行從providerInjector獲取的provider對(duì)象的$get方法,生產(chǎn)服務(wù)對(duì)象(依賴),并將服務(wù)對(duì)象傳遞給相應(yīng)的函數(shù),完成IoC。

首先從get方法說起,get方法主要獲取指定名稱的服務(wù),通過angular的injector方法獲取的是instanceInjector,而當(dāng)緩存中沒有該服務(wù)對(duì)象(依賴)時(shí),我們需要執(zhí)行factory(serviceName, caller)方法,我們看看對(duì)于的factory函數(shù):

instanceInjector = (instanceCache.$injector =
   createInternalInjector(instanceCache, function
(serviceName, caller) { var provider = providerInjector.get(serviceName + providerSuffix, caller); return
 instanceInjector.invoke(provider.$get, provider, undefined, serviceName);
   }));

紅色部分即為factory函數(shù),它顯示通過providerInjector獲取相應(yīng)服務(wù)的提供者serviceProvider,然后調(diào)用instanceInjector的invoke方法在serviceProvider上下文執(zhí)行serviceProvider的$get方法,返回服務(wù)對(duì)象并保存在緩存中。這樣,便完成了服務(wù)對(duì)象(依賴)的獲取和緩存。

invoke方法也很簡(jiǎn)單,它的入?yún)⒎謩e問fn, self, locals, serviceName,即要執(zhí)行的函數(shù),函數(shù)執(zhí)行的上下文,提供的options選項(xiàng)和服務(wù)名。首先獲取函數(shù)的所有依賴名,通過annotate方法完成之后,如果options中提供了對(duì)于名稱的依賴,則使用,否則通過get方法獲取依賴,最后傳入函數(shù),并將函數(shù)的執(zhí)行結(jié)果返回。invoke返回的結(jié)果往往是一個(gè)服務(wù)對(duì)象。

instantiate方法主要根據(jù)提供的構(gòu)造函數(shù)創(chuàng)建一個(gè)示例,用作依賴或提供服務(wù)。值得一提的是并沒有通過new關(guān)鍵字創(chuàng)建對(duì)象,而是通過ECMA5提供的Object.create來繼承函數(shù)的原型對(duì)象實(shí)現(xiàn),非常巧妙。

has方法則是相繼判斷serviceProvider和service是否存在于緩存中。

至此,$injector對(duì)象創(chuàng)建完畢。

注冊(cè)服務(wù)(依賴)

服務(wù)不可能憑空而來,我們需要自己實(shí)現(xiàn)或者外部引入服務(wù)或依賴。所以,注冊(cè)服務(wù)的模塊也是值得深究的。AngularJS提供了多種注冊(cè)服務(wù)的API,但是我們著重關(guān)注的是provider方法,其他factory,service方法都是基于此進(jìn)行構(gòu)建的。

這些方法(provider,factory等)綁定在providerCache.provide對(duì)象上,而我們通過angular.module(′app′,[]).provider(...)方式調(diào)用的provider函數(shù),會(huì)在module加載期間將調(diào)用(該調(diào)用抽象成一個(gè)數(shù)組,即[provider,method,arguments])綁定在內(nèi)部的invokeQueue數(shù)組中,最終在providerCache.provide對(duì)象上,而我們通過angular.module(′app′,[]).provider(...)方式調(diào)用的provider函數(shù),會(huì)在module加載期間將調(diào)用(該調(diào)用抽象成一個(gè)數(shù)組,即[provider,method,arguments])綁定在內(nèi)部的invokeQueue數(shù)組中,最終在providerCache.provide對(duì)象上調(diào)用provider方法,其他的controller,directive等方法類似,不過是綁定在providerCache.controllerProvider,providerCache.controllerProvider,providerCache.compileProvider對(duì)象上。

function provider(name, provider_) {
 assertNotHasOwnProperty(name, 'service');
 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 enforceReturnValue(name, factory) {
 return function enforcedReturnValue() {
  var result = instanceInjector.invoke(factory, this);
  if (isUndefined(result)) {
  throw $injectorMinErr('undef', "Provider '{0}' must return a value from $get factory method.", name);
  }
  return result;
 };
 }

 function factory(name, factoryFn, enforce) {
 return provider(name, {
  $get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
 });
 }

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

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

 function constant(name, value) {
 assertNotHasOwnProperty(name, 'constant');
 providerCache[name] = value;
 instanceCache[name] = value;
 }
 // 在服務(wù)實(shí)例化之后進(jìn)行調(diào)用(攔截),攔截函數(shù)中注入實(shí)例化的服務(wù),可以修改,擴(kuò)展替換服務(wù)。
 function decorator(serviceName, decorFn) {
 var origProvider = providerInjector.get(serviceName + providerSuffix),
  orig$get = origProvider.$get;

 origProvider.$get = function() {
  var origInstance = instanceInjector.invoke(orig$get, origProvider);
  return instanceInjector.invoke(decorFn, null, {$delegate: origInstance});
 };
 }

provider方法需要兩個(gè)參數(shù),一個(gè)是服務(wù)名(依賴名),另外是工廠方法或者是一個(gè)包含依賴和工廠方法的數(shù)組。首先通過providerInjector創(chuàng)建工廠方法的一個(gè)實(shí)例,并添加到providerCache中,返回。

factory方法只是將第二個(gè)參數(shù)封裝成了一個(gè)包含$get方法的對(duì)象,即serviceProvider,緩存。并不復(fù)雜。

而service方法則嵌套注入了$injector服務(wù),即instanceInjector,它會(huì)創(chuàng)建構(gòu)造函數(shù)的實(shí)例,作為服務(wù)對(duì)象。

value方法僅僅封裝了一個(gè)provider,其$get方法返回value值。

constant方法則將value的值分別存入providerCache和instanceCache中,并不需要invoke獲取其value值。

而比較特殊且擴(kuò)展性較高的decorator方法,是在serviceProvider的get方法后面添加一個(gè)攔截函數(shù),并通過傳遞依賴get方法后面添加一個(gè)攔截函數(shù),并通過傳遞依賴delegate來獲取原先invoke $get方法返回的服務(wù)對(duì)象。我們可以通過decorator來對(duì)服務(wù)進(jìn)行擴(kuò)展,刪除等操作。

流程

最后,在基本的實(shí)現(xiàn)已經(jīng)完成的基礎(chǔ)上,我們走一遍具體的注入流程,更易于我們的深入理解。

angular.module("app",[])
  .provider("locationService",function(){
  ...
 })
 .controller("WeatherController",function($scope,locationService,$location){
  locationService.getWeather()
   .then(function(data){
    $scope.weather = data;
   },function(e){
    console.log("error message: "+ e.message)
   });
 })

我們不關(guān)心具體的代碼實(shí)現(xiàn),僅僅使用上述代碼作為演示。

首先確定AngularJS上下文的范圍,并且獲取依賴模塊(在此處為空);

繼續(xù)注冊(cè)服務(wù)(依賴),將serviceProvider緩存至providerCache中;

聲明控制器;

在此獲取injector示例,通過執(zhí)行invoke函數(shù),獲取[“injector示例,通過執(zhí)行invoke函數(shù),獲取[“scope”,”locationService”,”location”]依賴列表,通過location”]依賴列表,通過injector的get方法獲取相應(yīng)的依賴對(duì)象。對(duì)于scope和scope和location服務(wù)而言,在AngularJS初始化時(shí)已經(jīng)注入到Angular中,因此可以獲取相應(yīng)的provider對(duì)象,執(zhí)行相關(guān)的方法返回scope和scope和location對(duì)象,而locationService則在provider中進(jìn)行了聲明,因此獲取到locationServiceProvider對(duì)象,通過調(diào)用instanceInjector.invoke(locationServiceProvider.$get, locationServiceProvider, undefined, “l(fā)ocationService”)返回locationService對(duì)象。

最后將所有的依賴組裝成數(shù)組[scope,locationService,scope,locationService,location]作為參數(shù)傳遞給匿名函數(shù)執(zhí)行。

總結(jié)

至此,依賴注入完成。大家對(duì)依賴注入$injector有沒有進(jìn)一步的了解呢?以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。

相關(guān)文章

  • angularjs表格分頁(yè)功能詳解

    angularjs表格分頁(yè)功能詳解

    本文給大家分享的是個(gè)人在項(xiàng)目中使用angularjs實(shí)現(xiàn)表格分頁(yè)功能的思路和代碼,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。
    2016-01-01
  • AngularJS壓縮JS技巧分析

    AngularJS壓縮JS技巧分析

    這篇文章主要介紹了AngularJS壓縮JS的操作技巧,分析了AngularJS進(jìn)行壓縮(minify)之后出現(xiàn)的問題與相應(yīng)的解決方法,需要的朋友可以參考下
    2016-11-11
  • Angular @HostBinding()和@HostListener()用法

    Angular @HostBinding()和@HostListener()用法

    本篇文章主要介紹了Angular @HostBinding()和@HostListener()用法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-03
  • Angular1.x自定義指令實(shí)例詳解

    Angular1.x自定義指令實(shí)例詳解

    這篇文章主要介紹了Angular1.x自定義指令,結(jié)合實(shí)例形式分析了Angular1.x自定義指令的實(shí)現(xiàn)與使用方法,以及相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
    2017-03-03
  • AngularJS ng-bind-template 指令詳解

    AngularJS ng-bind-template 指令詳解

    本文注意介紹AngularJS ng-bind-template 指令,這里把相關(guān)資料整理了一下,并附實(shí)例代碼,有需要的小伙伴可以參考下
    2016-07-07
  • AngularJS出現(xiàn)$http異步后臺(tái)無(wú)法獲取請(qǐng)求參數(shù)問題的解決方法

    AngularJS出現(xiàn)$http異步后臺(tái)無(wú)法獲取請(qǐng)求參數(shù)問題的解決方法

    這篇文章主要介紹了AngularJS出現(xiàn)$http異步后臺(tái)無(wú)法獲取請(qǐng)求參數(shù)問題的解決方法,較為詳細(xì)的分析了AngularJS出現(xiàn)異步請(qǐng)求后臺(tái)無(wú)法解析的原因與相應(yīng)的解決方法,需要的朋友可以參考下
    2016-11-11
  • 詳解Webstorm 下的Angular2.0開發(fā)之路(圖文)

    詳解Webstorm 下的Angular2.0開發(fā)之路(圖文)

    這篇文章主要介紹了詳解Webstorm 下的Angular2.0開發(fā)之路(圖文) ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • angular6.0開發(fā)教程之如何安裝angular6.0框架

    angular6.0開發(fā)教程之如何安裝angular6.0框架

    這篇文章主要介紹了angular6.0開發(fā)教程之如何安裝angular6.0框架,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • AngularJS路由Ui-router模塊用法示例

    AngularJS路由Ui-router模塊用法示例

    這篇文章主要介紹了AngularJS路由Ui-router模塊用法,結(jié)合實(shí)例形式分析了Ui-router模塊的功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2017-05-05
  • angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別

    angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別

    這篇文章主要介紹了angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09

最新評(píng)論