AngularJS之依赖注入模拟实现

一、概述 

AngularJS有一经典之处就是依赖注入，对于什么是依赖注入，熟悉spring的同学应该都非常了解了，但，对于前端而言，还是比较新颖的。 

依赖注入，简而言之，就是解除硬编码，达到解偶的目的。 

下面，我们看看AngularJS中常用的实现方式。 

方法一：推断式注入声明，假定参数名称就是依赖的名称。因此，它会在内部调用函数对象的toString()方法，分析并提取出函数参数列表，然后通过$injector将这些参数注入进对象实例。 

如下： 

//方法一：推断式注入声明，假定参数名称就是依赖的名称。//因此，它会在内部调用函数对象的toString()方法，分析并提取出函数参数列表，//然后通过$injector将这些参数注入进对象实例injector.invoke(function($http, $timeout){ //TODO});

方法二：行内注入声明，允许我们在函数定义时，直接传入一个参数数组，数组包含了字符串和函数，其中，字符串代表依赖名，函数代表目标函数对象。
 如下：

//方法二：行内注入声明，允许我们在函数定义时，直接传入一个参数数组，//数组包含了字符串和函数，其中，字符串代表依赖名，函数代表目标函数对象。module.controller('name', ['$http', '$timeout', function($http, $timeout){ //TODO}]); 

看了上述代码，心中有一疑问，这些是怎么实现的呢？ 

哈哈，下面，我们就来一起模拟一下这些依赖注入方式，从而了解它们。 

二、搭建基本骨架 

依赖注入的获取过程就是，通过字段映射，从而获取到相应的方法。 

故而，要实现一个基本的依赖注入，我们需要一个存储空间（dependencies），存储所需键值（key/value）；一个注册方法（register），用于新增键值对到存储空间中；还有一个就是核心实现方法（resolve），通过相关参数，到存储空间中获得对应的映射结果。 

So，基本骨架如下： 

var injector = { dependencies: {}, register: function(key, value){ this.dependencies[key] = value; return this; }, resolve: function(){     }};

三、完善核心方法resolve 

从我们搭建的基本骨架中，可以发现，重点其实resolve方法，用于实现我们具体形式的依赖注入需求。 

首先，我们来实现，如下形式的依赖注入：推断式注入声明。 

如下： 

injector.resolve(function(Monkey, Dorie){ Monkey(); Dorie();}); 

要实现上述效果，我们可以利用函数的toString()方法，我们可以将函数转换成字符串，从而通过正则表达式获得参数名，即key值。 然后通过key值，在存储空间dependencies找value值，没找到对应值，则报错。