编写整洁的JavaScript代码：全面指南 🚀

解释：
这个标题简单明了地传达了文章的核心内容——如何编写整洁的JavaScript代码，并且加上了“全面指南”表明这是一篇详细的文章，适合希望深入了解如何编写更好代码的读者。使用火箭图标作为结尾，增加了标题的活力和吸引力，符合原文标题的设计意图。

编写干净的代码是每个开发人员必备的技能。干净的代码不仅仅是让代码能够正常运行，更是让它运行得既优雅又高效，并且用一种其他开发人员（包括未来的自己）能够轻松理解并维护的方式来编写。在这份详细的指南中，我们将探讨编写干净JavaScript代码的原则和最佳实践。

干净的代码是这样的：

1. 易读性：一看就懂
2. 易维护性：易于修改和调试
3. 可重用性：适用于多种场景
4. 易测试性：便于编写单元测试
5. 可扩展性：可以扩展而不变复杂

此处省略部分内容
……

１、给变量取有意义的名字可以提高代码的可读性。

你的变量名称最好清楚地表明其用途和含义。

    // 不好
    const d = new Date();
    let u = getUser();
    const arr = ['Apple', 'Banana', 'Orange'];

    // 好
    const 日期 = new Date();
    let 用户 = getUser();
    const 水果 = ['Apple', 'Banana', 'Orange'];

全屏，退出

- 使用常量来表示固定值

当一个值不会更改时，使用 const 而不是 let 或 var。

    // 不好
    let API_ENDPOINT = 'https://api.example.com';
    let MAX_ITEMS = 100;

    // 好
    const API_ENDPOINT = 'https://api.example.com';
    const MAX_ITEMS = 100;

    // 解释：在第一部分中使用 "let" 表示变量可以在之后重新赋值，而在第二部分中使用 "const" 则表明这些变量一经赋值后就不能再改变。

进入全屏，退出全屏

- 统一命名规范

使用一致的命名模式贯穿整个代码库

    // 不好 - 命名不一致
    获取用户信息()
    获取客户数据()
    获取客户记录()

    // 好 - 命名一致
    获取用户()
    更新用户()
    删除用户()

进入全屏模式，退出全屏模式

- 使用搜索名称

让你的变量和常量更容易被搜索到。

    // 不好
    setTimeout(doSomething, 86400000);

    // 好
    const 一天的毫秒数 = 86400000;
    setTimeout(doSomething, 一天的毫秒数);

切换到全屏 退出全屏

——

请使用获取器和设置器

使用getter和setter来封装对象的属性。

// 差
class User {
  constructor(name) {
    this.name = name;
  }
}

// 好一点
class User {
  #name;  // 私有属性，用于存储用户的名字

  constructor(name) {
    this.#name = name;
  }

  获取名字: {
    return this.#name;
  }

  设置名字: {
    this.#name = name;
  }
}

进入全屏模式，退出全屏模式

实现私有属性和方法

利用私有字段和私有方法来保护对象的数据安全。

    class BankAccount {
      #balance = 0;  // 私有成员变量

      deposit(amount) {
        if (this.#validateAmount(amount)) {
          this.#balance += amount;
        }
      }

      #validateAmount(amount) {  // 私有函数
        return amount > 0;
      }
    }

全屏 退出

此处为空格或分隔符号 *

保持功能小巧且专注 ——

每个函数应该只做一件事。

    // 不好的代码示例
    function processUserData(user) {
      validateUser(user);
      updateUserInDatabase(user);
      sendWelcomeEmail(user);
      updateUIWithUserData(user);
    }

    // 改进后的代码示例
    function processUserData(user) {
      if (validateUser(user)) {
        saveUserData(user);
      }
    }

    // 保存用户数据的函数
    function saveUserData(user) {
      updateUserInDatabase(user)
        .then(sendWelcomeEmail)
        .接着(updateUIWithUserData);
    }

全屏显示 退出全屏

- 限制函数的参数

可以利用对象来传递多个参数。

// 不好的
function createUser(firstName, lastName, email, age, location) {
  // 省略
}

// 好的
function createUser(userConfig) {
  从 userConfig 中解构 firstName, lastName, email, age, location;
  // 省略
}

全屏模式，退出全屏

- 使用描述性的函数名

函数名应该清楚地说明它们的功能。

    // 不太好
    function 处理数据的函数(data) { /* ... */ }

    // 好
    function 处理用户付款的函数(paymentData) { /* ... */ }

点击全屏 点击退出全屏

编写自文档代码:

你的代码应该足够清晰明了，不需要很多注释。

    // 不好
    // 判断用户是否成年
    if (user.age >= 18) { /* ... */ }

    // 改进后，将判断逻辑提取到一个变量中，使代码更加清晰易读
    const isAdult = user.age >= 18;
    if (isAdult) { /* ... */ }

切换到全屏模式，退出全屏

对于复杂的逻辑，使用注释来解释

评论应侧重于解释原因，而非说明事实。

    // 不好
    // 遍历用户列表
    users.forEach(user => { /* ... */ });

    // 好
    // 过滤出活跃用户，避免打扰那些长时间未登录的用户
    const activeUsers = users.filter(user => user.lastLogin > thirtyDaysAgo);
    // thirtyDaysAgo 是指30天前的日期

全屏 退出全屏

- 先写测试（即TDD，测试驱动开发）

最好先在开发功能之前就编写单元测试。

// 示例测试
describe('用户身份验证', () => {
  it('应能用有效的凭据成功登录', () => {
    const user = new User('test@example.com', 'password123');
    expect(user.login()).toBeTruthy();
  });
});

全屏模式（点击进入/退出）

- 例如，测试边缘情况

一定要测试边界情况以及错误情形。

    describe('数组工具', () => {
      it('应能处理空数组', () => {
        expect(processArray([])).toEqual([]);
      });

      it('应能处理空或无效的输入', () => {
        expect(() => processArray(null)).toThrow('无效的输入');
      });
    });

全屏模式（进入/退出）

使用可选链操作

    // 不好
    const streetName = user && user.address && user.address.street;
    // 这种写法在 user 为 null 或 undefined 时会导致错误。

    // 好
    const streetName = user?.address?.street;
    // 使用可选链操作符 (`?.`) 可以避免在 user 为 null 或 undefined 时出现错误。

点击全屏，关闭全屏

- 利用解构来...

下面是一个不好的例子和一个好的例子：

// 不好（这种方式代码冗余，不够简洁。）
const firstName = user.firstName;
const lastName = user.lastName;

// 好（这种方式代码更简洁，易于阅读。）
const { firstName, lastName } = user;

全屏 全屏退出

\- 使用默认参数

// 不太好
function greet(name) {
  name = name || 'Guest';
  return `Hello, ${name}!`;
}

// 比较好
function greet(name = 'Guest') {
  return `Hello, ${name}!`;
  // 这样写更好，因为默认值被直接定义在参数中了
}

// 这个函数用来打招呼，如果没有提供名字，默认使用“Guest”

全屏，退出全屏

* * *

## 结语.

编写干净的代码是一个不断进步的过程。这不仅关乎遵循规则，更在于培养一种重视清晰、简洁和易维护的思维方式。记住：

* 首先考虑人类的需求，然后才是计算机的需求来编写代码
* 保持函数简单且专注于单一功能
* 为变量和函数使用有意义的名字
* 进行彻底的测试
* 定期进行代码重构
* 保持代码风格的一致性

通过遵循这些原则并不断改进你的方法，你将编写出不仅功能齐全，而且更专业、更易于维护的代码。

* * *

## 参考文献

* <https://www.freecodecamp.org/news/the-clean-code-handbook/?ref=dailydev> (Free Code Camp关于编写干净代码的文章)
* [https://www.youtube.com/watch?v=b9c5GmmS7ks&list=PLWKjhJtqVAbkK24EaPurzMq0-kw5U9pJh&index=1](https://www.youtube.com/watch?v=b9c5GmmS7ks&list=PLWKjhJtqVAbkK24EaPurzMq0-kw5U9pJh&index=1) (一个关于编写干净代码的视频教程系列)