在《JavaScript DOM 編程藝術》第十章示例中，若將 addLoadEvent.js 放在第二個引入，功能失效；放在第一個則正常。
JavaScript 引擎按順序解析執行每個 <script> 標籤。若後續腳本依賴前置腳本定義的函數、變量，順序顛倒會導致 ReferenceError。
addLoadEvent.js 定義了 addLoadEvent(fn) 工具函數。addLoadEvent(init) 註冊頁面加載回調。addLoadEvent 尚未定義 → 報錯中斷。| 方案 | 適用場景 | 優缺點 |
|---|---|---|
調整 <script> 順序 | 簡單頁面、少量腳本 | 直觀但維護成本高，易出錯 |
使用 defer 屬性 | 外部腳本、需按順序執行 | HTML5 標準，延遲到 DOMContentLoaded 前按順序執行 |
使用 async + 模塊化 | 現代項目、獨立模塊 | 並行下載，順序不定，需配合 ES Module import/export |
| 打包工具 | 生產環境、大型應用 | Webpack/Rollup 自動處理依賴圖，產出單文件 |
<!-- 依賴庫先載入，defer 保證順序 -->
<script src="lib/addLoadEvent.js" defer></script>
<script src="app/main.js" defer></script>
或採用 ES Module：
<script type="module">
import { addLoadEvent } from './lib/addLoadEvent.js';
addLoadEvent(init);
</script>
