自学实现angularjs依赖注入

2019-11-19 18:22:47

字体：大中小

来源：转载

供稿：网友

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

其实刚开始的时候我也不知道怎么下手，源码中有些确实晦涩难懂，到现在我也没有看明白，于是我就静下心想一想，他是怎么用的，如下所示：

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

看看上面严格模式下的使用方式，先不去看源码，如何实现service重用，controller不重用呢？我就按照自己的想法创建一个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);

上面两个构造函数，一个是创建构造器，一个是angular 的静态module（不用创建直接用 "构造函数名.方法名"，这里就是想模仿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);  } }};

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

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

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

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

对于所传的fn，判断是数组格式，还是普通的，如果是数组就apply最后的一个值，也就是函数，否则就是fn自己。

上面的我没有做错误处理，比如注入的找不到等等一些问题，有兴趣自己加上吧。

最后所有代码如下，大家可以复制运行：

<!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>

谢谢大家！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JS实现淡入淡出图片效果的方法分析

下一篇：JS多物体实现缓冲运动效果示例