angularjs源码笔记(3)--injector

简介

injector是用来做参数自动注入的，例如

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

ng在运行时会把$http, $scope, aService 自动作为参数传入进行执行。

其实很容易想明白，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进行创建,具体看getService解析
function createInternalInjector(cache, factory) {

function getService(serviceName) {
}

function invoke(fn, self, locals, serviceName){
}

function instantiate(Type, locals, serviceName) {
}

return {
// 执行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出来然后注入
// 因此做上标记后就可以判断是否有循环依赖
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优先
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执行Type方法
returnedValue = invoke(Type, instance, locals, serviceName);

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

instantiate 的作用是用来实例化Type的，在实例化的过程中可以自动传入参数到构造函数。

链接

angularjs源码笔记(1.1)--directive compile

angularjs源码笔记(1.2)--directive template

angularjs源码笔记(1.3)--directive ctrl & attrs

angularjs源码笔记(2)--loader modules

angularjs源码笔记(3)--injector

angularjs源码笔记(4)--scope

angularjs源码笔记(5.1)--$parse

angularjs源码笔记(5.2)--$parse（未完成）

angularjs源码笔记(6)--工具类 (未完成)

angularjs源码笔记(7)--常用指令 (未完成)