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();
}