Dependency Injection в JavaScript

Question

Я играл с Dependency Injection с 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 может быть изменена после создания объектов SearchComponent, и поведение зависимого элемента управления может быть соответствующим образом обновлено.

Answer 4

Недавно я написал библиотеку инъекций зависимости, называемую infect.js.Проверьте это, возможно, просто то, что вы ищете. https://github.com/amwmedia/infect.js