依赖注入的JavaScript

Question

我一直在玩弄依赖注入javscript但有一些问题，我需要与

一个简单的例子帮助是对话模块我有，在多个地方使用的页面上提醒一与自定义消息用户，当用户的页

function Dialog() { 

} 

Dialog.prototype.show = function() { 

} 

上与部件相互作用并且这可以在组件中使用，说这验证用户搜索的搜索控制，并且如果其空它触发一个错误对话框。依赖注入我假设我会写：

function searchComponent (dialog) { 
    this.dialog = dialog 
} 

searchComponent.prototype.validateSearch = function() { 
    // validate search if invalid create error 
    this.dialog.show(); 
} 

var searchDialog = new Dialog(); 
var search = new searchComponent(searchDialog); 

但是用户可能不需要搜索错误对话框，但我创造它的一个实例只是这样我就可以再通过传递依赖，如果什么我在页面上有100个单独的对话实例，我构建了这100次，这在性能上是不必要的和昂贵的。

什么，我宁愿做的是延迟加载对话框的建设，在需要时

searchComponent.prototype.validateSearch = function() { 
    //validate search if invalid create error 
    var dialog = new Dialog(); 
    dialog.show(); 
} 

现在我知道，这将创建缺点，其中之一是影响其对单元测试时间，我渴望了解的是我是否错过了某些东西或其他方法？

预先感谢

Answer 1

JavaScript函数是第一类对象。相反，通过在构建对话框，通过在对话框的构造函数：

var search = new SearchComponent(Dialog); 

然后新的它，当你需要它：

function SearchComponent(Dialog) { 
    this.Dialog = Dialog; 
} 

SearchComponent.prototype.validateSearch = function() { 
    var dialog = new this.Dialog(); 
    dialog.show(); 
} 

Answer 2

为了延长@ChrisTavares'伟大的解决方案，你可以使用的东西这样使Dialog里面可能依赖注入，以及：

var foo = function() { return new Foo() }; // just an example 
var search = new SearchComponent(function() { 
    return new Dialog(foo()); 
}); 

内，您的SearchComponent：

function SearchComponent(Dialog) { 
    this.Dialog = Dialog; 
} 

SearchComponent.prototype.validateSearch = function() { 
    var dialog = new this.Dialog(); 
    dialog.show(); 
}; 

Answer 3

通过前面的例子启发，我创建了一个简单的jsFiddle利用一个小型图书馆称为Syringe.js为了展示如何依赖关系可以通过结合前期的SearchComponent构造注入。

当创建一个SearchComponent对象时，将自动设置validator依赖项（一个单独的组件，此处取代实际的对话框）。该依赖关系随后被validateSearch方法使用。

这样做的好处是，当您创建每个对象实例时，您无需掌握任何依赖关系。

此外，可以在创建SearchComponent对象后修改validator依赖关系，并且可以相应地更新从属控件的行为。

Answer 4

我最近写了一个名为infect.js的依赖注入库。检查出来，可能只是你要找的。 https://github.com/amwmedia/infect.js