javascript - JavaScript 中的依赖注入(inject)

Question

我一直在尝试使用 javscript 进行依赖注入(inject)，但有一些问题需要帮助

一个简单的例子是我有一个对话框模块，在页面的多个地方使用，当用户与页面上的组件交互时，它会用自定义消息提醒用户

function Dialog () {

}

Dialog.prototype.show = function () {

}

这可以用在一个组件中，比如一个搜索控件，它验证用户搜索，如果它是空的，它会触发一个错误对话框。对于依赖注入(inject)，我假设我会写:

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