refactoring

name	refactoring
description	本專案 (vanilla JS Chrome extension) 的重構指南：辨識 code smell、應用 Refactoring.guru 原則於 ES Modules、Side Panel、modules/ui Facade 模式等場景。當使用者提到「refactor、重構、改善程式碼、code smell、拆模組」時觸發。

Refactoring Skill

這項技能旨在幫助識別程式碼異味 (Code Smells) 並應用重構技術 (Refactoring Techniques) 來提升程式碼品質。基礎原則源自 Refactoring.guru，並針對本 Chrome 擴充功能專案的特性 (Vanilla JS, Modules, Side Panel) 進行了調整。

核心原則

1. Clean Code (整潔程式碼): 易於閱讀、理解和維護。
2. Dirty Code (骯髒程式碼): 充滿 "異味"，難以維護和擴充。
3. 小步前進 (Baby Steps): 每次只做一小步修改，並確保測試通過。

流程 (Process)

1. 識別異味 (Identify Smells): 觀察程式碼，找出符合 "Code Smells" 的特徵。
2. 選擇技術 (Select Technique): 根據異味類型，選擇合適的重構技術。
3. 執行重構 (Refactor): 對程式碼進行修改。
4. 驗證 (Verify): 確保功能未受影響 (Manual Test / Unit Test)。

---

常見代碼異味 (Code Smells) 與對策

1. Bloaters (膨脹者)

程式碼、方法或類別變得過於龐大，難以管理。

• Long Method (過長函式)

  • 徵兆: 一個函式超過 30-50 行，或包含多個層次的巢狀結構。
  • 對策: Extract Method (提煉函式)。將部分邏輯移至新函式。
  • 專案情境: sidepanel.js 中的大型事件監聽器，或 render() 函式。

• Large Class / Module (過大類別/模組)

  • 徵兆: 一個檔案 (如 modules/uiManager.js) 承擔過多指責。
  • 對策: Extract Class/Module (提煉類別/模組)。按功能拆分。

• Long Parameter List (過長參數列)

  • 徵兆: 函式接收超過 3-4 個參數。
  • 對策: Introduce Parameter Object (引入參數物件)。傳遞一個 Object 配置。

2. Object-Orientation Abusers (物件導向濫用者)

錯誤地應用 OO 原則。

• Switch Statements (Switch 語句濫用)
  • 徵兆: 複雜的 switch 或 if-else 鏈，用於判斷類型執行不同邏輯。
  • 對策: Replace Conditional with Polymorphism (以多型取代條件式)。但在 Vanilla JS 中，可使用 Object Map 或 Strategy Pattern。

3. Change Preventers (修改阻礙者)

修改一處需要同時修改多處。

• Shotgun Surgery (霰彈式修改)
  • 徵兆: 每逢要加一個小功能，就要改動 5-6 個檔案。
  • 對策: Move Method/Field (搬移函式/欄位)。將相關邏輯集中到單一模組。

4. Dispensables (可有可無者)

無用或多餘的程式碼。

• Comments (過多註解)
  • 徵兆: 用註解來解釋 "這段程式碼在做什麼" (而不是 "為什麼這麼做")。
  • 對策: Rename Method/Variable (重新命名)。讓程式碼自解釋。
• Duplicate Code (重複程式碼)
  • 徵兆: 相同的邏輯出現在兩個以上的地方。
  • 對策: Extract Method 並共用。
  • 專案情境: 多個 Renderer 中的 create element 邏輯 -> 統一使用 modules/ui/elements.js 或工具函式。

---

常用重構技術 (Techniques)

Composing Methods (組裝函式)

• Extract Method: 選中一段代碼 -> 獨立為新函式 -> 命名 ->替換原處調用。
• Inline Method: 當函式本體比名稱更清楚時，將其塞回調用處。
• Replace Temp with Query: 將臨時變數替換為函式調用，減少局部變數干擾。

Organizing Data (組織數據)

• Encapsulate Field: (在 JS 中較少強制) 使用 getter/setter 封裝變數存取。
• Replace Magic Number with Symbolic Constant: 將 86400 替換為 SECONDS_IN_DAY。

Simplifying Conditional Expressions (簡化條件式)

• Decompose Conditional: 將複雜的 if (a && b || c) 提煉為 if (isSpecialCase())。
• Consolidate Conditional Expression: 合併結果相同的條件檢查。
• Replace Nested Conditional with Guard Clauses: 使用 "衛句" (Guard Clauses) 盡早 return，減少巢狀。

---

專案特定重構指南 (Arc-Like Chrome Extension)

1. DOM 操作分離:

   • 避免在業務邏輯 (modules/stateManager.js) 中直接操作 DOM。
   • 確保所有 DOM 生成都在 *Renderer.js 模組中。
   • 確保所有 DOM 查詢都在 modules/ui/elements.js (如果可能)。

2. 狀態管理:

   • 避免依賴 window.globalVar。使用 stateManager 模組來保存跨模組狀態。

3. Chrome API 封裝:

   • 不要在 UI 元件中直接呼叫 chrome.bookmarks.*。應透過 modules/apiManager.js 呼叫，以便未來替換或測試。

4. 樣式一致性:

   • 避免使用 element.style.color = 'red'。應使用 CSS class (element.classList.add('error')) 搭配 sidepanel.css / options.css。

如何使用此 Skill

當 User 要求 "Refactor this file" 或 "Clean up this code" 時：

1. Check: 閱讀檔案，對照上述 Code Smells 清單。
2. Plan: 提出重構計畫 (例如: "我將把這個 100 行的 render 函式拆解為 3 個子函式")。
3. Execute: 執行修改。
4. Verify: 確保功能一致。