JavaScript 動態載入模組｜運行邏輯指南（附流程圖）
更新日期： 2025 年 1 月 3 日
本文為 JS 動態載入 案例探討，第 4 篇：
- 使用 Vue 和 DOM 操作整合的最佳實踐指南
- JavaScript 動態載入 import() 與靜態載入 import 指南
- JavaScript 模組與 module 的基礎指南
- JavaScript 動態載入模組｜運行邏輯指南（附流程圖） 👈 所在位置
動態載入是 JavaScript 中一種高效的設計模式，它允許你根據需求按需加載模組。
在多功能、多頁面的應用中，動態載入可以顯著減少初始頁面加載時間並提升性能。
本篇文章以一段範例代碼為例，逐步講解其運行邏輯和動態載入的優勢，幫助新手快速掌握這項技術。
動態載入的運作原理
這段代碼的核心目的是根據 HTML 中的 data-page 屬性動態載入對應的 JavaScript 模組，並執行初始化邏輯。
逐行解釋與作用
選取帶有 data-page 的 DOM 元素
const pageElement = document.querySelector('[data-page]');querySelector('[data-page]')：選取第一個帶有data-page屬性的元素。pageElement：如果找到該元素，變數中將存放這個 DOM 元素；否則為null。
假設 HTML：
<div data-page="switching_tab"></div>此時，pageElement 會對應這個 <div> 元素。
取得 data-page 的值
const pageName = pageElement ? pageElement.dataset.page : null;dataset.page：從選取到的 DOM 元素中讀取data-page屬性的值。- 三元運算符：若
pageElement存在，則取其data-page值；若不存在，則pageName為null。
例子：
<div data-page="switching_tab"></div>→pageName = "switching_tab"- 沒有任何
data-page屬性時 →pageName = null
根據 pageName 動態導入模組
if (pageName === "switching_tab") {
import("./scripts/switching_tab.js").then((module) => {
module.init();
});
}import()：動態加載指定的 JavaScript 模組。.then((module) => {...})：模組加載完成後，執行module.init()方法來初始化頁面功能。
流程：
- 當
pageName是"switching_tab"時，載入switching_tab.js並執行初始化邏輯。 - 若
pageName是"toggling_buttons"，則載入另一個模組toggling_buttons.js。
示意圖
程式邏輯流程圖
+----------------------------+
| document.querySelector() | --> 找到 <div data-page="switching_tab">
+----------------------------+
|
v
+----------------------------+
| pageName = "switching_tab" | --> 從 dataset 讀取值
+----------------------------+
|
v
+----------------------------+
| import("./switching_tab.js") | --> 動態加載模組
+----------------------------+
|
v
+----------------------------+
| module.init() | --> 初始化模組功能
+----------------------------+
DOM 與程式的交互流程
HTML:
<div data-page="switching_tab"></div>
程式運行：
1. 查找 [data-page] 元素 → <div data-page="switching_tab">
2. 讀取 data-page 值，pageName = "switching_tab"
3. 動態載入 switching_tab.js
4. 成功載入後執行 module.init()
模組導入流程：
┌──────────────────────────────────────┐
│ 主程式 (app.js) │
│ ┌──────────────────────────────────┐ │
│ │ 切換標籤模組 (switching_tab.js) │ │
│ │ - exports.init() │ │
│ └──────────────────────────────────┘ │
└──────────────────────────────────────┘
動態載入的優勢
- 性能優化
- 僅在需要時載入功能模組，減少初始頁面的資源加載量，提升頁面速度。
- 模組化設計
- 每個模組專注於特定功能，便於維護與擴展。
- 減少全域污染
- 模組只在需要的頁面加載，避免不必要的全域變數干擾。
完整範例
HTML 文件
<div data-page="switching_tab">
<div class="tab">Tab Content</div>
</div>主應用：app.js
const pageElement = document.querySelector('[data-page]');
const pageName = pageElement ? pageElement.dataset.page : null;
if (pageName === "switching_tab") {
import("./scripts/switching_tab.js").then((module) => {
module.init();
});
} else if (pageName === "toggling_buttons") {
import("./scripts/toggling_buttons.js").then((module) => {
module.init();
});
}
切換標籤模組：switching_tab.js
export function init() {
console.log("Switching tab functionality initialized!");
// 其他切換標籤邏輯...
}
小結
透過動態載入技術，可以根據 HTML 的 data-page 屬性靈活加載對應的模組。
這種方式不僅提高了性能，還使代碼更具模組化和可維護性。
本篇文章的 ASCII 示意圖和完整範例，希望能幫助新手快速掌握動態載入的設計理念與實踐！
