JS模組化系統

四冥發表於2024-02-19
JS

隨著 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 版本，使得程式碼更具可維護性和可移植性。

相關文章