javascript-pro

JavaScript Pro

何時使用此技能

• 建構原生 JavaScript 應用程式
• 實作 async/await 模式和 Promise 處理
• 使用現代模組系統（ESM/CJS）
• 最佳化瀏覽器效能與記憶體使用
• 開發 Node.js 後端服務
• 實作 Web Workers、Service Workers 或瀏覽器 API

核心工作流程

1. 分析需求 — 檢查 package.json、模組系統、Node 版本、瀏覽器目標；確認 .js/.mjs/.cjs 慣例
2. 設計架構 — 規劃模組、非同步流程和錯誤處理策略
3. 實作 — 使用 ES2023+ 程式碼搭配適當的模式與最佳化
4. 驗證 — 執行 linter（eslint --fix）；如果 linter 失敗，修正所有回報的問題並重新執行，然後再繼續。使用 DevTools 或 --inspect 檢查記憶體洩漏，確認 bundle 大小；如果發現洩漏，先解決再繼續
5. 測試 — 使用 Jest 撰寫全面的測試，達到 85% 以上的覆蓋率；如果覆蓋率不足，補上遺漏的案例並重新執行。確認沒有未處理的 Promise 拒絕

參考指南

根據情境載入詳細指引：

主題	參考文件	載入時機
現代語法	references/modern-syntax.md	ES2023+ 功能、可選鏈、私有欄位
非同步模式	references/async-patterns.md	Promise、async/await、錯誤處理、事件循環
模組	references/modules.md	ESM vs CJS、動態匯入、package.json exports
瀏覽器 API	references/browser-apis.md	Fetch、Web Workers、Storage、IntersectionObserver
Node 基礎	references/node-essentials.md	fs/promises、streams、EventEmitter、worker threads

限制

必須做

• 僅使用 ES2023+ 功能
• 使用 X | null 或 X | undefined 模式
• 使用可選鏈（?.）和空值合併運算子（??）
• 所有非同步操作使用 async/await
• 新專案使用 ESM（import/export）
• 使用 try/catch 實作適當的錯誤處理
• 為複雜函式加上 JSDoc 註解
• 遵循函數式程式設計原則

禁止做

• 使用 var（一律使用 const 或 let）
• 使用基於回呼的模式（偏好 Promise）
• 在同一個模組中混用 CommonJS 和 ESM
• 忽略記憶體洩漏或效能問題
• 在非同步函式中跳過錯誤處理
• 在 Node.js 中使用同步 I/O
• 修改函式參數
• 在瀏覽器中建立阻塞操作

關鍵模式與範例

Async/Await 錯誤處理

// ✅ 正確 — 明確處理非同步錯誤
async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } catch (err) {
    console.error("fetchUser failed:", err);
    return null;
  }
}

// ❌ 錯誤 — 未處理的拒絕，沒有 null 保護
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

可選鏈與空值合併

// ✅ 正確
const city = user?.address?.city ?? "Unknown";

// ❌ 錯誤 — 如果 address 為 undefined 會拋出錯誤
const city = user.address.city || "Unknown";

ESM 模組結構

// ✅ 正確 — 命名匯出，函式庫不只有預設匯出
// utils/math.mjs
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// consumer.mjs
import { add } from "./utils/math.mjs";

// ❌ 錯誤 — 在 ESM 中混用 require()
const { add } = require("./utils/math.mjs");

避免 var / 偏好 const

// ✅ 正確
const MAX_RETRIES = 3;
let attempts = 0;

// ❌ 錯誤
var MAX_RETRIES = 3;
var attempts = 0;

輸出範本

實作 JavaScript 功能時，提供：

1. 帶有乾淨匯出的模組檔案
2. 具有全面覆蓋率的測試檔案
3. 公開 API 的 JSDoc 文件
4. 簡要說明所使用的模式

文件