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

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

所以首先要了解 AMD.

AMD

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

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

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

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

CommonJS

CommonJS 是一個項目，其目標(biāo)是為瀏覽器之外的 JavaScript 指定一個生態(tài)系統(tǒng)（例如，在服務(wù)器上或本地桌面應(yīng)用程序）。

服務(wù)器端 JavaScript 已經(jīng)存在很長時間了，并且可能提供一些與其他語言相比獨特而有趣的優(yōu)勢，因為客戶端和服務(wù)器都使用相同的語言。

不幸的是，服務(wù)器端 JavaScript 非常分散。訪問文件的腳本在 rhino 和 V8 上未經(jīng)修改就無法使用。 Spidermonkey 和 JavaScriptCore 不能以相同的方式加載附加模塊。 JavaScript Web 框架與其解釋器密切相關(guān)，并且經(jīng)常被迫創(chuàng)建一堆 Python、Ruby 和 Java 程序員認為理所當(dāng)然的 API。

該項目的目標(biāo)是創(chuàng)建一個標(biāo)準(zhǔn)庫，最終允許 Web 開發(fā)人員在任意數(shù)量的 Web 框架和工具中進行選擇，并在最適合其應(yīng)用程序的平臺上運行該代碼。

例如， 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 已經(jīng)導(dǎo)出了函數(shù) area(…) 和 circle(…)。 要將函數(shù)和對象添加到模塊的根目錄，您可以將它們添加到特殊的導(dǎo)出對象。

模塊本地的變量將是私有的，就像模塊被包裝在一個函數(shù)中一樣。 在這個例子中，變量 PI 是 circle.js 私有的。

如果您希望模塊導(dǎo)出的根是一個函數(shù)（例如構(gòu)造函數(shù)），或者如果您想在一次分配中導(dǎo)出一個完整的對象而不是一次構(gòu)建一個屬性，請將其分配給 module.exports 而不是 exports.

例子：

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

square.js 的實現(xiàn)：

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

我們來單步調(diào)試一個實際例子來加深理解：

上圖是一個自執(zhí)行函數(shù)，兩個輸入?yún)?shù) global 和 factory 分別傳入了 this 和 function(exports)…

要導(dǎo)出的函數(shù) log 的實現(xiàn)體，只是一個簡單的 console.log.

上圖這個 require 其實是 Node.js 內(nèi)部實現(xiàn)：

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

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

log.js 的 paths：

load 之前先 compile：

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

compile 的邏輯就是執(zhí)行 log.js 里的代碼：

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

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

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

然后在我們的應(yīng)用代碼里，就可以使用導(dǎo)出的 log 函數(shù)了：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。