實現更簡潔、高效程式碼的基本 JavaScript 重構技術

作為暢銷書作家，我邀請您在亞馬遜上探索我的書籍。不要忘記在 Medium 上關注我並表示您的支持。謝謝你！您的支持意味著全世界！

JavaScript 重構對於希望提高程式碼品質和可維護性的開發人員來說是一項至關重要的技能。多年來我參與了許多項目，我發現持續實施這些技術可以帶來更健壯、更有效率的程式碼庫。

程式碼氣味檢測通常是重構過程的第一步。我依靠 ESLint 和 SonarQube 等工具來識別程式碼中的潛在問題。這些工具幫助我發現未使用的變數、複雜的函數和不一致的樣式等問題。以下是我如何在專案中設定 ESLint 的範例：

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    // Custom rules
    'no-unused-vars': 'error',
    'max-len': ['error', { code: 100 }],
    'complexity': ['error', 10],
  },
};

一旦確定了潛在問題，我就會轉向特定的重構技術。提取法是我使用的最常見和最有效的技術之一。它涉及將大型、複雜的功能分解為更小、更集中的功能。這不僅提高了可讀性，還使程式碼更可重複使用且更易於測試。

考慮這個計算購物車中商品總價的函數範例：

function calculateTotalPrice(items) {
  let total = 0;
  for (let item of items) {
    let price = item.price;
    if (item.onSale) {
      price *= 0.9;
    }
    if (item.quantity > 5) {
      price *= 0.95;
    }
    total += price * item.quantity;
  }
  return total;
}

我們可以使用萃取方法技術來重建它：

function calculateTotalPrice(items) {
  return items.reduce((total, item) => total + calculateItemPrice(item), 0);
}

function calculateItemPrice(item) {
  let price = applyDiscounts(item.price, item);
  return price * item.quantity;
}

function applyDiscounts(price, item) {
  if (item.onSale) price *= 0.9;
  if (item.quantity > 5) price *= 0.95;
  return price;
}

這個重構版本更具可讀性，並且可以更輕鬆地測試各個元件。

我常用的另一個強大技巧是用多態性取代條件。在處理根據物件類型而變化的複雜條件邏輯時，此方法特別有用。我們可以使用物件導向的原則來創建更靈活和可擴展的解決方案，而不是使用 if-else 語句或 switch case。

以下是我如何重構根據產品類型計算運費的函數的範例：

// Before refactoring
function calculateShippingCost(product) {
  if (product.type === 'book') {
    return product.weight * 0.5;
  } else if (product.type === 'electronics') {
    return product.weight * 0.8 + 2;
  } else if (product.type === 'clothing') {
    return product.weight * 0.3;
  }
  return product.weight * 0.6; // Default shipping cost
}

// After refactoring
class Product {
  constructor(weight) {
    this.weight = weight;
  }

  calculateShippingCost() {
    return this.weight * 0.6;
  }
}

class Book extends Product {
  calculateShippingCost() {
    return this.weight * 0.5;
  }
}

class Electronics extends Product {
  calculateShippingCost() {
    return this.weight * 0.8 + 2;
  }
}

class Clothing extends Product {
  calculateShippingCost() {
    return this.weight * 0.3;
  }
}

// Usage
const book = new Book(2);
console.log(book.calculateShippingCost()); // 1

const electronics = new Electronics(3);
console.log(electronics.calculateShippingCost()); // 4.4

這種多型方法可以更輕鬆地添加新產品類型，而無需修改現有程式碼，遵循開放/封閉原則。

引入參數物件技術在處理具有多個參數的函數時特別有用。透過將相關參數分組到單一物件中，我們可以簡化函數簽章並使我們的程式碼更易於維護。

以下是我如何重構建立使用者帳戶的函數的範例：

// Before refactoring
function createUser(firstName, lastName, email, password, birthDate, country, city, zipCode) {
  // User creation logic
}

// After refactoring
function createUser(userDetails, address) {
  // User creation logic
}

// Usage
createUser(
  { firstName: 'John', lastName: 'Doe', email: 'john@example.com', password: 'securepass', birthDate: '1990-01-01' },
  { country: 'USA', city: 'New York', zipCode: '10001' }
);

這個重構版本不僅更具可讀性，而且更靈活，因為在不更改函數簽章的情況下更容易新增或刪除欄位。

刪除重複程式碼是我始終牢記的重構的關鍵方面。重複的程式碼可能會導致不一致並使維護變得更加困難。我經常將通用功能提取到共享函數或模組中。

這是我如何重構 React 元件中重複程式碼的範例：

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    // Custom rules
    'no-unused-vars': 'error',
    'max-len': ['error', { code: 100 }],
    'complexity': ['error', 10],
  },
};

這種重構消除了重複並使程式碼更易於維護和一致。

重新命名變數和函數是我經常使用的一種簡單而強大的技術。清晰、描述性的名稱可以顯著增強程式碼理解並作為自我文件的一種形式。我總是努力使用能夠準確描述變數或函數的目的或行為的名稱。

例如，代替：

function calculateTotalPrice(items) {
  let total = 0;
  for (let item of items) {
    let price = item.price;
    if (item.onSale) {
      price *= 0.9;
    }
    if (item.quantity > 5) {
      price *= 0.95;
    }
    total += price * item.quantity;
  }
  return total;
}

我會重構為：

function calculateTotalPrice(items) {
  return items.reduce((total, item) => total + calculateItemPrice(item), 0);
}

function calculateItemPrice(item) {
  let price = applyDiscounts(item.price, item);
  return price * item.quantity;
}

function applyDiscounts(price, item) {
  if (item.onSale) price *= 0.9;
  if (item.quantity > 5) price *= 0.95;
  return price;
}

這個簡單的變更使函數的目的立即清晰，無需額外註解。

最後，簡化複雜表達式是我用來使我的程式碼更具可讀性和可維護性的技術。使用中間變數或函數將複雜的邏輯表達式分解為更小、更易於管理的部分可以大大提高程式碼的清晰度。

這是我如何重構複雜條件的範例：

// Before refactoring
function calculateShippingCost(product) {
  if (product.type === 'book') {
    return product.weight * 0.5;
  } else if (product.type === 'electronics') {
    return product.weight * 0.8 + 2;
  } else if (product.type === 'clothing') {
    return product.weight * 0.3;
  }
  return product.weight * 0.6; // Default shipping cost
}

// After refactoring
class Product {
  constructor(weight) {
    this.weight = weight;
  }

  calculateShippingCost() {
    return this.weight * 0.6;
  }
}

class Book extends Product {
  calculateShippingCost() {
    return this.weight * 0.5;
  }
}

class Electronics extends Product {
  calculateShippingCost() {
    return this.weight * 0.8 + 2;
  }
}

class Clothing extends Product {
  calculateShippingCost() {
    return this.weight * 0.3;
  }
}

// Usage
const book = new Book(2);
console.log(book.calculateShippingCost()); // 1

const electronics = new Electronics(3);
console.log(electronics.calculateShippingCost()); // 4.4

這個重構版本更容易閱讀和理解，並且每個條件都可以獨立測試。

根據我的經驗，持續應用這些重構技術可以顯著提升程式碼品質。它使程式碼更容易理解、維護和擴展。然而，重要的是要記住重構是一個持續的過程。隨著需求的變化和新功能的添加，我們需要不斷審查和重構我們的程式碼以保持其乾淨和高效。

我從常規重構中發現的主要好處之一是它使添加新功能或修復錯誤變得更加容易。當程式碼結構良好且易於理解時，可以更快地找到需要更改的區域並進行必要的修改，而不會引入新的錯誤。

此外，重構通常會帶來效能提升。透過簡化複雜的邏輯並消除冗餘，我們通常可以使程式碼運行得更快並使用更少的資源。這在 JavaScript 中尤其重要，因為效能會對使用者體驗產生重大影響，尤其是在瀏覽器環境中。

我發現重構特別有價值的另一個面向是它如何促進團隊內的知識分享。當程式碼乾淨且結構良好時，其他開發人員更容易理解和使用。這可以帶來更好的協作，並且可以大幅減少新團隊成員入職所需的時間。

也值得注意的是，雖然這些技術很強大，但應謹慎應用。過度設計與設計不足同樣會帶來問題。我們的目標是找到適當的平衡 - 讓程式碼盡可能簡單明了，但又不簡單。

總之，掌握這些 JavaScript 重構技術對於我作為開發人員的職涯來說非常寶貴。他們幫助我編寫了更好的程式碼，更有效率地工作，並與我的團隊更有效地協作。雖然有時很容易為了趕上最後期限而匆忙進行開發，但我發現，從長遠來看，花時間定期重構是有回報的。它帶來更強大、可維護的程式碼庫，可以適應不斷變化的需求並隨著專案的成長而擴展。隨著我們不斷突破 JavaScript 可能性的界限，這些重構技術仍將是每個開發人員工具包中不可或缺的工具。

---

101 本書

101 Books是一家由人工智慧驅動的出版公司，由作家Aarav Joshi共同創立。透過利用先進的人工智慧技術，我們將出版成本保持在極低的水平——一些書籍的價格低至 4 美元——讓每個人都能獲得高品質的知識。

查看我們的書Golang Clean Code，亞馬​​遜上有售。

請繼續關注更新和令人興奮的消息。購買書籍時，搜尋 Aarav Joshi 以尋找更多我們的書籍。使用提供的連結即可享受特別折扣！

我們的創作

一定要看看我們的創作：

投資者中心 | 投資者中央西班牙語 | 投資者中德意志 | 智能生活 | 時代與迴響 | 令人費解的謎團 | 印度教 | 菁英發展 | JS學校

---

我們在媒體上

科技無尾熊洞察 | 時代與迴響世界 | 投資人中央媒體 | 令人費解的謎團 | | 令人費解的謎團 | >科學與時代媒介 |

現代印度教

以上是實現更簡潔、高效程式碼的基本 JavaScript 重構技術的詳細內容。更多資訊請關注PHP中文網其他相關文章！