為什麼需要模組化

全域汙染：全域變數會是windows，會被汙染。
標籤順序混亂：有時script標籤所在位置會導致網頁加載失敗或錯誤，雖然可以在開頭標籤內用defer(延遲)解決。
維護困難：所有程式都放在同一個檔案，當專案龐大時，維護非常困難耗時。

模組化歷史

前期

IIFE(立即執行函式)
1995年推出，只是在2010年正名為IIFE。

中期

Common JS
2009年推出。

AMD
2010年推出。

後期

ES module (ESM)
2015年推出，也是現在通用的。

Module語法

具名匯出 (Named Export)

一個檔案可以有多個具名匯出。匯入時名稱必須完全對應，且必須放在 { } 中。

匯出 (export)

javascript

// 檔案路徑math.js
// 寫法 A：宣告時直接匯出
export const name = 'Jack';
export function add(a, b) {
    return a + b;
}

// 寫法 B：統一在檔案底部匯出
const age = 25;
const multiply = (a, b) => a * b;
export { age, multiply };

匯入 (import)

javascript

import { name, add, age } from './math.js';

// 如果想換個名字，可以使用 as (別名)
import { multiply as mul } from './math.js';

預設匯出 (Default Export)

一個檔案只能有一個預設匯出。通常用於該檔案的主要功能（例如一個類別或組件）。

匯出 (export default)

javascript

// 檔案路徑logger.js
// 預設匯出一個物件或函式 (不需宣告變數名稱)
export default function logger(msg) {
    console.log(msg);
}

匯入 (import)
不必使用 { }，且可以自定義任何名稱。

javascript
import myLogger from './logger.js';
myLogger('Hello!'); // 執行的是 logger 函式