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自己。
上面的我没有做错误处理，比如注入的找不到等等一些问题，有兴趣自己加上吧。
最后所有代码如下，大家可以复制运行：
<!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 依赖注入原理与实现的更多相关文章
- AngularJS依赖注入
<html> <head> <meta charset="utf-8"> <title>AngularJS 依赖注入</tit ...
- AngularJS 依赖注入
依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该 ...
- 关于angularjs依赖注入的整理
初学angularjs阶段,刚刚看到菜鸟教程的angularjs依赖注入.现在整理一下: 1.含义:一个或更多的依赖(可以理解为模块关系依赖)或服务(分为内建服务[例如$http,$tiomeout等 ...
- PHP依赖注入原理与用法分析
https://www.jb51.net/article/146025.htm 本文实例讲述了PHP依赖注入原理与用法.分享给大家供大家参考,具体如下: 引言 依然是来自到喜啦的一道面试题,你知道什么 ...
- Spring依赖注入原理分析
在分析原理之前我们先回顾下依赖注入的概念: 我们常提起的依赖注入(Dependency Injection)和控制反转(Inversion of Control)是同一个概念.具体含义是:当某个角色( ...
- 【串线篇】spring泛型依赖注入原理
spring泛型依赖注入原理 不管三七二十一 servlet :加注解@servlet service:加注解@service dao:加注解@Repository 这相当于在容器中注册这些个类
- angularjs 依赖注入--自己学着实现
在用angular依赖注入时,感觉很好用,他的出现是 为了"削减计算机程序的耦合问题" ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个 ...
- 30行代码让你理解angular依赖注入：angular 依赖注入原理
依赖注入(Dependency Injection,简称DI)是像C#,java等典型的面向对象语言框架设计原则控制反转的一种典型的一种实现方式,angular把它引入到js中,介绍angular依赖 ...
- angular 依赖注入原理
依赖注入(Dependency Injection,简称DI)是像C#,java等典型的面向对象语言框架设计原则控制反转的一种典型的一种实现方式,angular把它引入到js中,介绍angular依赖 ...
随机推荐
- 数据库如何从SQL server转换到SQLite
我之前用的是SQL server数据库,但是客户那里觉得安装这个大的数据库比较卡,说是导致蓝屏了,硬往SQL server上赖,没有办法客户是上帝么,给他换个小点的数据库吧!考虑Access,不行这个 ...
- IT和非IT人士：2分钟了解什么是区块链
本文由 网易云发布. (非IT:阅读常规部分:IT:阅读引用块) 作者:任长存,网易杭州研究院工程师 前言 信息的高速发展,致使互联网风口犹如娱乐圈,移动互联网,微博.直播.共享经济.短视频.小程序 ...
- flask源码解析之上下文为什么用栈
楔子 我在之前的文章<flask源码解析之上下文>中对flask上下文流程进行了详细的说明,但是在学习的过程中我一直在思考flask上下文中为什么要使用栈完成对请求上下文和应用上下文的入栈 ...
- 浅谈对MVC的认识
MVC是model(模型),view(视图),Controller(控制)的缩写. 模型层负责提供数据,和数据库相关的操作都交给模型层处理: 视图层提供交互的界面,其输出数据: 控制层负责接收各种请求 ...
- 七，mysql优化——表的垂直划分和水平划分
1,表的水平划分 如果一个表的记录数太多,比如成千上万条,而且需要经常检索,那么我们有必要化整为零.如果我拆成100个表,那么每个表只有10万条记录.当然需要数据在逻辑上可以划分.一个好的划分依据,有 ...
- Android之自定义控件
开发自定义控件的步骤: 1.了解View的工作原理 2. 编写继承自View的子类 3. 为自定义View类增加属性 4. 绘制控件 5. 响应用户消息 6 .自定义回调函数 一.Vie ...
- String 在内存中如何存储的
基本数据类型由于长度固定,且需要空间比较少,所以直接存储在栈中:而对象比较大,所以栈中只存储一个4btye的引用地址(逻辑地址). java中对String对象特殊对待,所以在heap区域分成了两块: ...
- HTML+Javascript制作拼图小游戏详解（终）
上次我们已经讲解了制作的原理,并且展示了主要代码. 这次我将完整的代码给大家,仅供参考. HTML部分如下: <!DOCTYPE html> <html lang="en& ...
- iOS多线程---GCD中线程的通信
在子线程的任务完成后,有时候需要从子线程回到主线程,刷新UI. 从子线程中回到主线程,以前已经写过一种方法: [self.imageView performSelectorOnMainThread:@ ...
- 【ROS系列】使用QT编写ROS订阅、发布程序
Linux下一直使用QT进行开发,支持cmake使得很容易导入其他工程.学习ROS过程中,很多函数名称难记,使用QT不仅可以提示补全,还为了以后开发GUI方便吧. 1.安装ros_qtc_plugin ...