在 JavaScript 中编写简洁且可维护的代码的最佳实践-js教程-PHP中文网

Best Practices for Writing Clean and Maintainable Code in JavaScript

干净且可维护的代码对于任何软件项目的长期成功和可扩展性至关重要。它改善了团队成员之间的协作，减少了错误的可能性，并使代码更易于理解、测试和维护。在这篇博文中，我们将探索一些用 JavaScript 编写干净且可维护的代码的最佳实践，并提供代码示例来说明每种实践。

1. 一致的代码格式：

一致的代码格式对于可读性至关重要。它可以帮助开发人员更快地理解代码并改善协作。使用一致且广泛接受的代码风格指南，例如 ESLint 提供的指南，并配置您的编辑器或 IDE 以自动相应地格式化代码。
示例：

// Bad formatting
function calculateSum(a,b){
    return a + b;
}

// Good formatting
function calculateSum(a, b) {
  return a + b;
}

登录后复制

2. 描述性变量和函数名称：

为变量、函数和类使用描述性且有意义的名称。避免使用可能会让其他人感到困惑的单字母变量名称或缩写。这种做法增强了代码的可读性并减少了注释的需要。
示例：

// Bad naming
const x = 5;

// Good naming
const numberOfStudents = 5;

登录后复制

3.模块化和单一职责原则：

遵循函数和类的单一职责原则。每个函数或类都应该有一个单一的、明确定义的职责。这种方法提高了代码的可重用性，并使其更易于测试、调试和维护。
示例：

// Bad practice
function calculateSumAndAverage(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  const average = sum / numbers.length;
  return [sum, average];
}

// Good practice
function calculateSum(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  return sum;
}

function calculateAverage(numbers) {
  const sum = calculateSum(numbers);
  const average = sum / numbers.length;
  return average;
}

登录后复制

4.避免全局变量：

尽量减少全局变量的使用，因为它们可能导致命名冲突并使代码更难以推理。相反，请将代码封装在函数或模块中，并尽可能使用局部变量。
示例：

// Bad practice
let count = 0;

function incrementCount() {
  count++;
}

// Good practice
function createCounter() {
  let count = 0;

  function incrementCount() {
    count++;
  }

  return {
    incrementCount,
    getCount() {
      return count;
    }
  };
}

const counter = createCounter();
counter.incrementCount();

登录后复制

5. 错误处理和鲁棒性：

优雅地处理错误并提供有意义的错误消息或适当地记录它们。验证输入、处理边缘情况并使用适当的异常处理技术，例如 try-catch 块。
示例：

// Bad practice
function divide(a, b) {
  return a / b;
}

// Good practice
function divide(a, b) {
  if (b === 0) {
    throw new Error('Cannot divide by zero');
  }
  return a / b;
}

try {
  const result = divide(10, 0);
  console.log(result);
} catch (error) {
  console.error(error.message);
}

登录后复制

6. 避免代码重复：

代码重复不仅会导致代码臃肿，还会使维护和错误修复变得更加困难。将可重用代码封装到函数或类中，并努力采用 DRY（不要重复自己）方法。如果您发现自己在复制和粘贴代码，请考虑将其重构为可重用的函数或模块。
示例：

// Bad formatting
function calculateSum(a,b){
    return a + b;
}

// Good formatting
function calculateSum(a, b) {
  return a + b;
}

登录后复制

7. 明智地使用评论：

虽然干净的代码应该是不言自明的，但在某些情况下需要注释来提供额外的上下文或澄清复杂的逻辑。谨慎使用注释并使其简洁且有意义。专注于解释“为什么”而不是“如何”。
示例：

// Bad naming
const x = 5;

// Good naming
const numberOfStudents = 5;

登录后复制

8.优化性能：

高效的代码可以提高应用程序的整体性能。请注意不必要的计算、过多的内存使用和潜在的瓶颈。使用适当的数据结构和算法来优化性能。使用 Chrome DevTools 等工具分析和测量您的代码，以识别性能问题并相应地解决它们。
示例：

// Bad practice
function calculateSumAndAverage(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  const average = sum / numbers.length;
  return [sum, average];
}

// Good practice
function calculateSum(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  return sum;
}

function calculateAverage(numbers) {
  const sum = calculateSum(numbers);
  const average = sum / numbers.length;
  return average;
}

登录后复制

9. 编写单元测试：

单元测试对于确保代码的正确性和可维护性至关重要。编写自动化测试以涵盖不同的场景和边缘情况。这有助于及早发现错误，促进代码重构，并增强修改现有代码的信心。使用 Jest 或 Mocha 等测试框架来编写和运行测试。
示例（使用 Jest）：

// Bad practice
let count = 0;

function incrementCount() {
  count++;
}

// Good practice
function createCounter() {
  let count = 0;

  function incrementCount() {
    count++;
  }

  return {
    incrementCount,
    getCount() {
      return count;
    }
  };
}

const counter = createCounter();
counter.incrementCount();

登录后复制

10.使用函数式编程概念：

函数式编程概念，例如不变性和纯函数，可以使您的代码更可预测且更易于推理。拥抱不可变的数据结构，并尽可能避免改变对象或数组。编写没有副作用的纯函数，并为相同的输入产生相同的输出，使它们更易于测试和调试。
示例：

// Bad practice
function divide(a, b) {
  return a / b;
}

// Good practice
function divide(a, b) {
  if (b === 0) {
    throw new Error('Cannot divide by zero');
  }
  return a / b;
}

try {
  const result = divide(10, 0);
  console.log(result);
} catch (error) {
  console.error(error.message);
}

登录后复制

11. 使用 JSDoc 记录代码

使用 JSDoc 来记录您的函数、类和模块。这有助于其他开发人员理解您的代码并使其更易于维护。

// Bad practice
function calculateAreaOfRectangle(length, width) {
  return length * width;
}

function calculatePerimeterOfRectangle(length, width) {
  return 2 * (length + width);
}

// Good practice
function calculateArea(length, width) {
  return length * width;
}

function calculatePerimeter(length, width) {
  return 2 * (length + width);
}

登录后复制

12. 使用 linter 和格式化程序

使用 ESLint 和 Prettier 等工具来强制执行一致的代码风格，并在潜在问题出现之前将其捕获。

// Bad practice
function calculateTotalPrice(products) {
  // Loop through products
  let totalPrice = 0;
  for (let i = 0; i < products.length; i++) {
    totalPrice += products[i].price;
  }
  return totalPrice;
}

// Good practice
function calculateTotalPrice(products) {
  let totalPrice = 0;
  for (let i = 0; i < products.length; i++) {
    totalPrice += products[i].price;
  }
  return totalPrice;
  // The total price is calculated by summing up the prices of all the products in the array.
}

登录后复制