依賴注入的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