# 编写干净的 JavaScript 代码

# 课程目标

学习掌握以下知识点，掌握编写更赏心悦目的 JavaScript 代码

理解 JavaScript 为什么使用分号
学习 JavaScript 自动分号补全（ASI）机制
学会使用 Prettier，Eslint 工具编写更规范整洁的代码
理解什么是好的注释，什么是坏的注释，并且学会使用 jsdoc 规则编写更规范的注释

# 为什么 JavaScript 有分号？

并非所有的编程语言都有分号，但 JavaScript 有，这是有充分理由的。

当您开发网站时，您将编写大量 JavaScript 代码。为了使网站更小，我们经常运用一个概念叫minification (opens new window)。由此您使用工具来缩小你的代码，以节省字符。保存字符会自动保存 KB。例如：

缩小前：十五行代码

/**
 * @param {number} a
 * @param {number} b
 */
const sum = (a, b) => {
  return a + b;
};
/**
 * @param {number} a
 * @param {number} b
 */

const multiply = (a, b) => {
  return a * b;
};

缩小后:一行代码

function sum(a, b) {
  return a + b;
}
function multiply(a, b) {
  return a * b;
}

上面的代码几乎不可读，但是它缩短了代码行数。这是一个小例子，但对于大型 JavaScript 文件，您可以看到文件大大减少了

如果仔细观察，您会发现在每个 JavaScript “行”之后，我们现在都有一个分号。所以分号的目的是告诉 JavaScript 一行的结束位置。那是因为当我们缩小代码时，有一些边缘情况最终会破坏您的代码。分号可以解决这个问题。它们表示语句的结束。

# 我们是否建议使用分号呢？

这个问题的答案不是简单的用或者不用，答案是视情况而定。

您可能在编写代码时从不使用分号，因为在缩小过程中，诸如 webpack 或 parcel 之类的工具会为您插入这些分号。

但是，很多开发人员都习惯使用分号

您应该考虑的另一件事是您的工作环境。如果你在一家公司工作，他们会有一些关于如何编写 JavaScript 的指南。有些公司使用分号，有些公司不使用。根据经验，大多数开发人员使用分号。

如果您已经知道另一种编程语言并且您已经习惯了分号，那么就使用它们吧！如果你不喜欢使用它们，那就不要使用它们！

更多讨论在：

您是否建议在 JavaScript 中的每个语句后使用分号？| stackoverflow (opens new window)

# 自动分号补全

ASI（自动分号插入）是 JavaScript 中的一个概念.

JavaScript 中的某些特定语句需要以分号结尾。因此，如果程序员将它们排除在外，JavaScript 引擎将自动放置一个分号。这称为自动分号插入，仅适用于非常特定的情况。

以下是适用 ASI 的最常见语句：

let/const 变量声明。
import/export 声明。
return.

您可以在 MDN 上查看完整列表：

自动分号补全 | MDN (opens new window)

您还可以阅读下面文章学习 ASI 机制更多知识：

# Prettier

是否需要加分号不是至关重要的问题，另一个原因是您可以使用诸如 prettier (opens new window) 之类的工具来自动格式化您的代码，它会自动在您的源代码中插入分号

Prettier 是一个固执的代码格式化程序,许多开发人员对 Prettier 非常满意,它最近变得非常流行

建议您在计算机上设置 Prettier 。以下是为 VSCode 进行设置的说明：

如果您尚未安装 VSCode，请从code.visualstudio.com (opens new window)安装它。
打开 VSCode 后，单击Extensions选项卡，然后搜索Prettier并单击第一个结果Prettier - Code formatter。
单击 Install 按钮。
在同一页面上，向下滚动一点并按照下面的其余说明进行操作，Default Formatter以确保在 JavaScript 文件中启用了 Prettier。
导航到设置页面（Mac 快捷键：command ,）,搜索Editor: Format on Save并确保选中它

VSCode 现在将在您保存代码时使用 Prettier 自动格式化您的代码。

以下是更加详细的教程,以供参考：

# 代码风格

关于代码格式，还有一个相关的概念叫做代码风格。

代码风格是某个团队/个人/公司在开发项目时使用的一组规则和指南。您不一定需要具有代码风格，但是，具有代码风格可以使您的代码更不容易出现错误，提前防止一些错误，同时使您的代码更加同类。比如：Airbnb 风格指南 (opens new window)

在一个大团队中拥有同质的代码对于改善项目的长期维护很重要。

阅读下面文章，学习代码风格：

# ESLint

检查器（Linters）是可以自动检查代码样式，并提出改进建议的工具.在 JavaScript 中。目前最流行检查器是ESLint (opens new window)。

同样建议您在计算机上设置 ESLint 。以下是为 VSCode 设置 ESLint 的步骤说明：

打开 VSCode，点击 Extensions 选项卡，然后搜索 ESLint 并点击第一个结果“ESLint”。
单击 install 按钮。
在项目的根目录下，创建一个名为.eslintrc.json（不要忘记前导点字符）的文件
在此文件中写入以下内容并保存

{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 2021
  }
}

这里的 "extends" 指令表示我们是基于 “eslint:recommended” 的设置项而进行设置的,这使用了推荐的 ESLint 规则，您可以在规则 (opens new window)页面上找到这些规则。

下面是更详细 ESLint 安装教程：

如何在 Visual Studio Code 中使用 ESLint 整理和格式化代码 (opens new window)

# 注释

学会编写良好的注释可以使我们更好地维护代码，一段时间之后依然可以更高效地回到代码高效开发。

有一个专门用于记录函数的语法 JSDoc (opens new window)：用法、参数和返回值。例如：

/**
 * Returns the sum of a and b
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
function sum(a, b) {
  return a + b;
}

这种注释可以帮助我们理解函数的目的，并且不需要研究其内部的实现代码，就可以直接正确地使用它。

注释 | JavaScript 现代教程 (opens new window)

# 任务

审视下面的 JavaScript 代码，请您先手动修复它，使这段 javascript 代码变得更加规范优雅。
选择你喜欢的 IDE 比如：VScode，安装 Prettier(或者其他代码规范工具)，复制下面不规范的 JavaScript 代码，使用 Prettier 自动规范下面的代码，感受代码规范工具的便利

let name = prompt("你的名字?", ""),
  year = prompt("请你输入你的出生年份?", "");
if (!year || isNaN(Number(year))) {
  alert(`出生年份输入错误，请刷新页面重新输入`);
} else {
  alert(`亲爱的朋友:${name},您今年已经${getAge(year)}岁啦！`);
}
function getAge(birthday) {
  let now = new Date().getFullYear();
  let age = now - birthday;
  return age;
}

# 拓展阅读

# 自测问题

JavaScript 代码编写过程中的分号有什么作用？
如何编写好的注释？

← 异常处理机制综合大作业基础版(一) →