自学实现angularjs依赖注入

前端之家收集整理的这篇文章主要介绍了自学实现angularjs依赖注入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

方法省略..*/

看看上面严格模式下的使用方式,先不去看源码,如何实现service重用,controller不重用呢? 我就按照自己的想法创建一个cache用于保存service,controller 只运行一次,不保存到cache中。

有了点思路,就把该有的东西先写了,

上面两个构造函数,一个是创建构造器,一个是angular 的静态module(不用创建直接用 "构造函数名.方法名",这里就是想模仿angular.module())方法,这里angular module 的方法我简写了,他也有依赖注入,但是我能力有限,先研究了controller和service的注入。上面的方法名字都是我copy于源码中的,这里我就不解释他们的具体意义了。

由于我们研究的是依赖注入,真正的核心代码如下:

/; 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自己。

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

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

<Meta charset="UTF-8"> angular injector Demo

谢谢大家!

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

猜你在找的JavaScript相关文章