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 返回一个功能。那么第一个参数（在这种情况下是根）总是定义为窗口对象吗？第二个呢？他们是否实现了相同的跨浏览器？我正在到处寻找规格或参考来支持它，但找不到……有很多关于 UMD 奇迹的博客文章，但我找不到任何关于它如何神奇地工作的解释.

有人对它的工作原理或原因有一个简单的解释吗？

Answer 1

这是一个 IIFE（立即调用函数表达式），很好地解释了 here。

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

这样做的好处是，IIFE 的主体在“私人范围”内独立运作。它之外的变量名没有任何影响，你也没有冲突问题。

现在，回到您的问题，您将 this 作为参数传递。这是全局对象。在浏览器中是window，在Node 中是global。在 IIFE 的这两种情况下，您都将其称为root，在您的模块中称为b。不管你怎么称呼它，另一个优点是你的 minifier 可以把它捡起来并翻译成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
}));

Answer 2

并非总是如此。 root 在 Node 中可能是 global，在浏览器中可能是 window。它通过提供this 传递。 factory 是 this 之后的函数，参数为 b。这就是应用程序代码（“业务逻辑”或“肉”）所在的位置。

UMD 应该可以在任何 JavaScript 环境中工作，它只是针对存在的任何模块加载系统调整逻辑。