详细解析JavaScript中依赖注入示例代码
- 黄舟原创
- 2017-03-14 15:18:541425浏览
计算机编程的世界其实就是一个将简单的部分不断抽象，并将这些抽象组织起来的过程。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();
};在这里，为了让我们的代码变得有趣一些，这个参数需要多接收几个参数。当然，我们完全可以使用上面的代码，但是无论从哪个方面来看上面的代码都略显得不那么灵活。要是我们需要使用的模块名称变为Service<a href="http://www.php.cn/wiki/1527.html" target="_blank">XML</a>或者Service<a href="http://www.php.cn/wiki/1488.html" target="_blank">JSON</a>该怎么办？或者说如果我们基于测试的目的想要去使用一些假的模块改怎么办。这时，我们不能仅仅去编辑函数本身。因此我们需要做的第一件事情就是将依赖的模块作为参数传递给函数，代码如下所示：
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.to<a href="http://www.php.cn/wiki/57.html" target="_blank">String</a>()方法，你可以获得下面的字符串:
"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中依赖注入的方法，希望本文能够帮助你开始使用依赖注入这个技巧，并且写出依赖注入风格的代码。
以上是详细解析JavaScript中依赖注入示例代码的详细内容。更多信息请关注PHP中文网其他相关文章！