JavaScript 清洁代码技巧和良好实践

代码应该以不言自明、易于理解的方式编写，并且易于修改或扩展新功能。由于代码的阅读量比编写量大，因此我们非常重视代码的整洁。

我们的源代码越易读：

维护起来越容易
新开发人员理解实现所需的时间越少
越容易发现哪些代码可以重复使用

在这篇博文中，我将分享一些我长期以来采用的通用清洁编码原则以及一些特定于 JavaScript 的清洁代码实践。

0.命名

不要把命名变成猜谜游戏。变量和函数的命名方式，要能体现出它们最初被创建的目的。

这样，如果有新开发人员加入团队，这些信息就变得可搜索且更容易理解。

只有当你希望下一个开发人员能够猜出你在想什么时，才需要缩短和缩写名称。

糟糕👎

let x = 10;

let y = new Date().getFullYear();

if (x > 30) {
    //...
}

if (y - x >1990) {
    //...
}

很好👍

let userAge = 30;

let currentYear = new Date().getFullYear();

if (userAge > 30) {
    //...
}

if (currentYear - userAge >1990) {
    //...
}

另外，不要在变量或函数名称中添加多余的不必要的字母。

糟糕👎

let nameValue;
function theProduct();

很好👍

let name;
function product();

1. 条件语句

避免使用否定条件。否定句比肯定句更难理解。

糟糕👎

if (!userExist(user)) {
  //...
}

很好👍

if (userExist(user)) {
  //...
}

2. 函数应该只做一件事

函数代码平均不应超过 30 行（不包括空格和注释）。函数代码越短，越容易理解和重构。尽量确保函数要么修改某些内容，要么查询某些内容，但不要同时修改和查询。

3. 使用默认参数

使用默认参数而不是短路或条件。

默认参数通常比短路更简洁。请记住，如果使用默认参数，函数将仅为未定义的参数提供默认值。其他虚假值（例如 ''、""、false、null、0 和 NaN）不会被默认值替换。

糟糕👎

function getUserData(name) {
  const userName = userName || "Patrick Collision";
  // ...
}

很好👍

function getUserData(name = "Patrick Collision") {
  // ...
}

4.单一抽象级别（SLA）

在编写任何函数时，如果你有多个抽象级别，那么你的函数通常会执行不止一项操作。将一个较大的函数拆分成多个函数可以提高可重用性，并更容易测试。

函数应该只做一件事。它们应该做好这件事。它们应该只做一件事。——罗伯特·C·马丁

糟糕👎

function checkSomething(statement) {
  const REGEXES = [
    // ...
  ];

  const statements = statement.split(" ");
  const tokens = [];
  REGEXES.forEach(REGEX => {
    statements.forEach(statement => {
      // ...
    });
  });

  const names= [];
  tokens.forEach(token => {
    // lex...
  });

  names.forEach(node => {
    // parse...
  });
}

很好👍

function checkSomething(statement) {
  const tokens = tokenize(statement);
  const syntaxTree = parse(tokens);
  syntaxTree.forEach(node => {
    // parse...
  });
}

function tokenize(code) {
  const REGEXES = [
    // ...
  ];

  const statements = code.split(" ");
  const tokens = [];
  REGEXES.forEach(REGEX => {
    statements.forEach(statement => {
      tokens.push(/* ... */);
    });
  });

  return tokens;
}

function parse(tokens) {
  const syntaxTree = [];
  tokens.forEach(token => {
    syntaxTree.push(/* ... */);
  });

  return syntaxTree;
}

5. 不要忽略捕获的错误

如果对捕获到的错误不采取任何措施，您将无法修复或应对该特定错误。

将错误记录到控制台（console.log）并没有好多少，因为它常常会在打印到控制台的其他内容中丢失。

如果您将任何代码包装在 try/catch 中，则意味着您认为那里可能会发生错误，因此您应该对错误发生时有一个计划。

糟糕👎

try {
  functionThatMightThrow();
} catch (error) {
  console.log(error);
}

很好👍

try {
  functionThatMightThrow();
} catch (error) {
  notifyUserOfError(error);   
  reportErrorToService(error);   
}

6. 尽量减少评论

只注释代码中业务逻辑复杂的部分。
注释并非必需。好的代码通常能够提供文档说明。

糟糕👎

function hashing(data) {
  // The hash
  let hash = 0;

  // Length of string
  const length = data.length;

  // Loop through every character in data
  for (let i = 0; i < length; i++) {
    // Get character code.
    const char = data.charCodeAt(i);
    // Make the hash
    hash = (hash << 5) - hash + char;
    // Convert to 32-bit integer
    hash &= hash;
  }
}

很好👍

function hashing(data) {
  let hash = 0;
  const length = data.length;

  for (let i = 0; i < length; i++) {
    const char = data.charCodeAt(i);
    hash = (hash << 5) - hash + char;

    // Convert to 32-bit integer
    hash &= hash;
  }
}

“多余的评论只是谎言和错误信息的聚集地。”——罗伯特·C·马丁

7.删除注释代码

不要在你的代码库中留下注释掉的代码，版本控制的存在是有原因的。请将旧代码保留在你的历史记录中。如果你需要它们，可以从你的 git 历史记录中获取。

糟糕👎

doSomething();
// doOtherStuff();
// doSomeMoreStuff();
// doSoMuchStuff();

很好👍

doSomething();

8. 只导入你需要的内容

解构是 ES6 中引入的。它使得将数组中的值或对象的属性解包到不同的变量中成为可能。你可以将其用于任何类型的对象或模块。

例如，如果您只需要另一个模块的功能add()：subtract()

糟糕👎

const calculate = require('./calculations')

calculate.add(4,2);
calculate.subtract(4,2);

很好👍

const { add, subtract } = require('./calculations')

add(4,2);
subtract(4,2);

只导入文件中需要使用的函数而不是整个模块，然后从中访问特定的函数是有意义的。

9. 保持函数参数不超过 3 个（理想情况下）

限制函数参数的数量非常重要，因为它可以简化函数的测试。如果参数超过三个，你就需要针对每个参数单独测试大量不同的情况。

1-3 个参数是理想情况，如果可能的话，应避免超过这个数字的任何情况。

通常，如果参数超过三个，那么你的函数就会尝试执行过多的操作。这最终会导致违反单一职责原则 (SRP)。

10.使用数组扩展来复制数组。

糟糕👎

const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}

很好👍

const itemsCopy = [...items];

11. 编写线性代码

嵌套代码难以理解。尽可能编写线性代码。它使我们的代码简洁、干净、易于阅读和维护，从而减轻开发人员的工作负担。

例如，使用承诺而不是回调可以数倍提高可读性。

12. 使用 ESLint 和 Prettier

始终使用 ESLint 和 Prettier 来在团队和开发人员之间强制执行通用的编码风格。

还可以尝试使用 JavaScript 的最新功能来编写代码，例如解构、扩展运算符、async-await、模板文字、可选链等。

13. 使用适当的括号

使用运算符时，请将其括在括号中。唯一的例外是标准算术运算符：+、- 和 **，因为它们的优先级是广为人知的。强烈建议将 /、* 和 % 括在括号中，因为它们一起使用时优先级可能会产生歧义。

这提高了可读性并明确了开发人员的意图。

糟糕👎

const foo = a && b < 0 || c > 0 || d + 1 === 0;

if (a || b && c) {
  return d;
}

很好👍

const foo = (a && b < 0) || c > 0 || (d + 1 === 0);

if (a || (b && c)) {
  return d;
}

确保您的代码不会导致如下情况：

14. 提前从函数返回

为了避免 if 语句的深度嵌套，请始终尽早返回函数的值。

糟糕👎

function isPercentage(val) {
  if (val >= 0) {
    if (val < 100) {
      return true;
    } else {
      return false;
    }
  } else {
    return false;
  }
}

很好👍

function isPercentage(val) {
  if (val < 0) {
    return false;
  }

  if (val > 100) {
    return false;
  }

  return true;
}

这个特定示例甚至可以进一步改进：

function isPercentage(val) {
  var isInRange = (val >= 0 && val <= 100);
  return isInRange;
}

类似地，同样的事情也可以应用于循环。

循环执行很长的周期肯定会耗费大量时间。因此，你应该尽早跳出循环。

结论

开发社区中有这样一种说法：你应该始终以这样的方式编写代码，就像在你之后的下一个开发人员是一个连环杀手一样。

按照这条规则，我在这里分享了 15 条技巧，当您的同事开发人员查看您的代码时，这些技巧可以（可能）帮助您。

如果您发现任何更新或更正可以改进这 15 条技巧，或者想要添加您认为有用的技巧，请随时在评论中分享。

为了进一步阅读，我强烈建议您阅读以下 3 个资源：

刚开始从事 Web 开发？💻

查看 ▶ HTML 到 React：终极指南

这本电子书是一本全面的指南，通过大量易于理解的示例和经过验证的路线图，教你成为一名 Web 开发人员所需的一切知识

它包含👇

✅ 直截了当的解释

✅ 简单的代码示例

✅ 50+ 有趣的项目创意

✅ 3 个秘密资源清单

✅ 额外面试准备

您甚至可以查看本书的免费样本

这是全套书原价 60% 的链接⬇

文章来源：https://dev.to/apoorvtyagi/javascript-clean-code-tips-good-practices-2od4