Angular.JS學(xué)習(xí)之依賴注入$injector詳析
前言
在依賴注入(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)文章
Angular @HostBinding()和@HostListener()用法
本篇文章主要介紹了Angular @HostBinding()和@HostListener()用法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03AngularJS ng-bind-template 指令詳解
本文注意介紹AngularJS ng-bind-template 指令,這里把相關(guān)資料整理了一下,并附實(shí)例代碼,有需要的小伙伴可以參考下2016-07-07AngularJS出現(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ā)之路(圖文) ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12angular6.0開發(fā)教程之如何安裝angular6.0框架
這篇文章主要介紹了angular6.0開發(fā)教程之如何安裝angular6.0框架,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別
這篇文章主要介紹了angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09