Javascript UMD - where/how 是 root，出厂定义？

Question

在像下面这样的简单 UMD 设置中，where/how 是否定义了 root 和 factory？

(function (root, factory) {

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

}(this, function (b) {

    // module definition here

}));

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

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

Answer 1

不总是。 root 在 Node 中可能是 global，在浏览器中可能是 window。它通过提供 this 来传递。 factory 是 this 之后的函数，参数为 b。这就是应用程序代码（"business logic" 或 "meat"）所在的位置。

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

Answer 2

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

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

好处是 IIFE 的主体在 "private scope" 中独立工作。它之外的变量名没有作用，你没有冲突问题。

现在，回到您的问题，您将 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
}));

Javascript UMD - where/how 是 root，出厂定义？

Javascript UMD - where/how are root, factory defined?

javascript

umd