人类可读的 JavaScript

为人类编写代码，而不仅仅是为机器编写代码

在软件开发的世界中，编写有效的代码只是一个开始。作为开发人员，我们经常专注于使代码发挥作用，但有时我们会忘记代码是供人类和机器阅读和理解的。 JavaScript 与所有编程语言一样，可以用多种不同的方式编写，但编写人类可读的 JavaScript 是构建可维护、可扩展的应用程序的一项关键技能。

人类可读的代码是其他开发人员（甚至未来的你）易于理解的代码。它减少了认知负担，使团队能够更有效地协作，并随着时间的推移简化调试和更新代码。在本文中，我们将探讨为什么编写人类可读的 JavaScript 至关重要，并将讨论实现这一目标的最佳实践。

为什么人类可读的 JavaScript 很重要

1. 协作：在团队环境中，多个开发人员在同一个代码库上工作是很常见的。编写人类可读的代码可确保您的团队成员可以轻松理解您的逻辑，从而实现更顺畅的协作和更快的开发周期。

2. 维护：代码的读取次数多于编写次数。您或其他开发人员可能需要在最初编写一段代码数月甚至数年后再次查看该代码。清晰易读的代码使维护任务（例如修复错误或添加新功能）变得更加容易。

3. 调试：出现问题时，编写良好的代码更容易调试。人类可读的代码可以更快地发现错误、理解逻辑流程并实施必要的修复。

4. 入职：当新开发人员加入项目时，他们需要快速熟悉代码库。编写简洁易读的代码可以帮助新团队成员理解代码的结构和用途，从而减少入职时间。

编写人类可读 JavaScript 的最佳实践

1.使用描述性变量和函数名称

你的变量和函数应该清楚地描述它们的目的。避免使用像 x 或 y 这样的单字母变量名，除非您工作的范围非常小且含义很明显。相反，请使用有意义的名称来描述它们持有的数据或它们执行的操作。

不好的例子：

function a(x, y) {
  return x * y;
}

好例子：

function calculateArea(width, height) {
  return width * height;
}

在这个很好的例子中，函数的作用和参数代表什么就一目了然了。这种清晰性使代码更容易一目了然。

2. 保持功能小而集中

函数应该做一件事并且做好它。大型、多用途的函数难以理解和维护。将代码分解为更小、更集中的函数可以提高可读性，并使其更易于测试和调试。

不好的例子：

function a(x, y) {
  return x * y;
}

好例子：

function calculateArea(width, height) {
  return width * height;
}

在这个很好的例子中，每个函数都有一个职责。主 processUserData 函数变得更容易阅读，因为逻辑被分成更小的描述性部分。

3. 在必要的地方写下评论

注释是解释为什么以某种方式完成某些操作或澄清非显而易见的代码的好方法。然而，注释不应该被用作编写不清楚的代码的拐杖。使用注释来补充而不是补偿写得不好的代码。

不好的例子：

function processUserData(user) {
  // Validate user
  if (!user.name || !user.email) {
    return 'Invalid user data';
  }

  // Save user
  database.save(user);

  // Send email
  emailService.sendWelcomeEmail(user.email);

  return 'User processed successfully';
}

好例子：

function validateUser(user) {
  return user.name && user.email;
}

function saveUser(user) {
  database.save(user);
}

function sendWelcomeEmail(user) {
  emailService.sendWelcomeEmail(user.email);
}

function processUserData(user) {
  if (!validateUser(user)) {
    return 'Invalid user data';
  }

  saveUser(user);
  sendWelcomeEmail(user);

  return 'User processed successfully';
}

在坏例子中，注释是多余的，因为代码本身很清晰。在很好的示例中，注释通过解释该函数专门计算矩形的面积来添加有用的上下文。

4. 使用一致的格式和缩进

一致的格式使代码更具可读性且更易于遵循。无论您使用制表符还是空格、单引号还是双引号，保持一致都很重要。 Prettier 或 ESLint 等工具可以帮助在您的代码库中强制执行一致的格式。

不好的例子：

// This multiplies width and height to get the area
function calculateArea(width, height) {
  return width * height;
}

好例子：

// Calculates the area of a rectangle
function calculateArea(width, height) {
  return width * height;
}

在很好的示例中，一致的缩进和间距使代码更易于阅读。

5.避免深层嵌套

深度嵌套的代码可能难以遵循和维护。尝试通过使用早期返回或将逻辑分成更小的函数来扁平化您的代码。

不好的例子：

function calculateArea(width,height){
  return width * height;}

好例子：

function calculateArea(width, height) {
  return width * height;
}

在很好的例子中，通过使用提前返回来减少嵌套。这使得代码更容易阅读和理解。

6. 避免使用幻数

幻数是出现在代码中且没有解释的数字。它们会使代码更难理解和维护。相反，使用命名常量使您的代码更具描述性。

不好的例子：

function processUser(user) {
  if (user) {
    if (user.isActive) {
      if (user.hasProfile) {
        return 'User is valid';
      }
    }
  }
  return 'Invalid user';
}

好例子：

function processUser(user) {
  if (!user || !user.isActive || !user.hasProfile) {
    return 'Invalid user';
  }

  return 'User is valid';
}

在很好的示例中，幻数 60 被替换为常量，这使得代码更具可读性并且更易于维护。

7. 优雅地处理错误

错误处理应该清晰且一致。始终提供有意义的错误消息，并避免使用通用或不明确的错误。

不好的例子：

function a(x, y) {
  return x * y;
}

好例子：

function calculateArea(width, height) {
  return width * height;
}

在很好的示例中，错误消息提供了有关错误原因的清晰信息，从而更易于调试。

结论

编写人类可读的 JavaScript 是一项基本技能，而不仅仅是让代码正常工作。这是关于编写其他开发人员（以及未来的你）可以轻松理解、维护和调试的代码。通过遵循最佳实践，例如使用描述性名称、保持函数较小、编写有意义的注释以及使用一致的格式，您可以编写出不仅有效而且读起来很愉快的代码。

请记住，代码既适用于机器，也适用于人类。通过优先考虑可读性，从长远来看，您将创建更易于维护、更可扩展且更高效的代码。

以上是人类可读的 JavaScript的详细内容。更多信息请关注PHP中文网其他相关文章！