javascript - 在模块中重新声明变量还是引用单独的模块更好？

Question

好吧，假设我有一个在“显示模块模式”中设置的网络应用程序(Javascript)，并且我有两个使用完全相同数据的模块。

示例:

(让我们假设这两个函数位于不同的模块中是有原因的。毕竟这只是一个示例)

var modOne = (function () {
  var foos = document.getElementsByClassName("foo");

  var hideFoos function () {
    var i;
    for (i=0; i < foos.length ; i++) {
      foos[i].style.visibility = "hidden";
    }
  }

  return {
    hideFoos: hideFoos
  };
})();

var modTwo = (function () {
  var foos = document.getElementsByClassName("foo");

  var showFoos function () {
    var i;
    for (i=0; i < foos.length ; i++) {
      foos[i].style.visibility = "visible";
    }
  }

  return {
    showFoos: showFoos
  };
})();

正如您所看到的，每个模块中都声明了相同的变量(var foos)。这似乎是多余的，但在另一个变量中引用该变量会使一个模块依赖于另一个模块。所以你不妨将它们结合起来。我看到的第三个选项是将共享变量创建为全局变量，这有点违背了拥有模块的目的。

因此，基于这三个选项，我认为在每个模块中单独定义变量将是最好的选择。

这是正确的吗？

Answer 1

这里没有一刀切的答案。所有方法都有好处。

在您的特定示例中，似乎 modOne 和 modTwo 都使用 DOM 元素执行一些操作(具有显示/隐藏子节点的方法)。这两个模块都与它们所处理的 DOM 元素密切相关，这意味着您无法重用该模块来处理其他元素。当您这样思考时，很明显，它们作用的元素(模块作用的数据)应该由外部源提供，因此拥有一个传递给每个模块的全局变量似乎更好。更好的可能是一个可以传递模块所需数据的数据服务模块。

继续沿着这条路，您可以看到一个简单的显示/隐藏器如何变成一个巨大的多层架构，如果不彻底了解整个系统，就无法解决这个复杂的问题。

考虑到这一点，答案是您应该采取任何使您的代码更清晰的方式。复杂的应用需要复杂的解决方案，简单的应用应该得到简单的解决方案。