JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了自学实现angularjs依赖注入大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

service",['xx',function (xX) { return { //省略 } }]) .controller('iiController',['xxxservice',function(xxxservicE){ //省略 }]); /*...方法省略..*/

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

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

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

谢谢大家!

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

大佬总结

以上是大佬教程为你收集整理的自学实现angularjs依赖注入全部内容,希望文章能够帮你解决自学实现angularjs依赖注入所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。