隨著 JavaScript 開發變得越來越廣泛,命名空間和依賴關係變得越來越難以處理。人們已經開發出不同的解決方案以模塊系統的形式來解決這個問題。 CommonJS(CJS) CommonJS 是一種同步載入模塊的規範,主要用於伺服器端的 Node.js 環境。 // 模塊導出 module.exp ...
隨著 JavaScript 開發變得越來越廣泛,命名空間和依賴關係變得越來越難以處理。人們已經開發出不同的解決方案以模塊系統的形式來解決這個問題。
CommonJS(CJS)
CommonJS 是一種同步載入模塊的規範,主要用於伺服器端的 Node.js 環境。
// 模塊導出
module.exports = {
// 模塊內容
};
// 模塊導入
const module = require('module');
top:CommonJS 載入的是一個對象(即
module.exports
屬性),該對象只有在腳本運行完才會生成。
AMD(Asynchronous Module Definition)
AMD 是一種_非同步_載入模塊的規範,主要用於瀏覽器端的 JavaScript 開發。它允許模塊在載入完成後立即執行,而不會阻塞頁面載入。
// 模塊定義
define(['dependency1', 'dependency2'], function (dependency1, dependency2) {
// 模塊內容
return {
// 模塊導出內容
};
});
// 模塊載入
require(['module'], function (module) {
// 模塊載入完成後執行的邏輯
});
UMD(Universal Module Definition)
UMD 是一種通用的模塊定義格式,旨在相容 CommonJS、AMD 以及全局變數導出的方式。
實現原理為:先判斷是否支持node.js的模塊,存在就使用node.js;再判斷是否支持AMD(define是否存在),存在則使用*
*AMD的方式載入。這就是所謂的UMD**。
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['exports', 'module'], factory);
} else if (typeof exports === 'object' && typeof module === 'object') {
// CommonJS
factory(exports, module);
} else {
// 瀏覽器環境下暴露到全局變數
factory((root.myModule = {}), root.myModule);
}
})(this, function (exports, module) {
// 模塊內容
});
UMD 實質上創建了一種使用兩者之一的方法,同時還支持全局變數定義。因此,UMD 模塊能夠在客戶端和伺服器上工作。
ESM(ES Module)
ESM 是 ECMAScript 官方提供的模塊標準,支持非同步載入,具有靜態導入和導出,使得代碼更具可靠性和可預測性。
// 模塊導出
export const module = {
// 模塊內容
};
// 模塊導入
import {module} from 'module';
概括
不同的模塊規範各有優劣,選擇合適的規範取決於項目的需求和目標平臺。
- CJS 為同步載入,主要用於伺服器端編程,因為在伺服器端載入速度不太重要,而且同步載入更容易理解和管理。
- AMD 為非同步載入,適用於瀏覽器環境中的非同步模塊載入,尤其是在 Web 應用中採用模塊化開發時使用。
- UMD 為通用形,通常用作 ESM 不起作用時的後備方案,適用於同時在瀏覽器和 Node.js 環境中使用的代碼,使得代碼具有更大的通用性。
- ESM 適用於現代瀏覽器以及支持 ES6 模塊的 Node.js 版本,使得代碼更具可維護性和可移植性。