angularjs 依赖注入原理与实现

时间 2019-11-14

原文原文链接

在用angular依赖注入时，感受很好用，他的出现是为了“削减计算机程序的耦合问题” ，我怀着敬畏与好奇的心情，轻轻的走进了angular源码，看看他究竟是怎么实现的，我也想写个这么牛逼的功能。因而就模仿着写了一个，若是有什么不对，请你们批评指正。html

其实刚开始的时候我也不知道怎么下手，源码中有些确实晦涩难懂，到如今我也没有看明白，因而我就静下心想想，他是怎么用的，以下所示：正则表达式

 1 angular.module(/*省略*/)
 2    .factory("xxxService", ['xx',function (xx) {
 3         return {
 4              //省略
 5         }
 6    }])
 7    .controller('iiController',['xxxService',function(xxxService){
 8        //省略
 9    }]);
10 /*...方法省略..*/

看看上面严格模式下的使用方式，先不去看源码，如何实现service重用，controller不重用呢？我就按照本身的想法建立一个cache用于保存service，controller 只运行一次，不保存到cache中。数组

有了点思路，就把该有的东西先写了，app

 1 (function (global) {
 2     function CreateInjector(cache){
 3         this.cache=cache;//用于保存service的cache
 4     }
 5     function Angular(){}
 6     Angular.module=function(){
 7         var moduleObj={};
 8         return {
 9             injector:new CreateInjector(moduleObj),
10             factory:function(name,fn){
11             },
12             controller:function(name,fn){
13             }
14         }
15     };
16     global.angular = Angular;
17 })(window);

上面两个构造函数，一个是建立构造器，一个是angular 的静态module（不用建立直接用 "构造函数名.方法名"，这里就是想模仿angular.module()）方法，这里angular module 的方法我简写了，他也有依赖注入，可是我能力有限，先研究了controller和service的注入。上面的方法名字都是我copy于源码中的，这里我就不解释他们的具体意义了。函数

因为咱们研究的是依赖注入，真正的核心代码以下：this

 1 var ARROW_ARG = /^([^\(]+?)=>/;
 2 var FN_ARGS = /^[^\(]*\(\s*([^\)]*)\)/m;
 3 var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;
 4 function isArray(obj){
 5     return Object.prototype.toString.call(obj) === '[object Array]';
 6 }
 7 function stringifyFn(fn) {
 8     return fn.toString();
 9 }
10 
11 function extractArgs(fn) {
12     var fnText = stringifyFn(fn).replace(STRIP_COMMENTS, ''),
13     args= fnText.match(ARROW_ARG) || fnText.match(FN_ARGS);
14     return args[1].split(',');
15 }
16 function CreateInjector(cache){
17     this.cache=cache;
18 }
19 CreateInjector.prototype={
20     constructor:CreateInjector,
21     invoke:function(fn,self){
22         var argsName= extractArgs(fn),argsFn=[];
23         argsName.forEach(function(arg){
24             argsFn.push(this.cache[arg]);
25         },this);
26         if(isArray(fn)){
27             return fn[fn.length-1].apply(self,argsFn);
28         }else{
29             return fn.apply(self,argsFn);
30         }
31     }
32 };

其中上面的正则表达式是复制于源码中的，代码原理是：spa

（1）把传来的function toString(),而后用正则match出所传参数名，用split把参数分割成参数数组；prototype

（2）循环参数数组，在cache中找到此参数名下的函数，push到一个函数数组中；code

（3）利用apply，把函数数组当成参数，去执行函数；htm

对于所传的fn，判断是数组格式，仍是普通的，若是是数组就apply最后的一个值，也就是函数，不然就是fn本身。

上面的我没有作错误处理，好比注入的找不到等等一些问题，有兴趣本身加上吧。

最后全部代码以下，你们能够复制运行：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular injector Demo</title>
 6 </head>
 7 <body>
 8 <script>
 9 (function (global) {
10     var ARROW_ARG = /^([^\(]+?)=>/;
11     var FN_ARGS = /^[^\(]*\(\s*([^\)]*)\)/m;
12     var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;
13     function isArray(obj){
14         return Object.prototype.toString.call(obj) === '[object Array]';
15     }
16     function stringifyFn(fn) {
17         return fn.toString();
18     }
19 
20     function extractArgs(fn) {
21         var fnText = stringifyFn(fn).replace(STRIP_COMMENTS, ''),
22         args= fnText.match(ARROW_ARG) || fnText.match(FN_ARGS);
23         return args[1].split(',');
24     }
25     function CreateInjector(cache){
26         this.cache=cache;
27     }
28     CreateInjector.prototype={
29         constructor:CreateInjector,
30         invoke:function(fn,self){
31             var argsName= extractArgs(fn),argsFn=[];
32             argsName.forEach(function(arg){
33                 argsFn.push(this.cache[arg]);
34             },this);
35             if(isArray(fn)){
36                 return fn[fn.length-1].apply(self,argsFn);
37             }else{
38                 return fn.apply(self,argsFn);
39             }
40         }
41     };
42     function Angular(){}
43     Angular.module=function(){
44         var moduleObj={};
45          return {
46              injector:new CreateInjector(moduleObj),
47              factory:function(name,fn){
48                  moduleObj[name]=this.injector.invoke(fn);
49                  return this;
50              },
51              controller:function(name,fn){
52                  this.injector.invoke(fn);
53                  return this;
54              }
55          }
56     };
57     global.angular = Angular;
58 })(window);
59 
60 
61 angular.module()
62     .factory('cacheService',[function(){
63         return {};
64     }])
65     .factory("userInfoService", ['cacheService',function (cacheService) {
66         return {
67             getUserInfo:function(){
68                 return cacheService.userInfo;
69             },
70             setUserInfo:function(value){
71                 cacheService.userInfo=value;
72             }
73         }
74     }])
75     .controller('userController',['userInfoService',function(userInfoService){
76         userInfoService.setUserInfo({id:'qqqq11234',name:'zhangLearing'});
77         console.log(userInfoService.getUserInfo());
78     }]);
79 </script>
80 </body>
81 </html>

谢谢你们！