深入理解Javascript里的依赖注入


Posted in Javascript onMarch 19, 2014

迟早你需要用到其他开发人员的抽象成果——即你依靠别人的代码。我喜欢依赖自由(无依赖)的模块,但那是难以实现的。甚至你创建的那些漂亮的黑盒子组件也或多或少会依赖一些东西。这正是依赖注入大显身手的之处。现在有效地管理依赖的能力是绝对必要的。本文总结了我对问题探索和一些的解决方案。

一、目标
设想我们有两个模块。第一个是负责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 方法散落在我们的代码中。如果我们需要更改依赖条件,我们不可能更改所有调用函数的文件。

我们需要一个能帮我们搞定这些的工具。这就是依赖注入尝试解决的问题。让我们写下一些我们的依赖注入解决办法应该达到的目标:

我们应该能够注册依赖关系
1.注入应该接受一个函数,并返回一个我们需要的函数
2.我们不能写太多东西——我们需要精简漂亮的语法
3.注入应该保持被传递函数的作用域
4.被传递的函数应该能够接受自定义参数,而不仅仅是依赖描述
5.堪称完美的清单,下面 让我们实现它。
三、RequireJS / AMD的方法
你可能对RequireJS早有耳闻,它是解决依赖注入不错的选择。

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

这种想法是先描述需要的依赖,然后再写你的函数。这里参数的顺序很重要。如上所说,让我们写一个叫做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)));
    }        
}

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

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

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

通过此方法返回的字符串给我们遍历参数的能力,更重要的是,能够获取他们的名字。这其实是Angular 实现它的依赖注入的方法。我偷了一点懒,直接截取Angular代码中获取参数的正则表达式。
/^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());

我们循环遍历dependencies数组,如果发现缺失项则尝试从arguments对象中获取。谢天谢地,当数组为空时,shift方法只是返回undefined,而不是抛出一个错误(这得益于web的思想)。新版的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");

不必重写依赖并且他们的顺序可以打乱。它仍然有效,我们成功复制了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(/^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访客接受两或三个参数,如果有两个参数它实际上和文章前面写的一样。然而,如果有三个参数,它会将第一个参数转换并填充deps数组,下面是一个测试例子:
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”参数(占位符)。这显示了我们是如何控制参数顺序的。

五、直接注入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) {
    expect(this.service().name).to.be('Service');
    expect(this.router().name).to.be('Router');
    expect(other).to.be('Other');
});
doSomething("Other");

六、结束语
其实我们大部分人都用过依赖注入,只是我们没有意识到。即使你不知道这个术语,你可能在你的代码里用到它百万次了。希望这篇文章能加深你对它的了解。
Javascript 相关文章推荐
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
清除输入框内的空格
Dec 21 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
js判断字符长度及中英文数字等
Mar 19 #Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 #Javascript
写出高效jquery代码的19条指南
Mar 19 #Javascript
JavaScript调试技巧之console.log()详解
Mar 19 #Javascript
js用闭包遍历树状数组的方法
Mar 19 #Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 #Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 #Javascript
You might like
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
Python中的localtime()方法使用详解
2015/05/22 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
通过实例解析Python调用json模块
2019/12/11 Python
Django 限制访问频率的思路详解
2019/12/24 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
深入了解Python enumerate和zip
2020/07/16 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
毕业自我评价范文
2013/11/17 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
大班亲子运动会方案
2014/06/10 职场文书
小学科学课教学反思
2016/02/23 职场文书
利用python做表格数据处理
2021/04/13 Python
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python