angularjs 源碼解析之injector
簡介
injector是用來做參數(shù)自動注入的,例如
function fn ($http, $scope, aService) { }
ng在運(yùn)行時(shí)會把$http, $scope, aService 自動作為參數(shù)傳入進(jìn)行執(zhí)行。
其實(shí)很容易想明白,injector做了兩件事
- 緩存那些service,以后作為參數(shù)注入
- 分析參數(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ù)。
- AngularJS動態(tài)生成div的ID源碼解析
- angularjs 源碼解析之scope
- Angular中$compile源碼分析
- angular.foreach 循環(huán)方法使用指南
- angular.element方法匯總
- angularJS中$apply()方法詳解
- angularjs 處理多個(gè)異步請求方法匯總
- 使用AngularJS來實(shí)現(xiàn)HTML頁面嵌套的方法
- 解決angular的$http.post()提交數(shù)據(jù)時(shí)后臺接收不到參數(shù)值問題的方法
- angular源碼學(xué)習(xí)第一篇 setupModuleLoader方法
相關(guān)文章
angular使用md5,CryptoJS des加密的方法
這篇文章主要介紹了angular使用md5,CryptoJS des加密的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06Angular2實(shí)現(xiàn)的秒表及改良版示例
這篇文章主要介紹了Angular2實(shí)現(xiàn)的秒表及改良版,結(jié)合實(shí)例形式分析 Angular2實(shí)現(xiàn)秒表功能的原理、操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2019-05-05Angular.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ì)介紹,使用 Angular 的內(nèi)置表單校驗(yàn)?zāi)軌蛲瓿山^大多數(shù)的業(yè)務(wù)場景的校驗(yàn)需求,有興趣的可以了解一下2017-05-05AngularJS實(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詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟
在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個(gè)現(xiàn)有組件并重寫它以使用 NgTemplateOutlet,需要的朋友可以參考下2024-03-03