首页>网页设计教程>Javascript教程

编码风格

作者：Eve Cole 更新时间：2025-01-06 14:19:37

我们的代码必须尽可能干净且易于阅读。

这实际上是编程的艺术——接受复杂的任务并以正确且人类可读的方式对其进行编码。良好的代码风格对此有很大帮助。

句法

这是一份包含一些建议规则的备忘单（有关更多详细信息，请参阅下文）：

现在让我们详细讨论一下它们的规则和原因。

没有“你必须”的规则

这里没有什么是一成不变的。这些是风格偏好，而不是宗教教条。

大括号

在大多数 JavaScript 项目中，大括号以“埃及”风格编写，左大括号与相应的关键字位于同一行，而不是新行。左括号前还应该有一个空格，如下所示：

如果（条件）{
  // 这样做
  // ...还有那个
  // ...还有那个
}

单行构造，例如if (condition) doSomething() ，是一种重要的边缘情况。我们到底应该使用牙套吗？

以下是带注释的变体，以便您可以自己判断它们的可读性：

  1. ？初学者有时会这样做。坏的！不需要花括号：

     if (n < 0) {alert(`不支持 Power ${n}`);}

  2. ？不带大括号拆分为单独的行。千万不要这样做，添加新行时很容易出错：

    如果（n<0）
  alert(`不支持电源 ${n}`);

  3. ？一行不带大括号 - 如果很短，可以接受：

     if (n < 0)alert(`不支持 Power ${n}`);

  4. ？最佳变体：

    如果（n<0）{
  alert(`不支持电源 ${n}`);
}

对于非常简短的代码，允许一行，例如if (cond) return null 。但代码块（最后一个变体）通常更具可读性。

线长

没有人喜欢阅读一长串水平代码。最好的做法是将它们分开。

例如：

 // 反引号`允许将字符串分成多行
让str=`
  ECMA International 的 TC39 是一群 JavaScript 开发人员，
  实施者、学者等与社区合作
  维护和发展 JavaScript 的定义。
`;

并且，对于if语句：

如果 （
  id === 123 &&
  月相 === '渐亏凸月' &&
  zodiacSign === '天秤座'
）{
  让TheSorceryBegin();
}

最大线路长度应在团队层面达成一致。通常为 80 或 120 个字符。

缩进

缩进有两种类型：

  • 水平缩进：2 或 4 个空格。

    使用 2 个或 4 个空格或水平制表符（ Tab键）进行水平缩进。选择哪一场是一场古老的圣战。如今，空间更加常见。

    与制表符相比，空格的优点之一是，与制表符相比，空格允许更灵活的缩进配置。

    例如，我们可以将参数与左括号对齐，如下所示：

    显示（参数，
     aligned, // 左侧填充 5 个空格
     一，
     后，
     其他
  ）{
  // ...
}

  • 垂直缩进：用于将代码分割成逻辑块的空行。

    即使是单个功能通常也可以分为多个逻辑块。在下面的例子中，变量的初始化、主循环和返回结果被垂直分割：

    函数 pow(x, n) {
  让结果= 1；
  // <--
  for (令 i = 0; i < n; i++) {
    结果*=x；
  }
  // <--
  返回结果；
}

    插入额外的换行符，有助于使代码更具可读性。没有垂直缩进的代码不应超过九行。

分号

每个语句后面都应该有一个分号，即使它可能被跳过。

在某些语言中，分号确实是可选的，但很少使用。但在 JavaScript 中，有时换行符不会被解释为分号，从而导致代码容易出错。有关详细信息，请参阅代码结构一章。

如果您是一位经验丰富的 JavaScript 程序员，您可以选择像 StandardJS 这样的无分号代码风格。否则，最好使用分号以避免可能的陷阱。大多数开发人员都使用分号。

嵌套级别

尽量避免嵌套代码太深。

例如，在循环中，有时使用continue指令来避免额外的嵌套是个好主意。

例如，不要像这样添加嵌套的if条件：

 for (令 i = 0; i < 10; i++) {
  如果（条件）{
    ... // <- 多一层嵌套
  }
}

我们可以写：

 for (令 i = 0; i < 10; i++) {
  if (!cond) 继续；
  ... // <- 没有额外的嵌套级别
}

使用if/else和return可以完成类似的事情。

例如，下面的两个构造是相同的。

选项 1：

函数 pow(x, n) {
  如果（n<0）{
    Alert("不支持负数 'n'");
  } 别的 {
    让结果= 1；

    for (令 i = 0; i < n; i++) {
      结果*=x；
    }

    返回结果；
  }
}

选项2：

函数 pow(x, n) {
  如果（n<0）{
    Alert("不支持负数 'n'");
    返回;
  }

  让结果= 1；

  for (令 i = 0; i < n; i++) {
    结果*=x；
  }

  返回结果；
}

第二个更具可读性，因为n < 0的“特殊情况”已被尽早处理。检查完成后，我们可以继续“主”代码流，而不需要额外的嵌套。

功能布局

如果您正在编写多个“辅助”函数以及使用它们的代码，则可以通过三种方式来组织这些函数。

  1. 在使用函数的代码上方声明函数：

     // 函数声明
函数创建元素() {
  ...
}

函数 setHandler(elem) {
  ...
}

函数 walkAround() {
  ...
}

// 使用它们的代码
让 elem = createElement();
setHandler(elem);
走动（）；

  2. 先编码，再函数

    // 使用函数的代码
让 elem = createElement();
setHandler(elem);
走动（）；

// --- 辅助函数 ---
函数创建元素() {
  ...
}

函数 setHandler(elem) {
  ...
}

函数 walkAround() {
  ...
}

  3. 混合：函数在第一次使用的地方声明。

大多数时候，第二种变体是首选。

那是因为在阅读代码时，我们首先想知道它做了什么。如果代码先行，那么从一开始就很清楚。然后，也许我们根本不需要阅读这些函数，特别是当它们的名称描述了它们实际执行的操作时。

风格指南

风格指南包含有关“如何编写”代码的一般规则，例如使用哪些引号、缩进多少空格、最大行长度等。很多小事情。

当团队的所有成员使用相同的风格指南时，无论哪个团队成员编写代码，代码看起来都是统一的。

当然，团队总是可以编写自己的风格指南，但通常没有必要。有许多现有指南可供选择。

一些流行的选择：

  • 谷歌 JavaScript 风格指南

  • Airbnb JavaScript 风格指南

  • 惯用语

  • 标准JS

  • （还有更多）

如果您是新手开发人员，请从本章开头的备忘单开始。然后您可以浏览其他风格指南以获取更多想法并决定您最喜欢哪一个。

自动检查

Linters 是可以自动检查代码风格并提出改进建议的工具。

它们的伟大之处在于，样式检查还可以发现一些错误，例如变量或函数名称中的拼写错误。由于此功能，即使您不想坚持一种特定的“代码风格”，也建议使用 linter。

以下是一些著名的 linting 工具：

  • JSLint——最早的 linter 之一。

  • JSHint – 比 JSLint 更多的设置。

  • ESLint – 可能是最新的。

他们所有人都能胜任这项工作。作者使用ESLint。

大多数 linter 都与许多流行的编辑器集成：只需在编辑器中启用插件并配置样式即可。

例如，对于 ESLint，您应该执行以下操作：

  1. 安装 Node.js。

  2. 使用命令npm install -g eslint安装 ESLint（npm 是一个 JavaScript 包安装程序）。

  3. 在 JavaScript 项目的根目录（包含所有文件的文件夹中）创建一个名为.eslintrc的配置文件。

  4. 为您的编辑器安装/启用与 ESLint 集成的插件。大多数编辑都有一个。

以下是.eslintrc文件的示例：

 {
  "extends": "eslint:推荐",
  “环境”：{
    “浏览器”：正确，
    “节点”：正确，
    “es6”：正确
  },
  “规则”：{
    “无控制台”：0，
    “缩进”：2
  }
}

这里指令"extends"表示配置基于“eslint:recommished”设置集。之后，我们指定我们自己的。

还可以从网络下载样式规则集并扩展它们。有关安装的更多详细信息，请参阅 https://eslint.org/docs/user-guide/getting-started。

此外，某些 IDE 具有内置的 linting，这很方便，但不如 ESLint 那样可定制。

概括

本章（以及引用的样式指南）中描述的所有语法规则旨在提高代码的可读性。所有这些都是有争议的。

当我们考虑编写“更好”的代码时，我们应该问自己的问题是：“是什么使代码更具可读性和更容易理解？”以及“什么可以帮助我们避免错误？”这些是选择和讨论代码风格时要记住的主要事项。

阅读流行的风格指南将使您能够及时了解有关代码风格趋势和最佳实践的最新想法。

任务

风格不好

重要性：4

下面的代码风格有什么问题吗？

函数 pow(x,n)
{
  让结果=1；
  for(让 i=0;i<n;i++) {结果*=x;}
  返回结果；
}

让 x=提示("x?",''), n=提示("n?",'')
如果（n<=0）
{
  alert(`不支持Power ${n}，请输入大于零的整数`);
}
别的
{
  警报（战力（x，n））
}

修复它。

您可以注意以下几点：

 function pow(x,n) // <- 参数之间没有空格
{ // <- 数字括号另起一行
  让结果=1；   // <- = 之前或之后没有空格
  for(let i=0;i<n;i++) {result*=x;} // <- 没有空格
  // { ... } 的内容应该换行
  返回结果；
}

let x=prompt("x?",''), n=prompt("n?",'') // <-- 技术上可行，
// 但最好将其设为 2 行，而且不要有空格和缺失；
if (n<=0) // <- 内部没有空格 (n <= 0)，并且上面应该有额外的一行
{ // <- 数字括号另起一行
  // 下面 - 长行可以分成多行以提高可读性
  alert(`不支持Power ${n}，请输入大于零的整数`);
}
else // <- 可以将其写在一行上，如“} else {”
{
  Alert(pow(x,n)) // 没有空格且缺失 ;
}

固定变体：

函数 pow(x, n) {
  让结果= 1；

  for (令 i = 0; i < n; i++) {
    结果*=x；
  }

  返回结果；
}

让 x = 提示("x?", "");
让 n = 提示("n?", "");

如果（n <= 0）{
  警报（`不支持电源 ${n}，
    请输入一个大于零的整数`);
} 别的 {
  警报（战俘（x，n））；
}
相关文章