js 实现 di
前些时候有使用过AngularJS一些时间,最大的感受就是Angular完全颠覆了我们开发Web应用的方式,自己被其许多耳目一新的设计思想所折服。
首先想说的就是依赖注入(DI),这也意味着,你在使用某一个模块时,不需要去手动require()一下,你需要的模块会自己注入到的函数所在的作用域中,如:
1
2
3
4
5
|
app.service( 'PersonService' , function ($http) { this .addPerson = function () { return $http.post( 'url/addPersonAction' , {name: 'name' }); } }); |
上面的代码中,直接使用了$http的post()方法。那么问题来了:为什么可以这样?我们知道JS函数在调用时,其形参如果没有赋值就会是undefined。能直接使用$http的post()方法,就说明$http是有对应的实参与之对应的。这是怎么发生的呢?下面,就让我们一起来揭开其中的秘密。
一: 如何在JS中实现DI
在这之前,我们先回顾一下toString方法。在JS中,除了null和undefined,其它所有的一切值都是有toString()方法的。函数也不例外,而且函数的toString()方法,是可以拿到函数定义的全部代码,甚至是注释。有了这一前提,我们可以实现一个获取函数形参的方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/** * 以数组的形式返回函数的参数名字字符串。没有参数时返回空数组 * @param {Function} fn - 要获取参数的函数 * @returns {Array} */ function argumentNames(fn) { var ret, methodCode = fn.toString(); methodCode.replace(/\((.*?)\)/, function (match, g1) { var argStr = g1.replace(/\s/g, '' ); ret = argStr.length ? argStr.split( ',' ) : []; }); return ret; } // 使用: argumentNames( function (arg1, arg2) {}); // ["arg1", "arg2"]; |
有了这个方法,我们要实现参数的DI,还需要两步:
1. 函数运行拦截它
2. 把对应的模块传给函数的上下文
对于第一步,JS原生没有提供对应方法。但我们可以参照defined(), require()的做法。你定义模块时,必须使用我给的方式去定义。类比Angular是
1
2
3
|
angularModule.service( 'serviceID' , function (dependencyModuleA [, dependencyModuleB...]) { // do something }); |
呵呵,既然你使用了我的方法去定义模块,那么我就可以对你传入的函数为所欲为了…。可能你已经想到了,我们要对其传入的函数所做的第一件事就是获取其参数列表,然后再把这个模块保存下来。有了这个参数列表,就知道要注入多少个依赖。再接着,把对应的依赖传作为实参传过去。那么,如何拿到对应的依赖?在我们给的定义方法中,已经让传入了一个ID,这个ID就是获取对应模块的关键。
要注入的模块 === 模块仓库[模块ID];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
// DI的完整实现: ( function (widnow) { window.DI = { serviceCache:{}, _argumentNames: function (fn) { var ret, methodCode = fn.toString(); methodCode.replace(/\((.*?)\)/, function (match, g1) { var argStr = g1.replace(/\s/g, '' ); ret = argStr.length ? argStr.split( ',' ) : []; }); return ret; }, service: function (serviceID, serviceFactory) { this .serviceCache[serviceID] = new serviceFactory(); return this ; }, controller: function (controllerID, controllerCb) { var controllerCbArgs = this ._argumentNames(controllerCb); var dependencies = [], i = 0; // 根据controllerCbArgs有序填充依赖 while (controllerCbArgs[i]) { dependencies.push( this .serviceCache[controllerCbArgs[i]]); i++; } controllerCb.apply({}, dependencies); return this ; } }; })( this ); // 使用方法: DI .service( 'AT' , function () { this .name = 'Alloy Team' ; this .concatUs = function () { document.body.innerHTML = 'Email: <a onclick="javascript:pageTracker._trackPageview(' /mailto/AlloyTeam@tencent.com ');" href="mailto:AlloyTeam@tencent.com">AlloyTeam@tencent.com</a>' ; }; }) .controller( 'c' , function (AT) { AT.concatUs(); }); |
到此,我们已经简单实现了依赖注入。当然,这个实现是有很多问题的,比如JS混淆后不能正常工作,定义一个模块就立即new也是不恰当的。有兴趣的话可以尝试去完善这个DI,这里就不继续下去了。
二: 如何在JS中实现AOP
提到DI,我就想到了AOP。有Java基础的同学都知道Ioc和AOP是Spring的两大特性。在JS中,要实现AOP也很简单,但方式却显得唯一:重写原来的函数定义。如下是AOP一个实现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
( function (window) { window.AOP = { before: function (ns, fnName, beforefn) { var ori = ns[fnName]; ns[fnName] = function () { beforefn(); ori(); } } }; })( this ); // 使用 var ns = { foo: function () { console.log( 'foo...' ); } }; var bar = function () { console.log( 'bar...' ); }; // 现在使用AOP在ns.foo函数执行前,切入新逻辑bar() AOP.before(ns, 'foo' , bar); // 执行ns.foo ns.foo(); /* 打印: bar... foo... */ |
虽然上面AOP的实现比较丑陋,但目前要想在JS中实现AOP,核心原理都是重写函数定义。期望有一天能像操作XMLHttpRequest对象那样,在每个函数对象上,也有一个类似readyState的属性,这时,再结合Object.observe,相信那时JS中的AOP实现将会非常优雅,AOP也会在JS中得到更好的使用。更多AOP的使用场景可以参考文章:js实现aop
小结:
1. 在JS中实现DI:利用函数的toString方法
2. 在JS中实现AOP:重写原函数
js 实现 di的更多相关文章
- 原创:Javascript DI!Angular依赖注入的实现原理
DI是Angular的特色功能,而在Angular 2.0的计划中,DI将成为一个独立的模块,参见 https://github.com/angular/di.js 这意味着它也有机会被用于nodej ...
- webpack优化之code splitting
作为当前风头正盛的打包工具,webpack风靡前端界.确实作为引领了一个时代的打包工具,很多方面都带来了颠覆性的改进,让我们更加的感受到自动化的快感.不过最为大家诟病的一点就是用起来太难了. 要想愉快 ...
- Decorator - 利用装饰器武装前端代码
历史 以前做后端时,接触过一点Spring,也是第一次了解DI.IOC等概念,面向切面编程,对于面向对象编程还不怎么熟练的情况下,整个人慌的一批,它的日志记录.数据库配置等都非常方便,不回侵入到业务代 ...
- Atitit js中的依赖注入di ioc的实现
Atitit js中的依赖注入di ioc的实现 全类名(FQCN)为标识符1 混合请求模式1 使用类内 builder 即可..2 Service locator method走ok拦2 Jav ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- 分享一个html+js+ashx+easyui+ado.net权限管理系统
EasyUI.权限管理 这是个都快被搞烂了的组合,但是easyui的确好用,权限管理在项目中的确实用.一直以来博客园里也不少朋友分享过,但是感觉好的要不没源码,要不就是过度设计写的太复杂看不懂,也懒得 ...
- 【干货】JS版汉字与拼音互转终极方案,附简单的JS拼音输入法
前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...
- angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe
angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...
- Vue.js学习笔记(8)拖放
小颖在目前负责的项目中,负责给同事提供所需组件,在这期间,我们家大颖姐姐让我 写个拖拽组件,一开始我是用click实现,先将你要拖拽的dom点一下,然后再点你要放的位置,这个dom再通过小颖写的方法, ...
随机推荐
- OCCI处理CHAR类型字符串变量的不同
问题背景: 一个旧应用,原先应用是用proc写的,9i的库,如今应用须要改为使用OCCI,当中有一段查询逻辑:select ... where upper(state)=upper(:1). (此处请 ...
- Qt 学习之路:输入元素
前面的章节中,我们看到了作为输入元素的MouseArea,用于接收鼠标的输入.下面,我们再来介绍关于键盘输入的两个元素:TextInput和TextEdit. TextInput是单行的文本输入框,支 ...
- 查看pid
可以使用ps -ef | grep httpd查看PID 然后kill –l PID
- java中for循环的6种写法
有些写法上的说明写的过于武断,可能有很多不当之处,仅供参考. package ForLoop; import java.util.ArrayList; import java.util.Itera ...
- ssh连接超时问题解决方案
方法一: 1.设置服务器向SSH客户端连接会话发送频率和时间 #vi /etc/ssh/sshd_config,添加如下两行ClientAliveInterval 60ClientAliveCount ...
- Java中Date各种相关用法
Java中Date各种相关用法(一) 1.计算某一月份的最大天数 Java代码 Calendar time=Calendar.getInstance(); time.clear(); time.set ...
- 10.27 noip模拟试题
1.铺瓷砖(tile.cpp/c/pas)[问题描述]有一面很长很长的墙. 你需要在这面墙上贴上两行瓷砖. 你的手头有两种不同尺寸的瓷砖,你希望用这两种瓷砖各贴一行.瓷砖的长可以用分数表示,贴在第一行 ...
- lucene 抛出的异常(分享)
1) too many boolean clauses异常 例如: String keyword=".......";//(keyword的长度太长) Query indexQue ...
- cocos2dx Hello world 创建
环境搭建好后,就要开始创建自己的第一个hello world项目了 因为没有安装其他的插件,所以最开始只能手动创建 首先通过cmd 进入你的cocos2dx的路径下: D:\soft\cocos2d- ...
- Android开发手记(28) Handler和Looper
Android的消息处理有三个核心类:Looper,Handler和Message.其实还有一个Message Queue(消息队列),但是MQ被封装到Looper里面了,我们不会直接与MQ打交道.平 ...