javascript - 如何对每个 JS 文件使用闭包，但仍然让文件相互交互。

Question

我知道使用闭包(IIFE)是最佳实践，因为它可以防止污染全局命名空间。但是，当我将闭包添加到文件中时，它阻止我的第二个文件 (controllers.js) 读取第一个文件 (models.js)。为了给您一个想法，它们如下所示:

models.js

;(function() {
  function searchResult (obj) {
    this.state = obj.State;
    /*Do more stuff */
  }

})();

controllers.js

;(function() {
 function storeSearchResults(jsonObj) {
   var instance = new searchResult(jsonObj.data[i]);
   /* Do more */
 }     
})();

现在我已经在它们上添加了闭包，我收到一个错误，指出searchResult在controllers.js中未定义——因为它看不到它存在于models.js中。我如何让它知道它存在于另一个文件中？

附注是的，models.js 添加在 HTML 文件中的controllers.js 文件之前。

Answer 1

为了让它们进行交互，它们必须有一些共同的符号。您有几个选择:

1. 自己动手(使用单个全局变量)

2. 使用某种可以为您完成此操作的库([理想情况下]仅使用单个全局符号)

3. 用不同的方式自己做，完全不需要全局通用符号

自己动手

DIY 版本通常是您的整个应用程序有一个单个全局变量，您的各个模块都向其中添加属性。

例如:

models.js:

;(function(globals) {
  var MyApp = globals.MyApp = globals.MyApp || {};
  MyApp.searchResult = searchResult;
  function searchResult (obj) {
    this.state = obj.State;
    /*Do more stuff */
  }

})(this);

这是有效的，因为在松散模式下，this在全局范围内是全局对象(在浏览器上为 window )。我们将其作为参数 globals 传递到 IIFE ，然后使用或创建一个名为 MyApp 的属性，并添加searchResult将其作为属性(property)。

Controller .js:

;(function(globals) {
  var MyApp = globals.MyApp = globals.MyApp || {};
  function storeSearchResults(jsonObj) {
    var instance = new MyApp.searchResult(jsonObj.data[i]);
    /* Do more */
 }     
})(this);

我们做同样的事情，除了 controllers.js期待models.js已经运行了。虽然我们仍然做var MyApp = globals.MyApp = globals.MyApp || {};位，new MyApp.searchResult如果 models.js 当然会失败尚未运行。

这个主题可能有十几种语法变体，这只是其中之一。

使用某种可以为您完成此操作的库

您的另一个选择是使用像 RequireJS 这样的库(唯一的全局符号是 require ，它是一个函数)或任何其他 asynchronous module definition库。

用另一种方式自己做

另一个 DIY 选项可以完全摆脱全局变量，您甚至不需要一个全局变量。

为此，您的个人文件没有 IIFE(尽管它们可以使用 IIFE 来完成不想与其他文件共享的事情):

;
function searchResult (obj) {
  this.state = obj.State;
  /*Do more stuff */
}

Controller .js:

;
function storeSearchResults(jsonObj) {
  var instance = new searchResult(jsonObj.data[i]);
  /* Do more */
}

然后，您使用缩小器来组合脚本并将它们包装在一个大的 IIFE 中。您可能有pre.js :

(function() {

和post.js :

})();

然后缩小器创建 app.js通过组合pre.js + models.js + controllers.js + post.js 。最终结果(为了便于阅读而未缩小并格式化)是:

(function() {
    ;
    function searchResult (obj) {
      this.state = obj.State;
      /*Do more stuff */
    }

    ;
    function storeSearchResults(jsonObj) {
      var instance = new searchResult(jsonObj.data[i]);
      /* Do more */
    }
})();

我称此为 DIY，但如果有工具可以帮助完成它，我不会感到惊讶。