依赖注入起源于实现控制反转的典型框架Spring框架，用来削减计算机程序的耦合问题。简单来说，在定义方法的时候，方法所依赖的对象就被隐性的注入到该方法中，在方法中可以直接使用，而不需要在执行该函数的时候再参数中添加这些依赖对象。
理解很简单，我们以一个例子说明
var $name = "chua",$age = 26;
function myInfo($name,$age){
alert($name + ":" + $age );
}; //普通情况下应该执行
myInfo($name,$age);//"chua:26"
//实现依赖注入以后
myInfo();//本人希望打印的结果是"chua:26",但是毫无疑问在没有实现依赖注入之前是不好使的
那么怎么样实现依赖注入呢？
首先，需要有一个函数来接管myInfo的函数定义，不然我们没法拿到myInfo的依赖对象名称加以保存。
function injector(fn){
//处理fn，保存依赖对象
...
return function(){
fn.apply({},xxx);//xxx是处理过后的参数
}
}
//myInfo的定义变成
var myInfo = injector(function ($name,$age){
alert($name + ":" + $age );
});
myInfo();
injector函数是怎么获取到myInfo的依赖对象$name、$age的？我们可以通过传入参数的函数fn.toString()来看，
//fn.toString()的结果为下面的字符串
"function myInfo($name,$age){
alert($name + ":" + $age );
}"
参考angular的处理：从字符串中读取函数myInfo的参数还是能读取。
STRIP_COMMENTS =/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm,
FN_ARGS = /^[^\(]*\(\s*([^\)]*)\)/m,
FN_ARG =/^\s*(\S+?)\s*$/;
function injector(fn){
//处理fn，保存依赖对象
var fnText = fn.toString().replace(STRIP_COMMENTS, '');//"function myInfo($name,$age){ alert($name + ":" + $age ); }"
var argDecl = fnText.match(FN_ARGS);//["function myInfo($name,$age)", "$name,$age"]
var args = argDecl[1].split(",");//["$name","$age"]
for(var i = 0; i < args.length; i++){
args[i] = args[i].replace(FN_ARG,"$1");
}
...
return function(){
fn.apply({},xxx);//xxx是处理过后的参数
}
}
但是有这个还不够，我们虽然拿到了要依赖的对象名称，但是我们并没有给这些名称指定对应的对象。所以应当有一个给这些要依赖的对象注册的过程。
function injector(fn){
...
var args = argDecl[1].split(",");
for(var i = 0; i < args.length; i++){
args[i] = injector.cache[args[i].replace(FN_ARG,"$1")];
}
return function(){
fn.apply({},args);
}
}
injector.cache = {};
injector.register = function(key,resource){
injector.cache[key] = resource;
}
//先注册要依赖的对象
injector.register("$name",$name);
injector.register("$age",$age);
这个时候我们可以使用injector来声明函数了
var myInfo = injector(function($name,$age){
alert($name + ":" + $age );
});
//没有任何参数，得到期望的结果
myInfo();//chua:26
只要是已经注册过的对象就多可以注入到使用injector函数来声明的函数中使用。完整的测试代码如下
<script>
var $name = "chua",
$age = 26,
STRIP_COMMENTS =/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm,
FN_ARGS = /^[^\(]*\(\s*([^\)]*)\)/m,
FN_ARG =/^\s*(\S+?)\s*$/;
function injector(fn){
//处理fn，保存依赖对象
var fnText = fn.toString().replace(STRIP_COMMENTS, '');//"function myInfo($name,$age){ alert($name + ":" + $age ); }"
var argDecl = fnText.match(FN_ARGS);//["function myInfo($name,$age)", "$name,$age"]
var args = argDecl[1].split(",");//["$name","$age"]
for(var i = 0; i < args.length; i++){
args[i] = injector.cache[args[i].replace(FN_ARG,"$1")];
}
return function(){
fn.apply({},args);
}
}
injector.cache = {};
injector.register = function(key,resource){
injector.cache[key] = resource;
}
//先注册要依赖的对象
injector.register("$name",$name);
injector.register("$age",$age); //下面这个奇迹出现的时刻
var myInfo = injector(function($name,$age){
alert($name + ":" + $age );
});
myInfo();//chua:26
</script>
好了简单的实现了一个依赖注入。但是依赖注入有一个问题，依赖注入是基于依赖对象的名称字符串的
injector(function($name,$age){...});
那么上面的代码通过一般的压缩工具压缩以后会变成
a(function(b,c){...});
已经无法找到依赖对象是"$name"/"$age"对应的对象了。
所以angular想了几个办法。
angular简单注入方式为
myModule.controller('myCtrl',function($scope) {... });
数组注释法
myModule.controller('myCtrl', ['$scope', function($scope) {... }]);
显式注入法
function myCtrl(){...};
myCtrl.$inject = ["$scope"];
myModule.controller('myCtrl',myCtrl);
有一个第三方的插件ng-min，它可以帮你将以简单方式注入的代码自动转换成数组注释的方式，即能满足你写简洁代码的愿望，又能避免压缩出错问题。ng-min地址：https://github.com/btford/ngmin
angular实现依赖注入的方式
应该说，js的依赖注入实现方式都是类似的。angular实现的依赖注入对象结构如下
injector = {
annotate: function annotate(fn, strictDi, name),
get: function getService(serviceName, caller),
has: function(name),
instantiate: function instantiate(Type, locals, serviceName),
invoke: function invoke(fn, self, locals, serviceName)
}
1.需要有注入的对象（依赖的对象）保存的地方。
不知道还记不记得我的angular源码学习之旅1中提到angularModule = setupModuleLoader(window)给angular添加了模块声明（添加模块）、加载（获取模块）的方法angular.module。而在创建注入对象的时候（createInjector函数中）有这么一段代码
forEach(loadModules(modulesToLoad), function(fn) { if (fn) instanceInjector.invoke(fn); });
其中loadModules(modulesToLoad)就是去加载依赖模块，在loadModules函数中真正去加载模块的是这段代码
if (isString(module)) {
moduleFn = angularModule(module);
...
}
angularModule即angular.module。前面也分析过这些模块实际都保存在一个外部变量modules中
所以通过angular.module方法就是通过模块名去modules上添加或取出其中的模块。
2.获取依赖注入列表（即要依赖的对象的名称）
获取方式也是通过fn.toString()来获取的。angular的实现是injector.annotate,函数体为
function annotate(fn, strictDi, name) {
var $inject,
fnText,
argDecl,
last;
if (typeof fn === 'function') {
if (!($inject = fn.$inject)) {
$inject = [];
if (fn.length) {
...
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)) {
...
} else {
...
}
return $inject;
}
只是应为angular接受多种注入方式所以处理代码有多个分支，而且也只是保存了依赖对象名称，并没有返回执行函数，执行函数是统一的injector.invoke。
先前我们自己的实现执行是直接调用的myInfo();angular的执行函数是injector.invoke,函数体如下
function invoke(fn, self, locals, serviceName) {
if (typeof locals === 'string') {
serviceName = locals;
locals = null;
}
var args = [],
$inject = createInjector.$$annotate(fn, strictDi, serviceName),
length, i,
key;
for (i = 0, length = $inject.length; i < length; i++) {
key = $inject[i];
...
//获取依赖对象
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);
}
好了angularjs的依赖注入实现分析到此结束。更详细的细节可以断点跟踪。
如果觉得本文不错，请点击右下方【推荐】！