自学实现angularjs依赖注入  更新时间:2016年12月20日 14:16:07   作者:zhanglearning   这篇文章主要为大家详细介绍了angularjs依赖注入的自己成果,如何实现angularjs依赖注入,具有一定的参考价值,感兴趣的小伙伴们可以参考一下     在用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自己。    上面的我没有做错误处理,比如注入的找不到等等一些问题,有兴趣自己加上吧。 最后所有代码如下,大家可以复制运行: angular injector Demo 谢谢大家! 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章: angular 服务的单例模式(依赖注入模式下)详解 深入理解Angular中的依赖注入 Angular 4依赖注入学习教程之InjectToken的使用(八) Angular 4依赖注入学习教程之ValueProvider的使用(七) AngularJS学习第二篇 AngularJS依赖注入 AngularJS的依赖注入实例分析(使用module和injector) Angular.JS学习之依赖注入$injector详析 AngularJS $injector 依赖注入详解 详解Angular依赖注入 angularjs 依赖注入 相关文章 详解Angular5路由传值方式及其相关问题 这篇文章主要介绍了详解Angular5路由传值方式及其相关问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-04-04 Angular.js中$resource高大上的数据交互详解 这篇文章主要给大家介绍了关于Angular.js中$resource高大上的数据交互的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angular.js具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。 2017-07-07 详解Angular结合zTree异步加载节点数据 本篇文章主要给大家分享了Angular结合zTree异步加载节点数据的难点以及方法,有这方面需求的朋友参考下吧。 2018-01-01 angular实现input输入监听的示例 今天小编就为大家分享一篇angular实现input输入监听的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 AngularJS 应用身份认证的技巧总结 这篇文章主要介绍了AngularJS 应用身份认证的技巧总结,具有一定的参考价值,有需要的可以了解一下。 2016-11-11 AngularJS动态添加数据并删除的实例 下面小编就为大家分享一篇AngularJS动态添加数据并删除的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-02-02 AngularJS指令详解及示例代码 本文主要介绍AngularJS指令,这里整理了简单的指令并附示例代码,有需要的小伙伴可以参考下 2016-08-08 AngularJS的$location使用方法详解 这篇文章主要介绍了AngularJS的$location使用方法详解的相关资料,希望通过本文大家能够掌握这部分内容,需要的朋友可以参考下 2017-10-10 Angular环境搭建及简单体验小结 Angular基于TypeScript和react、vue相比 Angular更适合中大型企业级项目,本文通过实例代码给大家分享Angular环境搭建及简单体验,感兴趣的朋友跟随小编一起学习吧 2021-05-05 使用Angular.js开发的注意事项 这篇文章主要记录了一些在学习和使用angular.js踩到的坑和需要注意的点,方便以后自己查阅,也给同样遇到这些问题的朋友们一些帮助,有需要的朋友们下面来一起看看吧。 2016-10-10 最新评论

    在用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>

谢谢大家!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • angular 服务的单例模式(依赖注入模式下)详解
  • 深入理解Angular中的依赖注入
  • Angular 4依赖注入学习教程之InjectToken的使用(八)
  • Angular 4依赖注入学习教程之ValueProvider的使用(七)
  • AngularJS学习第二篇 AngularJS依赖注入
  • AngularJS的依赖注入实例分析(使用module和injector)
  • Angular.JS学习之依赖注入$injector详析
  • AngularJS $injector 依赖注入详解
  • 详解Angular依赖注入
张贴在3