Javascript UMD - 根、工厂在哪里/如何定义？

Question

在像下面这样的简单 UMD 设置中，root 和 factory 在哪里/如何定义？

(function (root, factory) {

    // environment detection here
    console.log(root);
    console.log(factory);

}(this, function (b) {

    // module definition here

}));

UMD 派对我迟到了，如果这是一个愚蠢的问题，请原谅我...但是如果我运行上面的代码，我会看到 root 返回窗口对象，并且factory 返回一个函数。那么第一个参数(在本例中为 root)是否总是定义为窗口对象？第二个呢？他们是否实现了相同的跨浏览器？我到处搜索规范或引用来支持这一点，但找不到……有很多关于 UMD 奇迹的博客文章，但我找不到任何关于它如何神奇地工作的解释.

有人能简单解释一下这是如何工作的吗？

Answer 1

这是一个 IIFE(立即调用的函数表达式)，解释得很好 here .

简而言之，您正在创建一个只调用一次的函数，并向它传递两个参数，this 和 function(b)。这两个参数在 IIFE 体内被命名为 root 和 factory。

好处是 IIFE 的主体在“私有(private)范围”中独立工作。它之外的变量名没有效果，你没有冲突问题。

现在，回到您的问题，您将 this 作为参数传递。这是全局对象。在浏览器中它是 window 而在 Node 中它是 global。在这两种情况下，在 IIFE 中您都将其称为 root，在您的模块中称为 b。不管你怎么调用它，另一个优点是你的压缩器可以把它捡起来并将它翻译成 c 或其他东西而不会破坏你的代码。这与正常情况形成对比，在正常情况下，window 或 document 或任何模块名称都无法缩小。

您还传递了一个名为 factory 的函数。这是你的模块。如果没有 AMD 或 CommonJS，您通常会这样做:

(function (root, factory) {
    root.myModuleName = factory(root);  
}(this, function (b) {
    // module definition here
}));

这将创建您的模块并将其附加到全局对象，以便您可以使用它。工厂方法只有一个参数，通常需要传递全局对象。您还可以使用更多参数来传递任何模块依赖项:

(function (root, c, factory) {
    root.myModuleName = factory(root, c);  
}(this, jQuery, function (b, $) {
    // module definition here
    // You refer to jQuery as $ without having to call noConflict
}));