js 实现 di

前些时候有使用过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：重写原函数