快捷導(dǎo)航

自學(xué)實現(xiàn)angularjs依賴注入

更新時間：2016年12月20日 14:16:07 作者：zhanglearning

這篇文章主要為大家詳細介紹了angularjs依賴注入的自己成果，如何實現(xiàn)angularjs依賴注入，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在用angular依賴注入時，感覺很好用，他的出現(xiàn)是為了“削減計算機程序的耦合問題” ，我懷著敬畏與好奇的心情，輕輕的走進了angular源碼，看看他到底是怎么實現(xiàn)的，我也想寫個這么牛逼的功能。于是就模仿著寫了一個，如果有什么不對，請大家批評指正。

其實剛開始的時候我也不知道怎么下手，源碼中有些確實晦澀難懂，到現(xiàn)在我也沒有看明白，于是我就靜下心想一想，他是怎么用的，如下所示：

angular.module(/*省略*/)
 .factory("xxxService", ['xx',function (xx) {
  return {
    //省略
  }
 }])
 .controller('iiController',['xxxService',function(xxxService){
  //省略
 }]);
/*...方法省略..*/

看看上面嚴格模式下的使用方式，先不去看源碼，如何實現(xiàn)service重用，controller不重用呢？我就按照自己的想法創(chuàng)建一個cache用于保存service，controller 只運行一次，不保存到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);
  }
 }
};

其中上面的正則表達式是復(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ù)制運行：

<!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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: