十个编写更简洁的 JavaScript 代码的技巧

本文链接：https://blog.csdn.net/m0_64460287/article/details/127531224

近年来，随着许多框架的推出，涵盖了从后端、Web前端到跨平台移动应用程序，甚至游戏的方方面面，Javascript 的流行度达到了很高的水平。

编写干净可读的代码是构建业务逻辑之后最重要的事情之一。根据我与多个组织、初创公司和项目合作的经验，我可以保证处理糟糕的代码是一场噩梦。它减慢了开发过程，延迟了发布，并使用它的开发人员感到沮丧。

因此，我们需要编写一些干净可读的代码，在今天的内容中，我将与你分享一些我编程干净代码的基本技巧，希望对你有所帮助。现在我们开始吧。

1. 变量名——保持它们的意义

你的变量名称应该能够清楚地解释其用途。此外，避免混淆首字母缩写词和难以发音的单词。我不知道我该如何强调这一点，让我们看看下面的例子：

// Bad 
const yyyymmdstr = moment().format("YYYY/MM/DD");
// Good
const currentDate = moment().format("YYYY/MM/DD");

2. 变量名——保持可搜索

尽管有些文章会告诉你在可以使用单态形式时不要创建变量，但不应将其扩展为使用常量，这会使代码更难阅读和搜索。此外，正确的做法是将它们存储在 const 变量中并使用 CONSTANT_CASE 来命名变量。

例如，查看以下代码段：

// What the heck is 86400000 for?
setTimeout(blastOff, 86400000);


// Declare them as capitalized named constants.
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;
setTimeout(blastOff, MILLISECONDS_PER_DAY);

3. 避免对变量进行心理映射

最好在 array.forEach() 中显式命名变量，而不是使用以后可能没有意义的简写。

// BAD
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(l => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  // Wait, what is `l` for again?
  dispatch(l);
});


// GOOD
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(location => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  dispatch(location);
});

4. 避免不必要的上下文

如果类或对象名称已经告诉你它代表什么，请不要再次将该信息添加到你的变量名称中。在下面的示例中，由于我们已经知道，我们谈论的是 Car 或 paintCar，因此你无需在变量中再次提及上下文的Car。

// BAD
const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};


function paintCar(car, color) {
  car.carColor = color;
}


// GOOD
const Car = {
  make: "Honda",
  model: "Accord",
  color: "Blue"
};


function paintCar(car, color) {
  car.color = color;
}

5. 在你的函数中使用默认参数

避免在你的函数中使用短路或条件来保持更清洁。更重要的是，请记住，你的函数只会为未定义的参数提供值，默认值不会替换任何其他虚假值。

// BAD
function createMicrobrewery(name) {
  const breweryName = name || "Hipster Brew Co.";
  // ...
}


// GOOD
function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}

6. 明智地使用函数参数

根据经验，尽量将函数参数的数量限制在 2 个或最多 3 个。如果它需要这么多参数，则可能是你的函数做的太多了。但是，如果仍然需要它，请使用 JavaScript 对象作为参数。为了使函数期望的属性变得明显，可以使用 ES6 解构语法。

// BAD
function createMenu(title, body, buttonText, cancellable) {
  // ...
}


createMenu("Foo", "Bar", "Baz", true);


// GOOD 
function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}


createMenu({
  title: "Foo",
  body: "Bar",
  buttonText: "Baz",
  cancellable: true
});

7. 函数应该做一件事

不要忘记函数的作用——为你的代码添加模块化。每个只执行一项任务的较小函数将确保你的代码易于编写、测试和理解。永远不要为单个功能设置多个目标。

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


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


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

8. 函数名——让它们有意义

确保编写函数的名称清楚地说明函数的作用。模棱两可的函数名称意味着读者必须查看函数定义和逻辑才能理解他们的工作。

// BAD
function addToDate(date, month) {
  // ...
}


const date = new Date();


// It's hard to tell from the function name what is added
addToDate(date, 1);


// GOOD
function addMonthToDate(month, date) {
  // ...
}


const date = new Date();
addMonthToDate(1, date);

9. 避免重复代码——让代码更短更简洁

最痛苦的是多个代码部分中的一堆相同或相似的行。我们都遇到过这样的场景。这通常是因为某些逻辑在 2 个或更多地方的实现略有不同。但是，想想如果有人在逻辑中发现错误会做的噩梦的，现在他们必须到处修改它。

10. 不要使用标志作为函数参数

为什么需要标志作为函数参数？仅出于一个明显的原因，你的功能正在做多种事情。从第 7 点开始，你就知道这是一种不好的做法。所以，继续把你的功能一分为二。

// BAD
function createFile(name, temp) {
  if (temp) {
    fs.create(`./temp/${name}`);
  } else {
    fs.create(name);
  }
}


// GOOD
function createFile(name) {
  fs.create(name);
}


function createTempFile(name) {
  createFile(`./temp/${name}`);
}