当前位置:首页 > 日记 > 正文

Javascript中依赖注入的详细解决方案

Javascript中依赖注入的详细解决方案
计算机编程的世界其实是一个过程,提炼出简单的零件和组织这些abstractions.javascript也不例外。当我们用Javascript编写应用程序时,我们是否都使用其他人编写的代码,比如一些著名的开源库或框架,随着我们项目的发展,我们需要依赖越来越多的模块。此时,如何有效地组织这些模块成为一个非常重要的问题,如何有效地组织代码依赖模块就成为了如何依赖注入的问题,您可能已经听说过在某些框架或库中进行依赖注入。例如,著名的前端框架AngularJS,依赖注入是一个最重要的特征。然而,依赖注入是不是一个新事物;它已经存在于其他编程语言如PHP很长时间。同时,依赖注入是没有想象的复杂。在这的文章中,我们将一起在Javascript学习依赖注入的概念以及如何以简单的方式写依赖注入的代码风格。
目标的设定

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

复制代码代码如下所示:

var服务=函数(){()

返回{名称:服务};

}

var路由器=函数(){()

返回{名称:'router};

}
此时,我们已经编写了一个需要使用上面提到的两个模块的函数:

复制代码代码如下所示:

VaR做=功能(其他){

var =服务();

var =路由器();

};
在这里,为了使我们的代码更有趣,这个参数需要接受一些参数。当然,我们可以用上面的代码完全,但无论如何,上面的代码有点不太灵活。如果我们需要使用的模块的名称更改为servicexml或servicejson或者,如果我们想使用一些假模块来测试,我们怎么做在这一点上,我们不能仅仅编辑函数本身。所以我们首先需要做的是将依赖模块作为参数传递给函数,代码如下所示:

复制代码代码如下所示:

VaR做=功能(服务、路由器、其他){

var =服务();

var =路由器();

};
在上面的代码中,我们完全把我们需要的模块,但这带来了一个新的问题。假设我们叫的做法在代码部分兄弟。在这一点上,如果我们需要第三依赖我们要什么此时,编辑所有函数调用代码不是一种明智的方法,因此我们需要一段代码来帮助我们解决这个问题,这是为了解决依赖注射器的问题,现在我们可以设定目标了:

1。我们应该能够注册一个依赖项。

2。注入器应该接收一个依赖函数,然后返回一个函数来获取所需资源。

三.代码不应该是复杂的,但应该是简单而友好的。

4。依靠喷油器应保持功能域转移

5。传递函数应该能够接收自定义参数,而不仅仅是所描述的依赖项。

requirejs / AMD的方法

你可能听说过著名的requirejs,这是依赖注入的一个很好的解决问题:

复制代码代码如下所示:

定义({服务','router},功能(服务、路由器){



});
requirejs的想法是,首先我们应该描述你需要的,然后写下你自己的功能模块。其中,参数的顺序是很重要的。假设我们需要写一个模块称为喷油器,可以实现类似的语法。

复制代码代码如下所示:

VaR做= injector.resolve({服务','router},功能(服务、路由器、其他){

期望(服务()。名称)。To.be(服务的);

期望(路由器()。名称)。To.be('router);

期望(其他)To.be(其他的);

});

做(其他);
在继续之前,有一点要说明的是,我们使用的expect.js断言图书馆在做的函数体来保证代码的正确性。这里有点像TDD(测试驱动开发)的思想。

现在我们正式开始编写喷油器模块。首先,它应该是一个单一的机构,以便它可以在我们的应用程序的所有部分具有相同的功能。

复制代码代码如下所示:

VaR注射器= { {

依赖项:{ },

寄存器:函数(键,值){

这个依赖项{键} =值;

},

解决:功能(依赖、功能、范围){

}

}
这个目标是非常简单的,只包含两个功能和存储的目的变量。我们需要做的是检查该数组,然后寻找相依变量的答案。其余部分使用。使用的方法来调用函数的变量我们穿过:

复制代码代码如下所示:

解决:功能(依赖、功能、范围){

var args = { };

对于(var i = 0;i < deps.length,a DEPS {我};i++){

如果(这个依赖项{ }){

Args.push(这个依赖{d});

{人}

把新的错误(无法解决+ D);

}

}

返回函数(){

Func.apply(范围| | { },args.concat(array.prototype.slice.call(参数0)));

}

}
如果您需要指定一个范围,上面的代码可以正常运行。

在上面的代码中,Array.prototype.slice.call的角色(参数0)是将实参变量为实数数组。到目前为止,我们的代码可以较好的验证。但现在的问题是,我们要写的模块两次不能安排秩序。额外的参数总是在所有的依赖。

反射(反射)法

据维基百科解释反射(反射)是指程序可以运行在一个过程,一个对象可以修改它的结构和行为。在Javascript,那简直是读一个对象的源代码,对源代码的能力。还是回到我们的做法,如果你打电话给dosomething.tostring()方法,你可以得到以下字符串:

复制代码代码如下所示:

函数(服务,路由器,其他){

var =服务();

var =路由器();

}
这样,只要我们用这种方法,我们可以很容易地得到我们想要的参数,更重要的是,他们的名字,这也是用AngularJS实现依赖注入的方法。在AngularJS的代码,我们可以看到下面的正则表达式:

复制代码代码如下所示:

函数({ *({ })})
我们可以将解析方法修改成以下代码:

复制代码代码如下所示:

解析:函数(){

VAR函数,依赖,范围,args =自我=这{ };

参数= { 0 };

稀释每股收益= func.tostring(。比赛( / ^功能 * { ^ )(} * ( *({ ^ )}×),{ 1 }。取代( / / / G M)),分(),。');

参数范围= { 1 } | | { };

返回函数(){

创建一个array.prototype.slice.call(参数0);

对于(var i = 0;i < deps.length;i++){

var a DEPS {我};

Args.push(自我依赖{d} D!= '自我。依赖{d}:a.shift());

}

Func.apply(范围| | { },args);

}

}
我们使用上面的正则表达式来匹配我们定义的函数,我们可以得到如下结果:

复制代码代码如下所示:

函数(服务,路由器,其他)
在这一点上,我们只需要二项。但一旦我们摆脱多余的空间,用它来剪断绳子,我们得到该数组。下面的代码是我们修改的部分:

复制代码代码如下所示:

创建一个array.prototype.slice.call(参数0);



Args.push(自我依赖{d} D!= '自我。依赖{d}:a.shift());
在上面的代码中,我们遍历了依赖项项目。如果有缺失的项目,如果我们依赖于项目中缺少的部分,我们将从参数对象中获取它们。如果数组是空数组,那么移位方法只会返回到未定义的位置,不会抛出错误:

复制代码代码如下所示:

VaR做= injector.resolve(功能(服务,其他路由器){

期望(服务()。名称)。To.be(服务的);

期望(路由器()。名称)。To.be('router);

期望(其他)To.be(其他的);

});

做(其他);
在上面的代码中,我们可以随意地区分依赖项的顺序。

但是没有什么是完美的,在反射法的依赖注入中存在一个非常严重的问题,当代码被简化时就会出现错误,这是因为在代码简化的过程中,参数的名称发生变化,这将导致依赖关系不被解析:

复制代码代码如下所示:

VaR做=功能(E,T,N){ var r = E();var i = t()}
所以我们需要以下的解决方案,如在AngularJS:

复制代码代码如下所示:

VaR做= injector.resolve({服务','router功能(服务、路由器){

});
这与第一次看到的AMD解决方案类似,因此我们可以集成以上两种方法,最后的代码如下所示:

复制代码代码如下所示:

VaR注射器= { {

依赖项:{ },

寄存器:函数(键,值){

这个依赖项{键} =值;

},

解析:函数(){

VAR函数,依赖,范围,args =自我=这{ };

如果(typeof论点{ 0 } = 'String'){

参数= { 1 };

稀释每股收益=论点{ 0 }。取代( / /克,),Split(',');

参数范围= { 2 } | | { };

{人}

参数= { 0 };

DEPs = func.toString (.Match (/^functions*{^) (}* (s* ({^)}*), {1}.replace (/g / /m)),.Split (''), ');

参数范围= { 1 } | | { };

}

返回函数(){

创建一个array.prototype.slice.call(参数0);

对于(var i = 0;i < deps.length;i++){

var a DEPS {我};

Args.push(自我依赖{d} D!= '自我。依赖{d}:a.shift());

}

Func.apply(范围| | { },args);

}

}

}
这个版本的解析方法可以接受两个或三个参数:

复制代码代码如下所示:

VaR做= injector.resolve('router,服务,功能(A,B,C){

(一)期望(名称)To.be('router);

期望(B)To.be(其他的);

期望(C()。名称)。To.be(服务的);

});

做(其他);
您可能没有注意到两个逗号之间的关系,这不是错误。这个空缺留给另一个。这是我们控制参数顺序的方式。

后记

在上面的内容中,我们介绍了Javascript中几种依赖注入的方法。我希望本文可以帮助您开始使用依赖注入技术并编写依赖注入样式代码。

相关文章

PS图象处理软件很快就规定了在建筑

PS图象处理软件很快就规定了在建筑

边缘,凉爽,图象,建筑物,处理软件,结果是绿色和绿色,看起来很清爽。当你调颜色时,你只需要把图片中的黄绿色变成亮绿色。然后加入更多的浅蓝色的亮点,然后使皮肤色调的人物红润。 结果是绿色和绿色,看起来很清爽。当你混合颜色时,你只需要把黄绿…

用Javascript实时显示北京时间的方法

用Javascript实时显示北京时间的方法

实时,方法,显示,北京时间,电脑软件,本文介绍了用javascript实时显示北京时间的方法,供大家参考: 该页实时显示北京时间。更改时区也可以用作显示世界时间。代码如下: 复制代码代码如下所示: date.prototype.strftime =函数(格式){ var { { { { M +…

PHP获得从HTML表单传递数组的方式

PHP获得从HTML表单传递数组的方式

数组,表单,方式,电脑软件,PHP,本文演示了PHP从HTML表单获取数组的方式: 将表单的各个元素的名称设置为同一个数组对象,可以在数组中传递表单值。 html页面如下所示: 标签 的arrayformdata.php页面如下: postedtags美元=美元_post {标签}; …

PS快速打造360度角的汽车海报酷

PS快速打造360度角的汽车海报酷

海报,快速,电脑软件,PS,我昨天看到这样的海报。这是非常前卫的,我认为这不是PS作品,更可能是由3D软件完成的,因为它的光线、透视等都非常准确,而不是PS很容易实现。 我昨天看到这样的海报。这是非常前卫的,我认为这不是PS作品,更可能是由3D软件…

图表与数据应用详解WPS表课程

图表与数据应用详解WPS表课程

数据,图表,详解,课程,电脑软件,在Visio2007示例图是帮助你熟悉程序中的一些更高级的功能的一种好方法,如数据链接和透视图。 每个Visio2007示例图是专为特定的用途,如项目进度和销售信息,并且每个例子都有其在Excel 2007工作簿的样本数据,您可…

苹果超强的ps合成

苹果超强的ps合成

电脑软件,ps,本教程是向朋友介绍使用ps合成苹果景观融合的超级图像。教程合成的效果真的很好,难度也不是很大。初学者可以了解作者的思路。好,让我们一起学习。 本教程是向朋友们介绍如何使用PS来合成苹果景观融合的超级图像。这个教程很好。…

用Javascript实现滚动列效果的方法

用Javascript实现滚动列效果的方法

方法,效果,电脑软件,Javascript,本文介绍了实现滚动效果的Javascript的方法。分享给你供你参考。以下是如下: { * 保证金:0; 填充:0; } # DIV1 UL { 位置:绝对; 左:0px; 上图:0px; } # DIV1 UL Li img { 宽度:187px; 身高:125px; } # DIV1 ul { 浮点数:左; Width: …

jQuery显示了隐藏div和代码实例的

jQuery显示了隐藏div和代码实例的

代码实例,方法,显示,电脑软件,jQuery,1。如果负载是隐藏的: 复制代码代码如下所示: hideweekmonth()函数 { $(# TT1)藏(); $(# TT2)藏(); } 2。动态隐藏与显示: 复制代码代码如下所示: class=按钮/> class=按钮/> 一 二 03 04 $(# btnon…

什么函数是Excel的函数功能计算几

什么函数是Excel的函数功能计算几

函数,计算几何,平均数,功能,电脑软件,Excel的计算几何平均数函数返回正数数组或区域的几何平均。 计算几何平均数函数 语法 计算几何平均数(number1,number2,…) number1,number2,…可以用来计算1到30个参数的平均值,或者它不能用逗号分隔的形式参…

Excel通过交错工资表来排序excel基

Excel通过交错工资表来排序excel基

排序,基础,工资表,电脑软件,Excel,excel的排序有很多种方法。当我们对工资表进行排序时,我们通常使用交错的方式进行排序,所以看起来更清楚! 将普通排序转换成交错插入;(如在图中) 步骤1:添加两个辅助列,并按下图填充数字或文本。 第二步:选择F2到…

已经很长时间了,为什么我还没有收到

已经很长时间了,为什么我还没有收到

常见问题,我还,很长时间,电脑软件,QQ,已经很长时间了,为什么我还没有收到结果呢 如果您正在使用邮件来获取投诉进展: 请登录到您的邮箱并及时检查,经过处理后,我们会立即发送邮件。不同的邮件提供者可能有不同的邮件延迟。一些邮件提供商的反…

PHP的CRC32函数需要注意的问题(或坑

PHP的CRC32函数需要注意的问题(或坑

函数,需要注意,电脑软件,PHP,几天前,编写了一个子表程序。使用的哈希算法是CRC32的功能。子表如下: 复制代码代码如下所示: 功能_gethash($用户名) { $ hash = CRC32($用户名)% 512; 返回$哈希; } 功能_gettable($用户名) { 哈希=自我::_gethas…