專案重構與最佳化

重構（Refactoring）是開發過程中的重要步驟，目的是讓程式碼結構更加清晰，方便未來的維護與擴展。這不僅僅是簡單的格式調整，還包括模組化與抽象程式碼邏輯，提升效能和流暢度。

模組化功能
在專案重構的過程中，我們首先要將程式的功能分離，讓每一個模組負責單一的功能。例如，Todo List 中的資料儲存功能可以拆分成獨立模組，專門負責與localStorage的交互。篩選、顯示與狀態切換等功能也可以各自拆分。這樣做的好處是當需要修改某一部分功能時，只需要調整對應的模組，避免影響整體

// 模組化儲存功能
function saveToLocal(todos) {
  localStorage.setItem('todos', JSON.stringify(todos));
}

function getFromLocal() {
  return JSON.parse(localStorage.getItem('todos')) || [];
}

提升效能
接下來，我們進行程式效能的優化。例如，對於頻繁的DOM操作，可以透過“虛擬DOM”的理念來減少直接操作DOM的次數。這可以大幅減少重繪與重排，提升渲染效能。對於大型資料集的處理，可以考慮使用節流或防抖技術來優化頻繁的事件處理。

// 節流函數，限制事件觸發頻率
function throttle(func, limit) {
  let inThrottle;
  return function () {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

提升可讀性
重構過程中，程式碼的可讀性至關重要。我們可以通過統一變數命名規則、添加清晰的註解來提升可讀性。變數名稱應該具備描述性，讓人一眼就能理解其用途，保持程式碼簡潔，不做不必要的複雜處理。

// 清晰的命名與註解
let todoItems = []; // 待辦事項的陣列

// 新增待辦事項到清單中
function addTodoItem(item) {
  todoItems.push(item);
  saveToLocal(todoItems);
}

減少重複程式碼
重構的一個重要步驟是去除重複程式碼。重複的程式碼不僅浪費資源，還容易引發錯誤。我們可以將常見的程式邏輯抽象成通用的函數，避免多次重複實作同樣的功能。