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

UMD 模式通常試圖提供與當今最流行的腳本加載器（例如 RequireJS 等）的兼容性。 在許多情況下，它使用 AMD 作為基礎，并添加了特殊的外殼來處理 CommonJS 兼容性。

所以首先要了解 AMD.

AMD

AMD 代表異步模塊定義(Asynchronous Module Definition). 它是 CommonJS (CJS) 規范的替代品。

API 指定了一種定義模塊的機制，以便可以異步加載模塊及其依賴項。 這特別適用于模塊的同步加載會導致性能、可用性、調試和跨域訪問問題的瀏覽器環境。

AMD 庫公開了一個全局定義函數，其 footprint 為：

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。

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

circle.js:

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.

例子：

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

square.js 的實現：

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

我們來單步調試一個實際例子來加深理解：

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

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

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

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

從 module 的 paths 數組里就能看出 Node.js 解析 module 的路徑：從當前 module 所在的文件夾出發，一直回溯到 c 盤根目錄下的 node_modules

log.js 的 paths：

load 之前先 compile：

第 1157 行的代碼位置，變量 content 的內容就是 log.js 文件的內容：

compile 的邏輯就是執行 log.js 里的代碼：

在這個上下文里，factory 指向的就是下圖綠色高亮的函數：

define 為 undefined，所以進入 else 分支：

此處把 log 函數寫入到 exports 對象的 log 屬性里：

然后在我們的應用代碼里，就可以使用導出的 log 函數了：

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的什么是 JavaScript 世界的 UMD的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。