深入理解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 相关文章推荐
Extjs学习笔记之七 布局
Jan 08 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
原生js的数组除重复简单实例
May 24 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
ES6解构赋值实例详解
Oct 31 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
浅析JavaScript 函数柯里化
Sep 08 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
Django CBV类的用法详解
2019/07/26 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
充分就业社区汇报材料
2014/05/07 职场文书
租房协议书范例
2014/10/14 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
工程部经理岗位职责
2015/02/02 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
2019同学聚会主持词
2019/05/06 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
详解nginx进程锁的实现
2021/06/14 Servers