JavaScript 的模組匯出與匯入：如何在多檔案間使用函數與變數
更新日期： 2024 年 11 月 7 日
在現代 JavaScript 開發中，模組化是一種常用的程式碼管理方式，能將功能分解為多個檔案，並利用 import 和 export 將它們互相匯入、匯出來組成應用程式。
ES6（ECMAScript 2015）引入了模組系統，使得我們可以使用 import 和 export 來管理代碼間的依賴關係。
本文將探討模組化的使用方式，以及如何透過 named export 和 default export 來匯出與匯入模組的內容。
JavaScript 的模組化演進
在 ES6 引入模組語法前，JavaScript 並不支援原生的 import 和 export 語法。
在多檔案專案中，我們只能依賴 HTML 檔案中的 <script> 標籤，按順序引用各個 JavaScript 檔案，並根據其排列順序執行。例如：
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- jquery -->
<!-- 跑馬燈效果 -->
<script src="a.js"></script>
<script src="main.js"></script>
</head>在這種情況下，瀏覽器會按照 HTML 中的引入順序執行 a.js 和 main.js，因此 main.js 可以直接使用 a.js 中的變數或函數。
但這種方式會導致以下問題：
- 順序依賴性強，一旦順序錯誤就會引發錯誤。
- 全域空間污染，若不同檔案的變數或函數名稱相同，可能會覆蓋，導致難以維護。
ES6 模組化：使用 import 和 export 進行模組匯出與匯入
ES6 引入了模組化語法，提供了兩種主要的匯出方式：named export 和 default export。
這讓我們能夠將功能區分為各個模組，並按需匯入，從而避免命名衝突並減少依賴順序問題。
Named Export 和 Named Import
named export 是指將模組內的函數、變數或物件以名稱匯出，使其他模組能夠精確地指定，並匯入這些名稱。
範例：Named Export
假設我們有一個 a.js 檔案，包含一個函數 abc 和變數 a，我們可以使用 named export 將它們匯出：
// a.js
function abc() {
return 123;
}
const a = 1;
export { abc, a };對應的 Named Import
在 main.js 中，我們可以透過 named import 將 a.js 中的內容匯入，並必須使用大括號 {} 來引入：
// main.js
import { abc, a } from "./a.js";
console.log(abc()); // 123
console.log(a); // 1Default Export 和 Default Import
default export 用於匯出模組中的主要功能，一個模組檔案中只能有一個 default export。
這種匯出方式在匯入時無需使用大括號 {}，並且可以自由命名。
範例：Default Export
在 a.js 中匯出一個默認函數：
// a.js
export default function abc() {
return 123;
}對應的 Default Import
在 main.js 中，使用 default import 匯入函數 abc，且可以任意命名：
// main.js
import customFunction from "./a.js";
console.log(customFunction()); // 123Named Export 和 Default Export 的比較
| 匯出方式 | 匯入方式 | 特性 |
|---|---|---|
| Named Export | Named Import | 支援多次匯出，名稱需精確匹配 |
| Default Export | Default Import | 每個模組僅支援一次，名稱可自定 |
解決命名衝突：as 關鍵字的應用
在匯入 named export 時，若遇到與本地變數同名的情況，可以使用 as 關鍵字來重命名匯入的變數或函數，避免衝突。
案例：使用 as 關鍵字解決命名衝突
假設在 main.js 中，我們既要使用本地變數 a，又要使用 a.js 中的變數 a，這時就可以使用 as 關鍵字進行重命名：
// a.js
export const a = 1;
// main.js
import { a as importedA } from "./a.js";
const a = 2;
console.log(a); // 2，來自 main.js 的本地變數
console.log(importedA); // 1，來自 a.js 的匯入變數這樣我們既保留了本地變數 a，又可以使用從 a.js 匯入的 importedA。
使用模組化語法時的注意事項
當我們在 HTML 中引入 JavaScript 檔案並使用模組語法時，必須使用 type="module" 屬性告知瀏覽器這是一個模組檔案，否則會導致錯誤。
以下是正確的寫法：
<script src="main.js" type="module"></script>這樣，瀏覽器就能正確解析 import 和 export 語法。
總結
ES6 引入的 import 和 export 提供了更靈活的模組化方法，使得多檔案間的共享變得簡單、高效且安全。
透過 named export 和 default export，我們可以按需匯出模組中的功能，並使用 as 關鍵字來解決命名衝突。
重點回顧
- 模組化：ES6 以前，JavaScript 的執行依賴 HTML 的引入順序，容易導致全域空間污染和依賴錯誤。
- Named Export 和 Default Export：前者支持多次匯出，必須精確匹配名稱；後者僅支援一次匯出，可自定名稱。
- 解決命名衝突：
as關鍵字允許我們在匯入時重新命名，避免變數名衝突。 - 設置模組屬性：在 HTML 中引入 JavaScript 檔案時，必須加上
type="module"。
藉由模組化的管理方式，我們可以將代碼劃分為易於維護的部分，提高專案的可讀性和可維護性。