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>