自学实现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 = /（（//.*$）|（/*[sS]*?*/））/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 = /（（//.*$）|（/*[sS]*?*/））/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>

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