目錄

一、ES6模塊化的核心概念

1. 模塊化的基本規則

二、export的用法

1. 命名導出（Named Export）

示例：

2. 默認導出（Default Export）

示例：

默認導出函數或類：

3. 導出語句的統一聲明

示例：

三、import的用法

1. 按需導入命名成員

2. 導入默認成員

3. 同時導入命名成員和默認成員

4. 導入整個模塊

5. 重命名導入成員

四、動態導入（Dynamic Import）

1. 動態加載模塊

示例：

2. 動態導入的應用場景

五、注意事項

1. 模塊環境配置

2. 常見錯誤

六、總結

---

一、ES6模塊化的核心概念

1. 模塊化的基本規則

• 一次性加載：每個模塊只會被加載一次，后續請求直接從內存中獲取。
• 局部作用域：模塊內的變量、函數僅在模塊內部生效，不會污染全局作用域。
• 導出（export）：通過export關鍵字暴露模塊中的變量、函數或類。
• 導入（import）：通過import關鍵字從其他模塊中導入已導出的內容。

二、export的用法

1. 命名導出（Named Export）

命名導出允許在模塊中導出多個成員，導入時需使用相同的名稱。

示例：

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;// main.js
import { add, subtract } from './math.js';
console.log(add(2, 3)); // 輸出: 5
console.log(subtract(5, 2)); // 輸出: 3

?批量導出：

// utils.js
const pi = 3.14;
function multiply(a, b) { return a * b; }export { pi, multiply };// main.js
import { pi, multiply } from './utils.js';
console.log(multiply(pi, 2)); // 輸出: 6.28

2. 默認導出（Default Export）

每個模塊只能有一個默認導出，導入時可以使用任意名稱。

示例：

// user.js
const user = { name: 'Alice', age: 25 };
export default user;// main.js
import myUser from './user.js';
console.log(myUser.name); // 輸出: Alice

默認導出函數或類：

// calculator.js
export default function add(a, b) { return a + b; }// main.js
import sum from './calculator.js';
console.log(sum(3, 4)); // 輸出: 7

3. 導出語句的統一聲明

可以在模塊末尾集中導出所有成員。

示例：

// tools.js
const base = 10;
function square(n) { return n * n; }export { base, square };// main.js
import { base, square } from './tools.js';
console.log(square(base)); // 輸出: 100

三、import的用法

1. 按需導入命名成員

導入模塊中指定的命名導出。

import { add, subtract } from './math.js';
console.log(add(1, 2)); // 輸出: 3

2. 導入默認成員

直接導入模塊的默認導出。

import sum from './calculator.js';
console.log(sum(5, 5)); // 輸出: 10

3. 同時導入命名成員和默認成員

import sum, { add, subtract } from './math.js';
console.log(sum(2, 3)); // 輸出: 5
console.log(add(1, 1)); // 輸出: 2

4. 導入整個模塊

將模塊的所有導出內容作為一個對象導入。

import * as math from './math.js';
console.log(math.add(2, 3)); // 輸出: 5
console.log(math.subtract(5, 2)); // 輸出: 3

5. 重命名導入成員

通過as關鍵字避免命名沖突。

import { add as sum, subtract } from './math.js';
console.log(sum(2, 3)); // 輸出: 5

四、動態導入（Dynamic Import）

1. 動態加載模塊

import()返回一個Promise，適用于按需加載模塊。

示例：

// 動態加載模塊
import('./math.js').then(module => {console.log(module.add(2, 3)); // 輸出: 5}).catch(error => console.error('加載失敗:', error));// 使用async/await
const module = await import('./math.js');
console.log(module.add(2, 3)); // 輸出: 5

2. 動態導入的應用場景

• 按需加載：減少初始加載時間，提升性能。
• 條件加載：根據用戶操作或設備類型動態加載模塊。
• 異步加載：處理大型模塊或依賴庫。

五、注意事項

1. 模塊環境配置

• 瀏覽器環境：需在<script>標簽中添加type="module"。

  <script type="module" src="main.js"></script>

• Node.js環境：在package.json中設置"type": "module"。

?

2. 常見錯誤

• 默認導出只能有一個：每個模塊僅能使用一次export default。
• 命名沖突：導入時需注意名稱一致性，可通過as重命名。
• 作用域限制：export語句不能出現在條件語句或函數內部。

?

六、總結

ES6的export和import為JavaScript模塊化提供了標準化的解決方案，其核心優勢在于：

1. 代碼結構清晰：通過模塊化組織代碼，降低耦合度。
2. 避免全局污染：模塊作用域隔離了變量和函數。
3. 提高復用性：模塊可被多個文件共享和調用。
4. 動態加載能力：按需加載模塊，優化性能。

通過合理使用export和import，開發者可以構建更高效、更易維護的JavaScript應用程序。在實際開發中，建議根據項目需求靈活選擇命名導出或默認導出，并結合動態導入優化加載策略。

?