将“Clean Code”原则应用于 JavaScript

2023-12-01 10:34:02

编写整洁、可维护的 JavaScript 代码：遵循《代码整洁之道》原则

软件开发世界中有一句古老的格言：“编写整洁的代码是一个美德”。编写可读、可维护的代码不仅仅是编程，它是一门艺术形式。罗伯特·C·马丁的《代码整洁之道》一书为开发者提供了宝贵的见解，帮助他们在各种编程语言中编写整洁的代码，包括 JavaScript。

在这篇博客文章中，我们将深入探讨如何将“代码整洁”原则应用于 JavaScript，着重介绍提高可读性、可维护性和可测试性的策略。

清晰、简洁的函数

《代码整洁之道》强调避免编写庞大、复杂的函数。相反，将函数分解成较小的、易于理解的代码块。每个函数只专注于一项任务，并使用有意义的名称命名。

// 糟糕的示例
function doEverything() {
  // 执行大量操作
}

// 良好的示例
function calculateTotal(items) {
  return items.reduce((acc, item) => acc + item.price, 0);
}

function formatDate(date) {
  return date.toLocaleDateString();
}

有意义的命名

变量、函数和类的名称应清晰、简洁，能反映其用途。避免使用缩写或含糊不清的名称。使用能准确其用途的名称，即使这会略微增加代码行数。

// 糟糕的示例
const num = 10;

// 良好的示例
const totalItems = 10;

使用适当的抽象

抽象允许您隐藏实现细节，使代码更易于理解和维护。使用接口、抽象类和设计模式来抽象出复杂的逻辑，使其更容易测试和重用。

// 糟糕的示例
class User {
  constructor(id, name, email) {
    this.id = id;
    this.name = name;
    this.email = email;
  }

  getName() {
    return this.name;
  }

  getEmail() {
    return this.email;
  }
}

// 良好的示例
interface User {
  getName(): string;
  getEmail(): string;
}

class ConcreteUser implements User {
  constructor(private id: number, private name: string, private email: string) {}

  getName(): string {
    return this.name;
  }

  getEmail(): string {
    return this.email;
  }
}

单元测试

单元测试对于确保代码的正确性和可维护性至关重要。使用单元测试框架（例如 Jest）来测试函数和类，验证其在不同输入下的行为。单元测试可以快速发现错误，并使代码重构变得更容易。

import { expect } from 'chai';

describe('User', () => {
  it('should return the user name', () => {
    const user = new ConcreteUser(1, 'John Doe', 'johndoe@example.com');
    expect(user.getName()).to.equal('John Doe');
  });

  it('should return the user email', () => {
    const user = new ConcreteUser(1, 'John Doe', 'johndoe@example.com');
    expect(user.getEmail()).to.equal('johndoe@example.com');
  });
});

代码重构

随着代码库的增长，重构对于保持可读性和可维护性至关重要。重构是指在不改变代码行为的情况下改进其结构的过程。它包括提取方法和内联临时变量等重构技术，可以帮助清理代码并使其更易于理解。

// 重构前
function calculateTotal(items) {
  const total = items.reduce((acc, item) => acc + item.price, 0);
  return total + calculateTax(total);
}

// 重构后
function calculateTotal(items) {
  const subtotal = items.reduce((acc, item) => acc + item.price, 0);
  const tax = calculateTax(subtotal);
  return subtotal + tax;
}

function calculateTax(amount) {
  return amount * 0.1;
}