De-yu's Note
  • Deyu Notebook
  • Side Project
    • Stock
    • ChatBox
    • SnowCraft
    • ScrollBar
  • 架構問題
    • 解決 RTK Query data 為 undefined 的實務做法
    • 透過 xstate 解決UI 狀態問題
  • 技術觀點
    • 為什麼需要 store
    • Router 作用
    • react 和 next.js 差異
    • monoRepo vs Multiple Repo
  • Performance
    • React 優化
  • JS Coding
    • Curry
    • Debounce
    • Throttle
  • map
  • memo()
  • Promise 實作
  • Promise Function
  • Testing
    • 使用 Jest 、 React Testing Library 、MSW 建立測試環境
  • Miscellaneous
    • Event Loop
    • Browser
    • Code Review
    • Storage
  • AMD 、 CommonJS 、 ES modules
  • JWT
  • Next.js
  • 用過的 module
  • Internet
    • UDP
  • TCP/IP
  • SSL TLS
  • HTTP
  • AI 工作流
    • Page 1
Powered by GitBook
On this page

AMD 、 CommonJS 、 ES modules

CommonJS (CJS)

用途: 主要在 Node.js 環境中使用,早期沒有原生的 ES 模組支持時,CommonJS 是主要的模組規範。
語法:
require() 用來引入模組。
module.exports 或 exports 用來導出模組。
加載方式: 同步(Synchronous),在引入模組時會阻塞執行直到模組加載完成。
特點:
主要用於伺服器端,適合需要同步加載的情況。
不支持動態引入(import()),只能靜態引入。

AMD (Asynchronous Module Definition)

用途: 主要用於瀏覽器端的模組化,尤其是在非同步加載模組的情境下(例如瀏覽器中動態載入腳本)。
語法:
define() 用來定義模組,並可以指定模組的依賴。
依賴是非同步加載的,可以在加載後觸發回調函數。
加載方式: 非同步(Asynchronous),模組是非同步加載的,不會阻塞主執行緒。
特點:
允許模組之間具有依賴關係,並且非同步地解決依賴問題。
主要用途是在瀏覽器環境中動態加載模組。

ES Modules (ESM)


用途: ES6 引入的標準化模組系統,適用於瀏覽器端和伺服器端(Node.js 14+ 開始支持)。
語法:
import 用來引入模組。
export 用來導出模組。
加載方式:
靜態加載,模組的結構在編譯時就已經確定,這使得它可以進行靜態分析和優化。
支持動態引入,例如使用 import() 函數實現動態模組加載。
模組是按需加載的,可以利用瀏覽器的優化(如按需加載)。
特點:
提供了與語言本身緊密集成的模組機制,是未來 JavaScript 開發的趨勢。
支持靜態分析,有助於樹損(tree shaking)和代碼拆分。
PreviousStorageNextJWT

Last updated 28 days ago