angularjs 源碼解析之injector
更新時間：2016年08月22日 08:55:09 作者：alexqdjay
這篇文章主要介紹angular中實現依賴注入的”幕后英雄” — 注入器(Injector)。說它是”幕后英雄”，是因為它才是依賴注入得以實現的主力。我們從源碼上來分析下他吧
簡介
injector是用來做參數自動注入的，例如
function fn ($http, $scope, aService) {
}
ng在運行時會把$http, $scope, aService 自動作為參數傳入進行執(zhí)行。
其實很容易想明白，injector做了兩件事
- 緩存那些service，以后作為參數注入
- 分析參數列表，找到需要的參數注入
下面源碼分析如何實現上面兩件事情。
結構
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
用于包裝方法，包裝前的方法接受兩個參數 (key, value)，經過包裝后的方法能支持傳入object參數，即多個 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注入到參數
// 因為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的實現，將provider緩存到providerCache，供調用
跟其他不一樣的就是constant的實現，分別保存到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]
// 經過替換，$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;
});
})
使用示例看出，傳入的參數$delegate是原先的service實例，需要在該實例上添加方法都可以，即所謂的裝飾器
源碼:
function decorator(serviceName, decorFn) {
var origProvider = providerInjector.get(serviceName + providerSuffix),
orig$get = origProvider.$get;
origProvider.$get = function() {
// 通過上面獲取的provider生成需要的service實例，再以$delegate注入到參數列表
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，具有參數注入功能
invoke: invoke,
// 實例化fn, 可以參數注入
instantiate: instantiate,
// 獲取provider或者service
get: getService,
// 獲取方法的參數列表，供注入使用
annotate: annotate,
// 確認是否含有provider或service
has: function(name) {
return providerCache.hasOwnProperty(name + providerSuffix) || cache.hasOwnProperty(name);
}
};
}
3.2 annotate
獲取fn的參數列表
// 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) {
// 嚴格模式下或拋錯
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, '');
// 將參數全部選出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 時會將需要注入的參數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 = [],
// 獲取參數列表
$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時，獲取最后的參數如：['$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的，在實例化的過程中可以自動傳入參數到構造函數。
相關文章
angular使用md5,CryptoJS des加密的方法
這篇文章主要介紹了angular使用md5,CryptoJS des加密的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
這篇文章主要介紹了Angular2實現的秒表及改良版,結合實例形式分析 Angular2實現秒表功能的原理、操作技巧與相關注意事項,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細介紹了Angular頁面間切換及傳值的四種方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要給大家介紹了關于在Angular.js中下拉框實現渲染html的方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來跟著小編一起來學習學習吧。2017-06-06
本篇文章主要介紹了強大的 Angular 表單驗證功能詳細介紹，使用 Angular 的內置表單校驗能夠完成絕大多數的業(yè)務場景的校驗需求，有興趣的可以了解一下2017-05-05
本篇文章主要介紹了Angularjs的啟動過程分析，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了AngularJS驗證、過濾器、指令的相關知識,angularJS中提供了許多的驗證指令，可以輕松的實現驗證，具體詳情大家通過本文一起學習吧，需要的朋友可以參考下2017-01-01
AngularJS實現給動態(tài)生成的元素綁定事件的方法
這篇文章主要介紹了AngularJS實現給動態(tài)生成的元素綁定事件的方法,結合實例形式分析了AngularJS動態(tài)生成元素與事件綁定相關操作技巧,需要的朋友可以參考下2016-12-12
對angular 監(jiān)控數據模型變化的事件方法$watch詳解
今天小編就為大家分享一篇對angular 監(jiān)控數據模型變化的事件方法$watch詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟
在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個現有組件并重寫它以使用 NgTemplateOutlet,需要的朋友可以參考下2024-03-03