在用angular依賴注入時，感覺很好用，他的出現是 為了“削減計算機程序的耦合問題” ，我懷着敬畏與好奇的心情，輕輕的走進了angular源碼，看看他到底是怎么實現的，我也想寫個這么牛逼的功能。於是就模仿着寫了一個，如果有什么不對，請大家批評指正。
其實剛開始的時候我也不知道怎么下手，源碼中有些確實晦澀難懂，到現在我也沒有看明白，於是我就靜下心想一想，他是怎么用的，如下所示：
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中。
有了點思路，就把該有的東西先寫了，
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於源碼中的，這里我就不解釋他們的具體意義了。
由於我們研究的是依賴注入，真正的核心代碼如下：
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 };
其中上面的正則表達式是復制於源碼中的，代碼原理是：
（1）把傳來的function toString(),然后用正則match出所傳參數名，用split把參數分割成參數數組；
（2）循環參數數組，在cache中找到此參數名下的函數，push到一個函數數組中；
（3）利用apply，把函數數組當成參數，去執行函數；
對於所傳的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>
謝謝大家！