javascript - 为什么这么多 JS 库中使用 function(global, factory)？

Question

在这么多 JavaScript 库中，我看到了 global, factory作为函数的参数。
例如:

jQuery :

( function( global, factory ) {

    "use strict";

    if ( typeof module === "object" && typeof module.exports === "object" ) {
//...

Vue.js :

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = global || self, global.Vue = factory());
}(this, function () { 'use strict';

  /*  */

// ...

应该还有很多例子……

我的问题是:为什么 global和 factory经常用作参数，它们是什么？

Answer 1

正如评论中的几个人提到的，真正的答案是，这是 UMD 模块的结构。

我写这个作为答案主要是因为很难在评论中说明这一点。但是您可以在 Vue.js 示例中清楚地看到代码在做什么:

    ┌──────────────────┐       ┌──────────────────┐
    │                  ▼       ▼                  │
    │    (function (global, factory) {            │
    │                                             │
    │                                             │
    │        /* deleted for clarity */            │
    │                 ┌───────────────────────────┘
    │                 │
    │    }(this, function () { 'use strict';
    │       │
    └───────┘
             /* */

         })

所以基本上它是一个 IIFE .如果你给匿名函数命名，你可以更清楚地重写这个结构:

// rename function () { 'use strict' ...
function Vue () { 'use strict';
    /* */
}

// rename function (global, factory) ...
function UMD (global, factory) {
    /* deleted for clarity */ 
}

UMD(this, Vue);

所以 global基本上是 this当从任何函数外部引用时，它指向全局对象( window 在浏览器中，而不是在 node.js 中命名)和 factory是一个创建 Vue.js 对象(或 jQuery 在 jQuery 的情况下)的函数。基本上 factory是库的实现。

这种结构的编写方式是不会在全局范围内创建任何不必要的变量或函数，从而避免污染全局范围并避免变量/函数名称与其他库发生冲突。

至于为什么分配 this至 global ?那是因为 window是(是？)全局范围内完全不 protected 变量(这就是为什么 node.js 不给它命名)并且任何第 3 方代码都可以用不同的东西覆盖它或修改它。如果您在使用未知的 3rd 方代码时想要浏览器的原始全局对象，您需要使用此 this诡计。