理解JavaScript中的依赖注入
发布在每天学点javascript2015年1月27日view:26819ErickcepDuscawoeeznAngularjsJavaScript
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

enter image description here

理解JavaScript中的依赖注入

计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程。JavaScript也不例外,在我们使用JavaScript编写应用时,我们是不是都会使用到别人编写的代码,例如一些著名的开源库或者框架。随着我们项目的增长,我们需要依赖的模块变得越来越多,这个时候,如何有效的组织这些模块就成了一个非常重要的问题。依赖注入解决的正是如何有效组织代码依赖模块的问题。你可能在一些框架或者库种听说过“依赖注入”这个词,比如说著名的前端框架AngularJS,依赖注入就是其中一个非常重要的特性。但是,依赖注入根本就不是什么新鲜玩意,它在其他的编程语言例如PHP中已经存在已久。同时,依赖注入也没有想象种那样复杂。在本文中,我们将一起来学习JavaScript中的依赖注入的概念,深入浅出的讲解如何编写“依赖注入风格”的代码。

目标设定

假设我们现在拥有两个模块。第一个模块的作用是发送Ajax请求,而第二个模块的作用则是用作路由。

var service = function() {
    return { name: 'Service' };
}
var router = function() {
    return { name: 'Router' };
}

这时,我们编写了一个函数,它需要使用上面提到的两个模块:

var doSomething = function(other) {
    var s = service();
    var r = router();
};

在这里,为了让我们的代码变得有趣一些,这个参数需要多接收几个参数。当然,我们完全可以使用上面的代码,但是无论从哪个方面来看上面的代码都略显得不那么灵活。要是我们需要使用的模块名称变为ServiceXML或者ServiceJSON该怎么办?或者说如果我们基于测试的目的想要去使用一些假的模块改怎么办。这时,我们不能仅仅去编辑函数本身。因此我们需要做的第一件事情就是将依赖的模块作为参数传递给函数,代码如下所示:

var doSomething = function(service, router, other) {
    var s = service();
    var r = router();
};

在上面的代码中,我们完全传递了我们所需要的模块。但是这又带来了一个新的问题。假设我们在代码的哥哥部分都调用了doSomething方法。这时,如果我们需要第三个依赖项该怎么办。这个时候,去编辑所有的函数调用代码并不是一个明智的方法。因此,我们需要一段代码来帮助我们做这件事情。这就是依赖注入器试图去解决的问题。现在我们可以来定下我们的目标了:

  • 我们应该能够去注册依赖项
  • 依赖注入器应该接收一个函数,然后返回一个能够获取所需资源的函数
  • 代码不应该复杂,而应该简单友好
  • 依赖注入器应该保持传递的函数作用域
  • 传递的函数应该能够接收自定义的参数,而不仅仅是被描述的依赖项

requirejs/AMD方法

或许你已经听说过了大名鼎鼎的requirejs,它是一个能够很好的解决依赖注入问题的库:

define(['service', 'router'], function(service, router) {       
    // ...
});

requirejs的思想是首先我们应该去描述所需要的模块,然后编写你自己的函数。其中,参数的顺序很重要。假设我们需要编写一个叫做injector的模块,它能够实现类似的语法。

var doSomething = injector.resolve(['service', 'router'], function(service, router, other) {
    expect(service().name).to.be('Service');
    expect(router().name).to.be('Router');
    expect(other).to.be('Other');
});
doSomething("Other");

在继续往下之前,需要说明的一点是在doSomething的函数体中我们使用了expect.js这个断言库来确保代码的正确性。这里有一点类似TDD(测试驱动开发)的思想。

现在我们正式开始编写我们的injector模块。首先它应该是一个单体,以便它能够在我们应用的各个部分都拥有同样的功能。

var injector = {
    dependencies: {},
    register: function(key, value) {
        this.dependencies[key] = value;
    },
    resolve: function(deps, func, scope) {

    }
}

这个对象非常的简单,其中只包含两个函数以及一个用于存储目的的变量。我们需要做的事情是检查deps数组,然后在dependencies变量种寻找答案。剩余的部分,则是使用.apply方法去调用我们传递的func变量:

resolve: function(deps, func, scope) {
    var args = [];
    for(var i=0; i<deps.length, d=deps[i]; i++) {
        if(this.dependencies[d]) {
            args.push(this.dependencies[d]);
        } else {
            throw new Error('Can\'t resolve ' + d);
        }
    }
    return function() {
        func.apply(scope || {}, args.concat(Array.prototype.slice.call(arguments, 0)));
    }        
}

如果你需要指定一个作用域,上面的代码也能够正常的运行。

在上面的代码中,Array.prototype.slice.call(arguments, 0)的作用是将arguments变量转换为一个真正的数组。到目前为止,我们的代码可以完美的通过测试。但是这里的问题是我们必须要将需要的模块写两次,而且不能够随意排列顺序。额外的参数总是排在所有的依赖项之后。

反射(reflection)方法

根据维基百科中的解释,反射(reflection)指的是程序可以在运行过程中,一个对象可以修改自己的结构和行为。在JavaScript中,简单来说就是阅读一个对象的源码并且分析源码的能力。还是回到我们的doSomething方法,如果你调用doSomething.toString()方法,你可以获得下面的字符串:

"function (service, router, other) {
    var s = service();
    var r = router();
}"

这样一来,只要使用这个方法,我们就可以轻松的获取到我们想要的参数,以及更重要的一点就是他们的名字。这也是AngularJS实现依赖注入所使用的方法。在AngularJS的代码中,我们可以看到下面的正则表达式:

/^function\s*[^\(]*\(\s*([^\)]*)\)/m

我们可以将resolve方法修改成如下所示的代码:

resolve: function() {
    var func, deps, scope, args = [], self = this;
    func = arguments[0];
    deps = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1].replace(/ /g, '').split(',');
    scope = arguments[1] || {};
    return function() {
        var a = Array.prototype.slice.call(arguments, 0);
        for(var i=0; i<deps.length; i++) {
            var d = deps[i];
            args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());
        }
        func.apply(scope || {}, args);
    }        
}

我们使用上面的正则表达式去匹配我们定义的函数,我们可以获取到下面的结果:

["function (service, router, other)", "service, router, other"]

此时,我们只需要第二项。但是一旦我们去除了多余的空格并以,来切分字符串以后,我们就得到了deps数组。下面的代码就是我们进行修改的部分:

var a = Array.prototype.slice.call(arguments, 0);
...
args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());

在上面的代码中,我们遍历了依赖项目,如果其中有缺失的项目,如果依赖项目中有缺失的部分,我们就从arguments对象中获取。如果一个数组是空数组,那么使用shift方法将只会返回undefined,而不会抛出一个错误。到目前为止,新版本的injector看起来如下所示:

var doSomething = injector.resolve(function(service, other, router) {
    expect(service().name).to.be('Service');
    expect(router().name).to.be('Router');
    expect(other).to.be('Other');
});
doSomething("Other");

在上面的代码中,我们可以随意混淆依赖项的顺序。

但是,没有什么是完美的。反射方法的依赖注入存在一个非常严重的问题。当代码简化时,会发生错误。这是因为在代码简化的过程中,参数的名称发生了变化,这将导致依赖项无法解析。例如:

var doSomething=function(e,t,n){var r=e();var i=t()}

因此我们需要下面的解决方案,就像AngularJS中那样:

var doSomething = injector.resolve(['service', 'router', function(service, router) {

}]);

这和最一开始看到的AMD的解决方案很类似,于是我们可以将上面两种方法整合起来,最终代码如下所示:

var injector = {
    dependencies: {},
    register: function(key, value) {
        this.dependencies[key] = value;
    },
    resolve: function() {
        var func, deps, scope, args = [], self = this;
        if(typeof arguments[0] === 'string') {
            func = arguments[1];
            deps = arguments[0].replace(/ /g, '').split(',');
            scope = arguments[2] || {};
        } else {
            func = arguments[0];
            deps = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1].replace(/ /g, '').split(',');
            scope = arguments[1] || {};
        }
        return function() {
            var a = Array.prototype.slice.call(arguments, 0);
            for(var i=0; i<deps.length; i++) {
                var d = deps[i];
                args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());
            }
            func.apply(scope || {}, args);
        }        
    }
}

这一个版本的resolve方法可以接受两个或者三个参数。下面是一段测试代码:

var doSomething = injector.resolve('router,,service', function(a, b, c) {
    expect(a().name).to.be('Router');
    expect(b).to.be('Other');
    expect(c().name).to.be('Service');
});
doSomething("Other");

你可能注意到了两个逗号之间什么都没有,这并不是错误。这个空缺是留给Other这个参数的。这就是我们控制参数顺序的方法。

结语

在上面的内容中,我们介绍了几种JavaScript中依赖注入的方法,希望本文能够帮助你开始使用依赖注入这个技巧,并且写出依赖注入风格的代码。

==================== 本文参考自Dependency injection in JavaScript,原文地址http://krasimirtsonev.com/blog/article/Dependency-injection-in-JavaScript

评论
发表评论
1个月前
添加了一枚【评注】:这个写提示的很有趣哦
3个月前
添加了一枚【评注】:nuisance
5个月前
添加了一枚【评注】:d在这里
7个月前
添加了一枚【评注】:依赖注入
8个月前
赞了此文章!
9个月前
添加了一枚【评注】:函数?
9个月前
添加了一枚【评注】:函数?
9个月前

顶!!!! WEB前端培训 先就业后付款,真正的按效果付费 对贷款说:NO 赞了此文章! 培训毕业考核通过后4个月内,找到第一份工作,按前三个月工资之和100%支付。 官网:http://www.xhanglu.com/

10个月前
添加了一枚【评注】:单体?单例?
10个月前
赞了此文章!
10个月前
赞了此文章!
11个月前
添加了一枚【评注】:应该是 中
11个月前
添加了一枚【评注】:没有必要写【完全】啊
11个月前
添加了一枚【评注】:该
11个月前
添加了一枚【评注】:1111
11个月前
添加了一枚【评注】:1111
1年前
赞了此文章!
1年前
赞了此文章!
1年前
赞了此文章!
1年前
赞了此文章!
1年前
赞了此文章!
1年前
赞了此文章!
1年前
赞了此文章!
1年前
赞了此文章!
1年前
赞了此文章!
1年前
添加了一枚【评注】:这里什么意思?
1年前
赞了此文章!
1年前
添加了一枚【评注】:不行
1年前
添加了一枚【评注】:哈哈 还以为什么哥哥部分
1年前
添加了一枚【评注】:为什么那么一张大图在这里 。。。。
1年前
赞了此文章!
1年前
赞了此文章!
1年前
赞了此文章!
1年前
添加了一枚【评注】:这里的arguments是?
1年前
添加了一枚【评注】:这里是各个吧
2年前

不错

2年前
添加了一枚【评注】:代码的哥哥是什么意思?
2年前
添加了一枚【评注】:恩
2年前
赞了此文章!
2年前
添加了一枚【评注】:这个地方d是不是一个全局变量了?
2年前
添加了一枚【评注】:各个
2年前
赞了此文章!
2年前
赞了此文章!
2年前
赞了此文章!
2年前
添加了一枚【评注】:哥哥
2年前
赞了此文章!
2年前
赞了此文章!
2年前
赞了此文章!
2年前
赞了此文章!
2年前
添加了一枚【评注】:而且push进去的会是a 而不是d
2年前
添加了一枚【评注】:这个地方感觉有些问题, 如果你的dependencies是a,b,c 而arguments传进来的是a,d,b,c 遇到dependencies里面没有d时,直接a.shift()的话,push进args的也是名称而已吧? 可能是我理解错了 希望能够解答下
2年前
赞了此文章!
2年前
赞了此文章!
2年前
赞了此文章!
2年前

requirejs/AMD 其实不是依赖注入,是实现了 service locator 模式,它使用的时候依赖于 locator 也即 define 才行,依赖注入往往只是通过配置进行描述,然后由依赖注入容器进行自动注入,完成控制的反转(IoC)

angularjs 和 bearcat 实现了依赖注入

var Car = function() {
    this.$id = "car";
    this.$engine = null;
}

Car.prototype.run = function() { 
    this.$engine.run(); 
    console.log('run car...');
}

bearcat.module(Car, typeof module !== 'undefined' ? module : {});

car 就注入了 engine,不需要依赖于 define 或者 require

WRITTEN BY
张小俊128
Intern in Baidu mobile search department。认真工作,努力钻研,期待未来更多可能。
TA的新浪微博
PUBLISHED IN
每天学点javascript

javascript进阶级教程,循序渐进掌握javascript

我的收藏