在用angular依賴注入時，感覺很好用，他的出現(xiàn)是 為了“削減計算機(jī)程序的耦合問題” ，我懷著敬畏與好奇的心情，輕輕的走進(jìn)了angular源碼，看看他到底是怎么實現(xiàn)的，我也想寫個這么牛逼的功能。于是就模仿著寫了一個，如果有什么不對，請大家批評指正。
其實剛開始的時候我也不知道怎么下手，源碼中有些確實晦澀難懂，到現(xiàn)在我也沒有看明白，于是我就靜下心想一想，他是怎么用的，如下所示：
angular.module(/*省略*/) .factory("xxxService", ['xx',function (xx) { return { //省略 } }]) .controller('iiController',['xxxService',function(xxxService){ //省略 }]);/*...方法省略..*/看看上面嚴(yán)格模式下的使用方式，先不去看源碼，如何實現(xiàn)service重用，controller不重用呢？ 我就按照自己的想法創(chuàng)建一個cache用于保存service，controller 只運(yùn)行一次，不保存到cache中。
有了點思路，就把該有的東西先寫了，
(function (global) { function CreateInjector(cache){ this.cache=cache;//用于保存service的cache } function Angular(){} Angular.module=function(){ var moduleObj={}; return { injector:new CreateInjector(moduleObj), factory:function(name,fn){ }, controller:function(name,fn){ } } }; global.angular = Angular;})(window);上面兩個構(gòu)造函數(shù)，一個是創(chuàng)建構(gòu)造器，一個是angular 的靜態(tài)module（不用創(chuàng)建直接用 "構(gòu)造函數(shù)名.方法名"，這里就是想模仿angular.module()）方法，這里angular module 的方法我簡寫了，他也有依賴注入，但是我能力有限，先研究了controller和service的注入。上面的方法名字都是我copy于源碼中的，這里我就不解釋他們的具體意義了。
由于我們研究的是依賴注入，真正的核心代碼如下：
var ARROW_ARG = /^([^/(]+?)=>/;var FN_ARGS = /^[^/(]*/(/s*([^/)]*)/)/m;var STRIP_COMMENTS = /((////.*$)|(///*[/s/S]*?/*//))/mg;function isArray(obj){ return Object.prototype.toString.call(obj) === '[object Array]';}function stringifyFn(fn) { return fn.toString();}function extractArgs(fn) { var fnText = stringifyFn(fn).replace(STRIP_COMMENTS, ''), args= fnText.match(ARROW_ARG) || fnText.match(FN_ARGS); return args[1].split(',');}function CreateInjector(cache){ this.cache=cache;}CreateInjector.prototype={ constructor:CreateInjector, invoke:function(fn,self){ var argsName= extractArgs(fn),argsFn=[]; argsName.forEach(function(arg){ argsFn.push(this.cache[arg]); },this); if(isArray(fn)){ return fn[fn.length-1].apply(self,argsFn); }else{ return fn.apply(self,argsFn); } }};其中上面的正則表達(dá)式是復(fù)制于源碼中的，代碼原理是：
（1）把傳來的function toString(),然后用正則match出所傳參數(shù)名，用split把參數(shù)分割成參數(shù)數(shù)組；
（2）循環(huán)參數(shù)數(shù)組，在cache中找到此參數(shù)名下的函數(shù)，push到一個函數(shù)數(shù)組中；
（3）利用apply，把函數(shù)數(shù)組當(dāng)成參數(shù)，去執(zhí)行函數(shù)；
對于所傳的fn， 判斷是數(shù)組格式，還是普通的，如果是數(shù)組就apply最后的一個值，也就是函數(shù)，否則就是fn自己。
上面的我沒有做錯誤處理，比如注入的找不到等等一些問題，有興趣自己加上吧。
最后所有代碼如下，大家可以復(fù)制運(yùn)行：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>angular injector Demo</title></head><body><script>(function (global) { var ARROW_ARG = /^([^/(]+?)=>/; var FN_ARGS = /^[^/(]*/(/s*([^/)]*)/)/m; var STRIP_COMMENTS = /((////.*$)|(///*[/s/S]*?/*//))/mg; function isArray(obj){ return Object.prototype.toString.call(obj) === '[object Array]'; } function stringifyFn(fn) { return fn.toString(); } function extractArgs(fn) { var fnText = stringifyFn(fn).replace(STRIP_COMMENTS, ''), args= fnText.match(ARROW_ARG) || fnText.match(FN_ARGS); return args[1].split(','); } function CreateInjector(cache){ this.cache=cache; } CreateInjector.prototype={ constructor:CreateInjector, invoke:function(fn,self){ var argsName= extractArgs(fn),argsFn=[]; argsName.forEach(function(arg){ argsFn.push(this.cache[arg]); },this); if(isArray(fn)){ return fn[fn.length-1].apply(self,argsFn); }else{ return fn.apply(self,argsFn); } } }; function Angular(){} Angular.module=function(){ var moduleObj={}; return { injector:new CreateInjector(moduleObj), factory:function(name,fn){ moduleObj[name]=this.injector.invoke(fn); return this; }, controller:function(name,fn){ this.injector.invoke(fn); return this; } } }; global.angular = Angular;})(window);angular.module() .factory('cacheService',[function(){ return {}; }]) .factory("userInfoService", ['cacheService',function (cacheService) { return { getUserInfo:function(){ return cacheService.userInfo; }, setUserInfo:function(value){ cacheService.userInfo=value; } } }]) .controller('userController',['userInfoService',function(userInfoService){ userInfoService.setUserInfo({id:'qqqq11234',name:'zhangLearing'}); console.log(userInfoService.getUserInfo()); }]);</script></body></html>謝謝大家！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
