一、導出模塊（export）

1.?命名導出（Named Exports）

// math.js
export const PI = 3.14159;                   // 導出單個常量
export function sum(a, b) { return a + b; }  // 導出單個函數
export class Calculator { /* ... */ }        // 導出單個類// 或集中導出（推薦）
const PI = 3.14159;
function sum(a, b) { /* ... */ }
class Calculator { /* ... */ }export { PI, sum, Calculator };              // 統一導出多個成員

2.?默認導出（Default Export）

// config.js
const API_KEY = '123-xyz';
export default API_KEY;                       // 默認導出一個值// 或導出匿名函數/類
export default function(a, b) { return a + b; }
export default class { /* ... */ }

3.?混合導出

// utils.js
export const VERSION = '1.0';                // 命名導出
export default function log(msg) {            // 默認導出console.log(msg);
}

---

二、導入模塊（import）

1.?導入命名導出

// 按名稱導入（推薦明確導入）
import { PI, sum } from './math.js';          // 導入指定成員
console.log(PI);                              // 3.14159// 別名解決命名沖突
import { sum as add } from './math.js';       // 重命名為 add// 整體導入命名空間
import * as MathUtils from './math.js';       // 全部導入為對象
console.log(MathUtils.PI);                    // 3.14159

2.?導入默認導出

// 直接導入默認值（無需大括號）
import API_KEY from './config.js';            // 默認導出的變量
import logger from './utils.js';              // 默認導出的函數// 同時導入默認和命名
import API_KEY, { VERSION } from './utils.js'; 

3.?動態導入（按需加載）

// 異步加載模塊（返回Promise）
const module = await import('./math.js');
console.log(module.PI);                       // 3.14159

---

三、特殊場景與技巧

1.?重新導出（Re-export）

// index.js（聚合多個模塊）
export { PI } from './math.js';               // 重新導出命名成員
export { default as Logger } from './utils.js'; // 重新導出默認成員

2.?空導入（僅執行模塊）

// 加載模塊但不導入任何內容（用于初始化）
import './init.js';                           // 執行模塊代碼

3.?循環依賴處理

// a.js
import { bFunc } from './b.js';
export function aFunc() { bFunc(); }// b.js
import { aFunc } from './a.js';
export function bFunc() { aFunc(); }

---

四、代碼示例

模塊拆分示例：

// 📁 src/
//   ├── utils/
//   │   ├── math.js       (命名導出)
//   │   └── logger.js     (默認導出)
//   └── app.js            (主文件)// math.js
export const PI = 3.14159;
export function circleArea(r) { return PI * r ** 2; }// logger.js
export default function (msg) { console.log(`[LOG] ${msg}`); }// app.js
import { PI, circleArea } from './utils/math.js';
import log from './utils/logger.js';log(`Area: ${circleArea(5)}`);  // [LOG] Area: 78.53975

---

五、注意事項

1. 文件擴展名
   瀏覽器中需明確寫?.js，Node.js 中可省略（需配置?"type": "module"）。

2. 路徑規則

   • 相對路徑：./?或?../

   • 絕對路徑：/src/utils/math.js

   • 第三方模塊：import _ from 'lodash';

3. 模塊作用域
   每個模塊擁有獨立作用域，var?聲明的變量不會污染全局。

4. 兼容性
   瀏覽器需設置?<script type="module">，舊環境需通過 Webpack/Rollup 打包。

---

六、最佳實踐

• 優先命名導出：明確導出內容，便于代碼維護和 Tree Shaking 優化。

• 默認導出的場景：適用于模塊主要功能單一（如 React 組件、工具類）。

• 路徑別名：通過構建工具配置?@/utils/math?簡化長路徑。

通過合理使用?export?和?import，可顯著提升代碼的可維護性和復用性。