WEB前端教程：编写干净的 JavaScript 代码

学习掌握以下知识点，掌握编写更赏心悦目的 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 代码编写过程中的分号有什么作用？
如何编写好的注释？

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-31 10:36
阅读 ( 387 )
分类：WEB前端开发