这几个让代码清新的魔法，让领导追着给我涨薪

首发于公众号 前端从进阶到入院，欢迎关注。

清晰易维护的代码对于任何软件项目的长期成功和可扩展性至关重要。它提升团队成员之间的协作效率，减少错误的可能性，并使代码更易于理解、测试和维护。在本博文中，我们将探讨一些编写清晰易维护的 JavaScript 代码的最佳实践，并提供代码示例以阐明每个实践方法。

1. 一致的代码格式：

一致的代码格式对于可读性非常重要。它有助于开发人员更快地理解代码，提升协作效果。使用一致且被广泛接受的代码风格指南，比如 ESLint 提供的指南，并配置你的编辑器或 IDE 以自动格式化代码。 示例：

// 错误的格式化
function calculateSum(a,b){return a+b; }

// 正确的格式化
function calculateSum(a, b) {
  return a + b;
}

2. 有意义的变量和函数命名：

为变量、函数和类使用有意义且描述性的名称。避免使用单个字母或容易引起他人困惑的缩写。这种做法提高了代码的可读性，并减少了对注释的需求。 示例：

// 错误的命名
const x = 5;

// 正确的命名
const numberOfStudents = 5;

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

遵循单一职责原则，为函数和类设定单一、明确的职责。这种做法提高了代码的可重用性，并使其更易于测试、调试和维护。 示例：

// 错误的做法
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];
}

// 正确的做法
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. 避免全局变量：

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

// 错误的做法
let count = 0;

function incrementCount() {
  count++;
}

// 正确的做法
function createCounter() {
  let count = 0;

  function incrementCount() {


    count++;
  }

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

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

5. 错误处理和鲁棒性：

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

// 错误的做法
function divide(a, b) {
  return a / b;
}

// 正确的做法
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（Don't Repeat Yourself）原则。如果发现自己在复制粘贴代码，请考虑将其重构为可重用的函数或模块。 示例：

// 错误的做法
function calculateAreaOfRectangle(length, width) {
  return length * width;
}

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

// 正确的做法
function calculateArea(length, width) {
  return length * width;
}

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

7. 明智地使用注释：

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

// 错误的做法
function calculateTotalPrice(products) {
  // 遍历产品
  let totalPrice = 0;
  for (let i = 0; i < products.length; i++) {
    totalPrice += products[i].price;
  }
  return totalPrice;
}

// 正确的做法
function calculateTotalPrice(products) {
  let totalPrice = 0;
  for (let i = 0; i < products.length; i++) {
    totalPrice += products[i].price;
  }
  return totalPrice;
  // 总价格通过将数组中所有产品的价格相加来计算。
}

8. 优化性能：

高效的代码提升了应用程序的整体性能。注意不必要的计算、过度的内存使用和潜在的瓶颈。使用适当的数据结构和算法来优化性能。使用类似 Chrome DevTools 的工具对代码进行性能分析和测量，以识别并相应地解决性能问题。

示例：

// 错误的做法
function findItemIndex(array, target) {
  for (let i = 0; i < array.length; i++) {
    if (array[i] === target) {
      return i;
    }
  }
  return -1;
}

// 正确的做法
function findItemIndex(array, target) {
  let left = 0;
  let right = array.length - 1;

  while (left <= right) {
    const mid = Math.floor((left + right) / 2);

    if (array[mid] === target) {
      return mid;
    }

    if (array[mid] < target) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }

  return -1;
}

9. 编写单元测试：

单元测试对于确保代码的正确性和可维护性非常重要。编写自动化测试以覆盖不同的场景和边界情况。这有助于尽早发现错误，便于代码重构，并对修改现有代码充满信心。使用像 Jest 或 Mocha 这样的测试框架来编写和运行测试。 示例（使用 Jest）：

// 代码
function sum(a, b) {
  return a + b;
}

// 测试
test('sum 函数正确地相加两个数字', () => {
  expect(sum(2, 3)).toBe(5);
  expect(sum(-1, 5)).toBe(4);
  expect(sum(0, 0)).toBe(0);
});

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

函数式编程概念，如不可变性和纯函数，可以使代码更可预测且更易于理解。拥抱不可变数据结构，并尽量避免对对象或数组进行突变。编写无副作用且对于相同的输入产生相同输出的纯函数，这样更容易进行测试和调试。 示例：

// 错误的做法
let total = 0;

function addToTotal(value) {
  total += value;
}

// 正确的做法
function addToTotal(total, value) {
  return total + value;
}

11. 使用 JSDoc 文档化代码：

使用 JSDoc 来为函数、类和模块编写文档。这有助于其他开发人员理解你的代码，并使其更易于维护。

/**
 * 将两个数字相加。
 * @param {number} a - 第一个数字。
 * @param {number} b - 第二个数字。
 * @returns {number} 两个数字的和。
 */
function add(a, b) {
  return a + b;
}

12. 使用代码检查工具和格式化工具：

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

// .eslintrc.json
{
  "extends": ["eslint:recommended", "prettier"],
  "

plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

// .prettierrc.json
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

结论：

编写清晰且易于维护的代码不仅仅是个人偏好的问题，而是一项专业责任。通过遵循本博文中概述的最佳实践，您可以提高 JavaScript 代码的质量，使其更易于理解、维护和协作，并确保软件项目的长期成功。在追求清晰且易于维护的代码时，请牢记一致性、可读性、模块化和错误处理这些关键原则。祝你编码愉快！

原文：dev.to/wizdomtek/b…

翻译 / 润色：ssh

首发于公众号前端从进阶到入院，欢迎关注。