javascript - 试图了解这个 JS 函数的作用及其参数是什么，有人可以解释一下吗？

Question

我正在阅读我最近下载的用于 WebGL 矩阵数学运算的库中的一些代码。但是，我很难理解这个函数的作用。这来自 glMatrix.js 库。

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

什么是工厂参数/功能，导出从何而来？谁能一步一步地告诉我这个函数的作用？

编辑:这只是代码的第一部分，这就是左括号永远不会关闭的原因。

Answer 1

这是一个名为 UMD 的设计模式, 它是 IIFE 的更高级版本设计模式。它们都包装了您的代码，创建了一个新的私有(private)范围。两者之间的主要区别是 UMD 更抽象并且也可以在 node.js 和 amd 中工作，而不仅仅是浏览器。

您在问题中显示的第一行和最后一行基本上是 IIFE 部分(减去末尾，因为您已经裁剪了它)。您正在调用 iife 并传递 global aka window 对象和您只能看到的 factory 函数function (exports) 代码中的部分。

以下部分检查您使用的环境是节点、amd 还是常规 JS，以便它们将在每个环境要求中定义模块，即 node 只需要你要设置 exports 对象，amd 需要你使用 define 函数，而在 vanilla JS 中你只需添加window 或 global 对象的对象。

typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory(global.glMatrix = {}));

在 node 和 amd 中，你不需要命名你的导出，因为你只需要 require 那个文件，即 const glMatrix = require("./common.js");，但是在 JS 中您需要从全局对象中检索，这就是为什么它只是一个需要命名的对象，即 factory(global.glMatrix = {})。该行将 glMatrix 属性添加到全局对象(最初是一个空对象)，然后将其作为参数传递给您的 factory 函数，该函数附加所有函数、值以及您应该能够从范围外访问的类。

UMD 模式的实现可能因库而异。例如，这是一种无需将任何参数传递给 IIFE

即可完成的方法

(function() {
  var global = this;

  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (global = global || self, factory(global.foo = {}));

  function factory(exports) {
    exports.bar = function() {
      console.log("Hello World!");
    };
  }
})();

foo.bar();

在节点中，您可以创建一个新文件并导出您想要的任何内容。然后 Node 会将这些导出与文件而不是属性相关联(这在浏览器 JS 中发生)。例如，一个名为 foo.js 的文件包含以下内容:

function bar() {
    console.log("Hello World!");
}

exports.bar = bar;

可以像这样从另一个文件访问:

const foo = require("foo.js");
foo.bar();

或者您可以使用 Destructuring 直接访问属性:

const { bar } = require("foo.js");
bar();