什麼是 JavaScript 模組 (import / export)？

什麼是 JavaScript 模組 (import / export)？ (#3570)

來源：

JavaScript 模組是將程式碼拆分為獨立且自包含的檔案（模組），每個模組封裝特定功能或資料，並能透過明確的介面與其它模組進行互動，從而提升代碼的結構化、重用性與可維護性。

核心概念如下：

模組是一個獨立檔案：每個模組有自己的作用域，裡面的變數、函式、類別等不會污染全局空間。
導出與導入：模組用 export 將想提供給外部使用的部分公開，用 import 引入其他模組已公開的功能。
ES6 模組系統：現代 JavaScript 使用 ES6 定義的模組標準，支持靜態加載（編譯時確定依賴關係），並且語法簡潔（如 export default、命名導出等）。
動態導入：使用 import() 函數實現按需（懶）加載模組，提高性能。
模組化的優點：
- 提高可維護性：將代碼依功能拆分，易於管理。
- 防止命名衝突：模組各有作用域，避免全局變量污染。
- 重用代碼：模組可在多個地方引用，減少重複代碼。
- 提升開發效率：明確依賴管理，方便分工與測試。

範例：

js

// math.js 模組 export function add(a, b) { return a + b; } export const PI = 3.14159;

js

// main.js 檔案 import { add, PI } from './math.js'; console.log(add(2, 3)); // 輸出 5 console.log(PI); // 輸出 3.14159

ES6 模組需在瀏覽器端配合 <script type="module"> 使用，Node.js 也支持 ES6 模組格式（或使用 CommonJS 格式的 require）。

總結來說，JavaScript 模組系統是現代程式設計中不可或缺的，透過模組化能有效組織複雜的程式碼，實現清晰且可維護的大型應用開發 .