干净的代码 JavaScript

编写干净、易于维护的 JavaScript 代码，可以帮助你更轻松地构建出高度可靠的应用程序。以下是一些编写干净 JavaScript 代码的最佳实践。

1. 使用有意义且一致的变量名

使用有意义、一致的变量名是编写干净 JavaScript 代码的关键。这有助于其他人更容易地阅读和理解你的代码。

• 变量名应该描述变量所存储的值的含义。
• 命名应该是一致的，遵循相同的规则和惯例。

// Bad
let x = 'John Doe';
let y = 35;

// Good
let name = 'John Doe';
let age = 35;

2. 避免全局变量

在 JavaScript 中，全局变量可以被任何代码访问，因此它们很容易被意外修改，可能会导致错误。

• 避免使用全局变量，尽可能将其作为局部变量或对象的属性。

// Bad
let x = 10;
function addTwo() {
  x += 2;
}

// Good
function addTwo(x) {
  return x + 2;
}

3. 将条件语句分离

混合条件语句会使代码难以阅读和理解。将条件语句分成单独的语句可以使代码更清晰。

• 不要将条件和代码混合在一起。
• 避免使用嵌套条件语句。

// Bad
if (age > 18 && age < 30) console.log('Age is valid');

// Good
const isAgeValid = age > 18 && age < 30;
if (isAgeValid) console.log('Age is valid');

4. 遵循 DRY 原则

DRY 原则（Don't Repeat Yourself）是一条重要的原则，即代码中不应该存在重复的逻辑。

• 将重复的代码封装到单独的函数中。
• 将相同的代码块抽象为可重用的组件。

// Bad 
function greetUser(name) {
  console.log(`Hi ${name}, welcome to our site!`);
  console.log(`Please log in to continue.`);
}

function greetAdmin(name) {
  console.log(`Hi ${name}, welcome to our site!`);
  console.log(`You have admin privileges.`);
}

// Good
function greetUser(name, isAdmin) {
  console.log(`Hi ${name}, welcome to our site!`);
  if (isAdmin) {
    console.log(`You have admin privileges.`);
  } else {
    console.log(`Please log in to continue.`);
  }
}

5. 使用注释

良好的注释可以使代码更易于阅读和理解，这尤其在处理复杂逻辑时重要。

• 在代码的重要部分添加注释。
• 记得删除不需要的注释。

// Bad
function calculateSalesTax(price, taxRate) {
  // Calculate the sales tax
  const taxAmount = price * taxRate;
  
  // Add the tax and return the total
  return price + taxAmount;
}

// Good
function calculateSalesTax(price, taxRate) {
  // Calculate the sales tax
  const taxAmount = price * taxRate;
  
  // Add the tax and return the total
  const total = price + taxAmount;
  return total;
}

6. 使用模板字符串

使用模板字符串可以更方便地生成复杂的字符串，而不需要使用过多的连接运算符和分隔符。

• 使用模板字符串而不是字符串连接操作。
• 在模板字符串中使用变量或表达式时，要将其包含在 ${} 中。

// Bad
const name = 'John Doe';
const greeting = 'Hi, my name is ' + name + '.';

// Good
const name = 'John Doe';
const greeting = `Hi, my name is ${name}.`;

7. 使用解构

解构可以更方便地访问对象和数组的属性和元素。

• 使用数组解构来获取数组的元素。
• 使用对象解构来获取对象的属性。

// Bad
const user = {
  name: 'John Doe',
  age: 35,
};

console.log(user.name);
console.log(user.age);

// Good
const user = {
  name: 'John Doe',
  age: 35,
};

const {name, age} = user;
console.log(name);
console.log(age);

8. 遵循单一职责原则

单一职责原则是一条重要的软件设计原则，它规定每个函数、类或模块都应该只有一个职责。这可以使代码更清晰、更易于维护。

• 为函数、类或模块定义清晰的职责和约定。
• 避免将不相关的逻辑混合在一起。

// Bad
function calculateSalesTax(price, taxRate) {
  const taxAmount = price * taxRate;
  
  const total = price + taxAmount;
  console.log(`The total is ${total}`);
  
  if (total > 100) {
    console.log('This purchase qualifies for free shipping.');
  }
}

// Good
function calculateSalesTax(price, taxRate) {
  const taxAmount = price * taxRate;
  
  const total = price + taxAmount;
  console.log(`The total is ${total}`);
  
  return total;
}

function checkShippingCost(total) {
  if (total > 100) {
    console.log('This purchase qualifies for free shipping.');
  }
}

以上是编写干净 JavaScript 代码的最佳实践。按照这些实践编写代码，可以让你的代码更易于维护、重构和升级。