前些时候有使用过AngularJS一些时间,最大的感受就是Angular完全颠覆了我们开发Web应用的方式,自己被其许多耳目一新的设计思想所折服。

首先想说的就是依赖注入(DI),这也意味着,你在使用某一个模块时,不需要去手动require()一下,你需要的模块会自己注入到的函数所在的作用域中,如:

JavaScript
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()方法,是可以拿到函数定义的全部代码,甚至是注释。有了这一前提,我们可以实现一个获取函数形参的方法。

JavaScript
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是

JavaScript
1
2
3
angularModule.service('serviceID', function (dependencyModuleA [, dependencyModuleB...]) {
    // do something
});

呵呵,既然你使用了我的方法去定义模块,那么我就可以对你传入的函数为所欲为了…。可能你已经想到了,我们要对其传入的函数所做的第一件事就是获取其参数列表,然后再把这个模块保存下来。有了这个参数列表,就知道要注入多少个依赖。再接着,把对应的依赖传作为实参传过去。那么,如何拿到对应的依赖?在我们给的定义方法中,已经让传入了一个ID,这个ID就是获取对应模块的关键。

要注入的模块 === 模块仓库[模块ID];

JavaScript
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一个实现:

JavaScript
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的更多相关文章

  1. 原创:Javascript DI!Angular依赖注入的实现原理

    DI是Angular的特色功能,而在Angular 2.0的计划中,DI将成为一个独立的模块,参见 https://github.com/angular/di.js 这意味着它也有机会被用于nodej ...

  2. webpack优化之code splitting

    作为当前风头正盛的打包工具,webpack风靡前端界.确实作为引领了一个时代的打包工具,很多方面都带来了颠覆性的改进,让我们更加的感受到自动化的快感.不过最为大家诟病的一点就是用起来太难了. 要想愉快 ...

  3. Decorator - 利用装饰器武装前端代码

    历史 以前做后端时,接触过一点Spring,也是第一次了解DI.IOC等概念,面向切面编程,对于面向对象编程还不怎么熟练的情况下,整个人慌的一批,它的日志记录.数据库配置等都非常方便,不回侵入到业务代 ...

  4. Atitit js中的依赖注入di ioc的实现

    Atitit js中的依赖注入di ioc的实现 全类名(FQCN)为标识符1 混合请求模式1 使用类内  builder  即可..2 Service locator method走ok拦2 Jav ...

  5. 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 的目的是 ...

  6. 分享一个html+js+ashx+easyui+ado.net权限管理系统

    EasyUI.权限管理 这是个都快被搞烂了的组合,但是easyui的确好用,权限管理在项目中的确实用.一直以来博客园里也不少朋友分享过,但是感觉好的要不没源码,要不就是过度设计写的太复杂看不懂,也懒得 ...

  7. 【干货】JS版汉字与拼音互转终极方案,附简单的JS拼音输入法

    前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...

  8. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  9. Vue.js学习笔记(8)拖放

    小颖在目前负责的项目中,负责给同事提供所需组件,在这期间,我们家大颖姐姐让我 写个拖拽组件,一开始我是用click实现,先将你要拖拽的dom点一下,然后再点你要放的位置,这个dom再通过小颖写的方法, ...

随机推荐

  1. OCCI处理CHAR类型字符串变量的不同

    问题背景: 一个旧应用,原先应用是用proc写的,9i的库,如今应用须要改为使用OCCI,当中有一段查询逻辑:select ... where upper(state)=upper(:1). (此处请 ...

  2. Qt 学习之路:输入元素

    前面的章节中,我们看到了作为输入元素的MouseArea,用于接收鼠标的输入.下面,我们再来介绍关于键盘输入的两个元素:TextInput和TextEdit. TextInput是单行的文本输入框,支 ...

  3. 查看pid

    可以使用ps -ef | grep httpd查看PID 然后kill –l PID

  4. java中for循环的6种写法

    有些写法上的说明写的过于武断,可能有很多不当之处,仅供参考.   package ForLoop; import java.util.ArrayList; import java.util.Itera ...

  5. ssh连接超时问题解决方案

    方法一: 1.设置服务器向SSH客户端连接会话发送频率和时间 #vi /etc/ssh/sshd_config,添加如下两行ClientAliveInterval 60ClientAliveCount ...

  6. Java中Date各种相关用法

    Java中Date各种相关用法(一) 1.计算某一月份的最大天数 Java代码 Calendar time=Calendar.getInstance(); time.clear(); time.set ...

  7. 10.27 noip模拟试题

    1.铺瓷砖(tile.cpp/c/pas)[问题描述]有一面很长很长的墙. 你需要在这面墙上贴上两行瓷砖. 你的手头有两种不同尺寸的瓷砖,你希望用这两种瓷砖各贴一行.瓷砖的长可以用分数表示,贴在第一行 ...

  8. lucene 抛出的异常(分享)

    1) too many boolean clauses异常 例如: String keyword=".......";//(keyword的长度太长) Query indexQue ...

  9. cocos2dx Hello world 创建

    环境搭建好后,就要开始创建自己的第一个hello world项目了 因为没有安装其他的插件,所以最开始只能手动创建 首先通过cmd 进入你的cocos2dx的路径下: D:\soft\cocos2d- ...

  10. Android开发手记(28) Handler和Looper

    Android的消息处理有三个核心类:Looper,Handler和Message.其实还有一个Message Queue(消息队列),但是MQ被封装到Looper里面了,我们不会直接与MQ打交道.平 ...