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

谢谢大家！

angularjs 依赖注入--自己学着实现的更多相关文章

  1. AngularJS依赖注入

    <html> <head> <meta charset="utf-8"> <title>AngularJS 依赖注入</tit ...

  2. AngularJS 依赖注入

        依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该 ...

  3. 关于angularjs依赖注入的整理

    初学angularjs阶段,刚刚看到菜鸟教程的angularjs依赖注入.现在整理一下: 1.含义:一个或更多的依赖(可以理解为模块关系依赖)或服务(分为内建服务[例如$http,$tiomeout等 ...

  4. AngularJS开发指南10：AngularJS依赖注入的详解

    依赖注入是一种软件设计模式,用来处理代码的依赖关系. 一般来说有三种方法让函数获得它需要的依赖: 它的依赖是能被创建的,一般用new操作符就行. 能够通过全局变量查找依赖. 依赖能在需要时被导入. 前 ...

  5. （五）Angularjs - 依赖注入

    如何找到API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同. 比如,AngularJS暴露了一个全局对象:angu ...

  6. AngularJS - 依赖注入(Dependency Injection)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 依赖注入 依赖注入是软件设计模式中的一部分,用于处理组件是如何得到它说依赖的其它组件的. ...

  7. AngularJS——依赖注入

    依赖注入    依赖注入(DI)是一个经典的设计模式, 主要是用来处理组件如何获得依赖的问题.关于DI,推荐阅读Martin Flower的文章(http://martinfowler.com/art ...

  8. 个人对于angularjs依赖注入的理解

    依赖注入(Dependency Injection,DI),作者认为本文中所有名词性的"依赖" 都可以理解为 "需要使用的资源". 对象或者函数只有以下3种获取 ...

  9. angularjs 依赖注入原理与实现

    在用angular依赖注入时,感觉很好用,他的出现是 为了“削减计算机程序的耦合问题” ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个这么牛逼的功能.于是 ...

随机推荐

  1. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  2. 【每日一linux命令3】参数（或称选项）顺序

    一般除了特殊情况,参数是没有顺序的.举例而言,输入"–a –v"与输入"–v –a"以及"–av" 的执行效果是相同的.但若该参数后指定了要 ...

  3. [虾扯蛋] android界面框架-Window

    从纯sdk及framwork的角度看,android中界面框架相关的类型有:Window,WindowManager,View等.下面就以这几个类为出发点来概览下安卓开发的"界面架构&quo ...

  4. 【原】AFNetworking源码阅读（六）

    [原]AFNetworking源码阅读(六) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这一篇的想讲的,一个就是分析一下AFSecurityPolicy文件,看看AF ...

  5. 基于ASP.NET/C#开发国外支付平台(Paypal)学习心得。

        最近一直在研究Paypal的支付平台,因为本人之前没有接触过接口这一块,新来一家公司比较不清楚流程就要求开发两个支付平台一个是支付宝(这边就不再这篇文章里面赘述了),但还是花了2-3天的时间通 ...

  6. html5 canvas常用api总结(二)--绘图API

    canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API. 绘画的时候canvas相当于画布,而 ...

  7. 最好的.NET开源免费ZIP库DotNetZip（.NET组件介绍之三）

    在项目开发中,除了对数据的展示更多的就是对文件的相关操作,例如文件的创建和删除,以及文件的压缩和解压.文件压缩的好处有很多,主要就是在文件传输的方面,文件压缩的好处就不需要赘述,因为无论是开发者,还是 ...

  8. slf4j

    Simple Logging Facade for Java (SLF4J) slf4j可以看成是对各个日志框架的一种抽象,它提供了一套通用的日志使用接口. 下面是slf4j的几个版本比较: 1.6. ...

  9. Mono产品生命周期

    软件生命周期 同任何事物一样,一个软件产品或软件系统也要经历孕育.诞生.成长.成熟.衰亡等阶段,一般称为软件生命周期(软件生存周期) .软件生命周期模型是指人们为开发更好的软件而归纳总结的软件生命周期 ...

  10. Linux C++ 开发简介

    主要介绍将Windows程序迁移到Linux系统相关知识 简介 Windows程序迁移到Linux系统可能需要修改很多代码, 既需要了解Linux平台的开发知识, 也需要了解Windows平台代码如何 ...