javascript - JavaScript 模块化方法中 IIFE 和非 IIFE 的区别

Question

最近，当我试图了解更多有关 JavaScript 中的 IIFE 和模块的信息时我想到了一个问题，即 IIFE 如何在不立即制作模块的情况下制作模块调用该函数不会使其成为一个模块..

任何人都可以与我分享这段代码之间的区别

var MODULE = (function () {
var my = {},
    privateVariable = 1;

function privateMethod() {
    // ...
}

my.moduleProperty = 1;
my.moduleMethod = function () {
    // ...
};

return my;
}());

并且此代码中的函数未立即调用..

var MODULE = function () {
var my = {},
    privateVariable = 1;

function privateMethod() {
    // ...
}

my.moduleProperty = 1;
my.moduleMethod = function () {
    // ...
};

return my;
};

第二段代码是否意味着 Module 只是一个本身返回对象的函数？

如果我像这样使用第二个变量

var ModuleObj = Module();

这会和我像 IIFE 一样共享的第一个代码块一样工作吗......有点困惑......

Answer 1

是的，您几乎已经了解了两者之间的区别，让我们来看看为什么您可能更想要一个。

IIFE 可用于隔离作用域。它可以让你在 IIFE 中保持你定义的变量私有(private)，而不会污染它周围的全局空间。这是编写一个函数的好方法，该函数具有一些您不需要潜伏的变量。让我们稍微简化一下这个例子。

var Counter = (function () {
  var count = 0;

  var counter = {
    add: function () {
      count++;
    },
    subtract: function () {
      count--;
    },
    getCount: function () {
      return count;
    }
  }
  return counter;
})();

Counter.add();
Counter.add();
Counter.getCount(); // 2
Counter.subtract();
Counter.getCount(); // 1

上面发生的事情是我们能够在不泄露私有(private)信息的情况下组合这个“计数器”功能，比如 count。如果其他事情可以意外覆盖它，那就太糟糕了。此外，我们可以立即将 Counter 分配给 IFFE 的 result -- counter 函数集。 Counter 现在等于那个，并且 counter 能够保留对 count 的访问，因为它是在相同的范围内定义的。

这里的好处是我们能够为这个功能组合分配一个变量。 IIFE 基本上允许我们立即返回我们在其中返回的内容。由于我们将 Counter 分配给 IIFE，并且 IIFE 返回其中的功能，因此 Counter 现在是一个功能齐全的组件。

我们并不总是必须使用 IIFE。当您想“隐藏”实现细节并返回 API 时，它真的很方便。

---

那么，如果我们有同样的东西，但它不是 IIFE —— 只是一个函数怎么办？

就像您的示例一样，我们必须调用它才能获得“实例”。

var CounterFactory = function () {
  var count = 0;
  var counter = {
    add: //...
    subtract: //...
    getCount: //...
  };
  return counter;
};

var CounterA = CounterFactory();
var CounterB = CounterFactory();

CounterA.add();
CounterA.add();
CounterA.getCount(); // 2

CounterB.add();
CounterB.getCount(); // 1

看出区别了吗？这都是关于函数返回的内容。在第一个示例中，我们只得到一个 Counter 实例，这可能完全没问题。在第二个示例中，它更像是一个“工厂”——它生成一个 counter 的实例，我们可以多次调用它并获得它的多个实例。