UMD 是 JavaScript 模組的通用模組定義模式。這些模組能夠在任何地方工作，無論是在客戶端、伺服器還是其他地方。

UMD 模式通常試圖提供與當今最流行的指令碼載入器（例如 RequireJS 等）的相容性。 在許多情況下，它使用 AMD 作為基礎，並新增了特殊的外殼來處理 CommonJS 相容性。

所以首先要了解 AMD.

# AMD

AMD 代表非同步模組定義(Asynchronous Module Definition). 它是 CommonJS (CJS) 規範的替代品。

API 指定了一種定義模組的機制，以便可以非同步載入模組及其依賴項。 這特別適用於模組的同步載入會導致效能、可用性、除錯和跨域訪問問題的瀏覽器環境。

AMD 庫公開了一個全域性定義函式，其 footprint 為：

```typescript
define(modulename?,[dependencyA?, dependencyB?, …], function (objectA, objectB, …) {
...
    var myExportedObj = function() { … }
    return myExportedObj;

});
```

# CommonJS

CommonJS 是一個專案，其目標是為瀏覽器之外的 JavaScript 指定一個生態系統（例如，在伺服器上或本地桌面應用程式）。

伺服器端 JavaScript 已經存在很長時間了，並且可能提供一些與其他語言相比獨特而有趣的優勢，因為客戶端和伺服器都使用相同的語言。

不幸的是，伺服器端 JavaScript 非常分散。訪問檔案的指令碼在 rhino 和 V8 上未經修改就無法使用。 Spidermonkey 和 JavaScriptCore 不能以相同的方式載入附加模組。 JavaScript Web 框架與其直譯器密切相關，並且經常被迫建立一堆 Python、Ruby 和 Java 程式設計師認為理所當然的 API。

該專案的目標是建立一個標準庫，最終允許 Web 開發人員在任意數量的 Web 框架和工具中進行選擇，並在最適合其應用程式的平臺上執行該程式碼。

例如， foo.js 在同一目錄中載入模組 circle.js。

```typescript
const circle = require('./circle.js');
console.log(`The area of a circle of radius 4 is ${circle.area(4)}`);
```

circle.js:

```typescript
const PI = Math.PI;

exports.area = function (r) {
  return PI * r * r;
};

exports.circumference = function (r) {
  return 2 * PI * r;
};
```

模組 circle.js 已經匯出了函式 area(..) 和 circle(..)。 要將函式和物件新增到模組的根目錄，您可以將它們新增到特殊的匯出物件。

模組本地的變數將是私有的，就像模組被包裝在一個函式中一樣。 在這個例子中，變數 PI 是 circle.js 私有的。

如果您希望模組匯出的根是一個函式（例如建構函式），或者如果您想在一次分配中匯出一個完整的物件而不是一次構建一個屬性，請將其分配給 module.exports 而不是 exports.

例子：

```typescript
const square = require('./square.js');
var mySquare = square(2);
console.log(`The area of my square is ${mySquare.area()}`);
```

square.js 的實現：

```typescript
// Assigning to exports will not modify module, must use module.exports
module.exports = function (width) {
  return {
    area: function () {
      return (width * width);
    }
  };
}
```

我們來單步除錯一個實際例子來加深理解：
![](https://img-blog.csdnimg.cn/img_convert/76d59eac2eaec6b1f92e59f4e59b1de1.png)

上圖是一個自執行函式，兩個輸入引數 global 和 factory 分別傳入了 this 和 function(exports)...

![](https://img-blog.csdnimg.cn/img_convert/885c5c32b50141a0ccda3069670933a6.png)

要匯出的函式 log 的實現體，只是一個簡單的 console.log.

![](https://img-blog.csdnimg.cn/img_convert/02ab33dd0fade458fd0edc4ae77f672f.png)

上圖這個 require 其實是 Node.js 內部實現：

![](https://img-blog.csdnimg.cn/img_convert/ddd3af8d81e666a5db7db0369f0de323.png)

當前 module 是 local.js 即 node 命令啟動的 module，期望載入的 是 log.js:

![](https://img-blog.csdnimg.cn/img_convert/9a7c5afda43e1d456b231c64ac8bfef3.png)

從 module 的 paths 陣列裡就能看出 Node.js 解析 module 的路徑：從當前 module 所在的資料夾出發，一直回溯到 c 盤根目錄下的 node_modules

![](https://img-blog.csdnimg.cn/img_convert/5726bfd9fb142e4b53a78778ae9007ab.png)

log.js 的 paths：

![](https://img-blog.csdnimg.cn/img_convert/fff8b0c1f3614f780e67f80b9d4980ef.png)

load 之前先 compile：
![](https://img-blog.csdnimg.cn/img_convert/4b02112bb4aee474de39a38f0879f9e2.png)

第 1157 行的程式碼位置，變數 content 的內容就是 log.js 檔案的內容：

![](https://img-blog.csdnimg.cn/img_convert/9f79e6694db4d62678640b53ceb56fde.png)

compile 的邏輯就是執行 log.js 裡的程式碼：
![](https://img-blog.csdnimg.cn/img_convert/e32a99790a0f4147ada23ce03264a786.png)

在這個上下文裡，factory 指向的就是下圖綠色高亮的函式：
![](https://img-blog.csdnimg.cn/img_convert/cf4bc8f9d52e29618679b1257de940af.png)

define 為 undefined，所以進入 else 分支：
![](https://img-blog.csdnimg.cn/img_convert/39c81739282590f7e5931db2713b4183.png)

此處把 log 函式寫入到 exports 物件的 log 屬性裡：
![](https://img-blog.csdnimg.cn/img_convert/a96999025dd2b631a9a5e044778618ca.png)

然後在我們的應用程式碼裡，就可以使用匯出的 log 函式了：
![](https://img-blog.csdnimg.cn/img_convert/fc8ccc6f7894af4370fb5fd7f07f6791.png)

什麼是 JavaScript 世界的 UMD

相關文章