Javascript依赖注入

superlin • April 11, 2015 • No Comments

12bet,上一篇我们讲了Angular最为突出的特效-双向数据绑定，这一片主要来说一说依赖注入（Dependency Injection）。依赖出入并不是某种语言特有的，很多语言都会使用这种模式，例如：Java的Spring框架。计算机编程的世界其实就是一个将简单的部分不断抽象，12博体育,并将这些抽象组织起来的过程，我们使用JavaScript编写应用时，我们是不是都会使用到别人编写的代码，例如一些著名的开源库或者框架。随着我们项目的增长，我们需要依赖的模块变得越来越多，这个时候，如何有效的组织这些模块就成了一个非常重要的问题。12博体育,依赖注入解决的正是如何有效组织代码依赖模块的问题。接下来我们一起来看看如何实现依赖注入吧。

注意：不要将依赖注入和设计模式里的依赖倒置原则（Dependency Inversion Principle）混淆。

目标

设想我们有两个模块。第一个是负责Ajax请求服务（service），第二个是路由（router）。

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) {  
    // ...
});

12bet,这种想法是先描述需要的依赖，然后再写你的函数。这里参数的顺序很重要。如上所说，让我们写一个叫做injector的模块，能接受相同的语法。

var doSomething = injector.resolve(['service', 'router'], function(service, router, other) {  
    console.log(service().name); //Service
    console.log(router().name);  //Router
    console.log(other().name);   //Other
});
doSomething(other);

下面开始我们的injector模块，这是非常棒的一个单例模式，所以它能在我们程序的不同部分工作的很好。

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

12bet,这是一个非常简单的对象，有两个方法，一个用来存储的属性。我们要做的是检查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)));
    }        
}

scope是可选的，Array.prototype.slice.call(arguments, 0)是必须的，用来将arguments变量转换为真正的数组。到目前为止还不错。我们的测试通过了。这种实现的问题是，我们需要写所需部件两次，并且我们不能混淆他们的顺序。附加的自定义参数总是位于依赖之后。

反射方法

根12bet,据维基百科的定义反射是指一个程序在运行时检查和修改一个对象的结构和行为的能力。简单的说，在JavaScript的上下文里，这具体指读取和分析的对象或函数的源代码。让我们完成文章开头提到的doSomething函数。如果你在控制台输出doSomething.tostring()的日志。你将得到如下的字符串：

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

通过此方法返回的字符串给我们遍历参数的能力，更重要的是，能够获取他们的名字。这其实是Angular 实现它的依赖注入的方法。我偷了一点懒，直接截取Angular代码中获取参数的正则表达式。

/^functions*[^(]*(s*([^)]*))/m

我们可以像下面这样修改resolve 的代码：

resolve: function() {  
    var func, deps, scope, args = [], self = this;
    func = arguments[0];
    deps = func.toString().match(/^functions*[^(]*(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());

我们循环遍历dependencies数组，如果发现缺失项则尝试从arguments对象中获取。谢天谢地，当数组为空时，shift方法只是返回undefined，而不是抛出一个错误（这得益于web的思想）。新版的injector能像下面这样使用：

var doSomething = injector.resolve(function(service, other, router) {  
    console.log(service().name); //Service
    console.log(router().name);  //Router
    console.log(other().name);   //Other
});
doSomething(other);

不必重写依赖并且他们的顺序可以打乱。它仍然有效，我们成功复制了Angular的魔法。

然而，这种做法并不完美，这就是反射类型注射一个非常大的问题。压缩会破坏我们的逻辑，因为它改变参数的名字，我们将无法保持正确的映射关系。例如，doSometing()压缩后可能看起来像这样：

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

Angular团队提出的解决方案看起来像：

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

这看起来很像我们开始时的解决方案。我没能找到一个更好的解决方案，所以决定结合这两种方法。下面是injector的最终版本。

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(/^functions*[^(]*(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访客接受两或三个参数，如果有两个参数它实际上和文章前面写的一样。然而，如果有三个参数，它会将第一个参数转换并填充deps数组，下面是一个测试例子：

var doSomething = injector.resolve('router,,service', function(a, b, c) {  
    console.log(a().name); //Service
    console.log(c().name); //Router
    console.log(b().name); //Other
});
doSomething(other);

你可能注意到在第一个参数后面有两个逗号——注意这不是笔误。空值实际上代表other参数（占位符）。这显示了我们是如何控制参数顺序的。

直接注入Scope

有时我会用到第三个注入变量，它涉及到操作函数的作用域（换句话说，就是this对象）。所以，很多时候不需要使用这个变量。

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

我们所做的一切其实就是将依赖添加到作用域。这样做的好处是，开发人员不用再写依赖性参数；它们已经是函数作用域的一部分。

var doSomething = injector.resolve(['service', 'router'], function(other) {  
    console.log(this.service().name); //Service
    console.log(this.router().name);  //Router
    console.log(other().name);        //Other
});
doSomething(other);

示例

为了方便演示，我给出的例子都是直接将内容输出到页面中，而不是通过控制台输出。

See the Pen 依赖注入demo by superlin (@superlin) on CodePen.

参考

Author image
关于 superlin
Beijing, CN 主页
The reason why a great man is great is that he resolves to be a great man.
默认颜色 边栏居左 边栏居右
Copyright © 2020, 12bet   网站地图   12博bet   12博娱乐 . All Right Reserved