JavaScript中的依赖注入详解(3)

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中依赖注入的方法，希望本文能够帮助你开始使用依赖注入这个技巧，并且写出依赖注入风格的代码。

您可能感兴趣的文章: