JavaScript中的依赖注入详解


Posted in Javascript onMarch 18, 2015

计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程。JavaScript也不例外,在我们使用JavaScript编写应用时,我们是不是都会使用到别人编写的代码,例如一些著名的开源库或者框架。随着我们项目的增长,我们需要依赖的模块变得越来越多,这个时候,如何有效的组织这些模块就成了一个非常重要的问题。依赖注入解决的正是如何有效组织代码依赖模块的问题。你可能在一些框架或者库种听说过“依赖注入”这个词,比如说著名的前端框架AngularJS,依赖注入就是其中一个非常重要的特性。但是,依赖注入根本就不是什么新鲜玩意,它在其他的编程语言例如PHP中已经存在已久。同时,依赖注入也没有想象种那样复杂。在本文中,我们将一起来学习JavaScript中的依赖注入的概念,深入浅出的讲解如何编写“依赖注入风格”的代码。

JavaScript中的依赖注入详解

目标设定

假设我们现在拥有两个模块。第一个模块的作用是发送Ajax请求,而第二个模块的作用则是用作路由。

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) {       

    // ...

});

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.toString()方法,你可以获得下面的字符串:

"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 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
详解angular 中的自定义指令之详解API
Jun 20 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
使用refresh_token实现无感刷新页面
Apr 26 Javascript
TypeScript 内置高级类型编程示例
Sep 23 Javascript
使用js实现的简单拖拽效果
Mar 18 #Javascript
使用纯javascript实现放大镜效果
Mar 18 #Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 #Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 #Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 #Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 #Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 #Javascript
You might like
用PHP调用Oracle存储过程
2006/10/09 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Python并行分布式框架Celery详解
2018/10/15 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
Python通过Pillow实现图片对比
2020/04/29 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
销售业务员岗位职责
2014/01/29 职场文书
正科级干部考察材料
2014/05/29 职场文书
给客户的感谢信
2015/01/21 职场文书
超市督导岗位职责
2015/04/10 职场文书
2019秋季运动会口号
2019/06/25 职场文书
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript