Clean Code JavaScript - 如何写出不让同事尴尬的代码

你有没有过这种感觉：打开旧代码，却看不懂自己当初写的是什么？或者同事请你帮忙看脚本，你花了几个小时才勉强读懂？Clean Code JavaScript 仓库汇集了一系列实用规则，能帮助你写出更易理解、可维护且专业的代码。

为什么整洁代码如此重要？

在从事 JavaScript 工作的 15 年里，我见过数百个项目。大多数项目的主要问题不是算法复杂度，而是代码的可读性。我们在阅读代码上花费的时间是编写代码的 10 倍。Clean Code JavaScript 是 Robert Martin 的经典著作《Clean Code》在 JavaScript 世界的改编版。

仓库作者 Ryan McDermott 写道：

"每段代码最初都是一份粗糙的草稿，如同湿黏土逐渐成形。我们在和同事一起审查时，会逐步剔除其中的缺陷。"

仓库中的 5 个关键原则

1. 有意义的变量名

整洁代码的第一步是规范的命名。变量名应该：

• 易于朗读
• 便于搜索（可以通过 Ctrl+F 找到）
• 无需脑内翻译

反面示例：

const yyyymmdstr = moment().format('YYYY/MM/DD');

正面示例：

const currentDate = moment().format('YYYY/MM/DD');

2. 函数应该只做一件事

这个错误出现在 90% 的项目中。函数不是小说，而是一首短诗。

反面示例：

function emailClients(clients) {
  clients.forEach(client => {
    const record = database.lookup(client);
    if (record.isActive()) email(client);
  });
}

正面示例：

function emailActiveClients(clients) {
  clients.filter(isActiveClient).forEach(email);
}

function isActiveClient(client) {
  const record = database.lookup(client);
  return record.isActive();
}

3. 避免副作用

函数不应该修改其职责范围之外的任何东西。在处理数组和对象时，这一点尤为重要。

反面示例：

const addItemToCart = (cart, item) => {
  cart.push({ item, date: Date.now() });
};

正面示例：

const addItemToCart = (cart, item) => {
  return [...cart, { item, date: Date.now() }];
};

4. JavaScript 适用的 SOLID 原则

SOLID 原则不仅适用于 Java 和 C#。以下是依赖反转原则在 JS 中的实现：

反面示例：

class InventoryTracker {
  constructor(items) {
    this.items = items;
    this.requester = new InventoryRequester();
  }
}

正面示例：

class InventoryTracker {
  constructor(items, requester) {
    this.items = items;
    this.requester = requester;
  }
}

5. 可测试性

整洁的代码就是可测试的代码。每个函数都应该有单一的职责和可预测的结果。

反面示例：

describe('MomentJS', () => {
  it('handles all cases', () => {
    // 20 строк теста разных сценариев
  });
});

正面示例：

describe('MomentJS', () => {
  it('handles 30-day months', () => {
    // один четкий сценарий
  });
  
  it('handles leap year', () => {
    // другой сценарий
  });
});

谁会从这个仓库中受益？

• 初级开发者：你会理解工作代码和优质代码之间的区别
• 技术负责人：你可以将这些原则用于代码审查
• 讲师：你会获得 JavaScript 课程的优秀案例
• 自由职业者：客户重视整洁且可维护的代码

个人实践经历

在我的实践中，曾有一个包含 50 个文件的项目，每个文件超过 500 行代码。在实施 Clean Code 原则后：

• 添加新功能的时间减少了 40%
• 生产环境的 bug 数量下降了 3 倍
• 新开发者上手速度加快了 2 倍

如何使用？

1. 收藏该仓库
2. 选择 2-3 条你最常违反的规则
3. 开始在新代码中应用它们
4. 逐步重构旧代码模块

正如作者所说："这些规则不是教条，而是一份指南。我们的行业还很年轻，我们仍在学习。"

相关链接：

• Clean Code JavaScript 仓库
• Robert Martin 的《Clean Code》