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 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
javascript模仿msgbox提示效果代码
Jun 10 Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 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读取RSS feed的代码
2008/08/01 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
js注意img图片的onerror事件的分析
2011/01/01 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Python求出0~100以内的所有素数
2018/01/23 Python
python实现简单神经网络算法
2018/03/10 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
个人存款证明书
2014/10/18 职场文书
毕业论文致谢词
2015/05/14 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
行政处罚决定书
2015/06/24 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang