在浏览器中调试

1. “资源（Sources）”面板
   1. 按住F12打开。
   2. 1. 文件导航（File Navigator） 区域列出了 HTML、JavaScript、CSS 和包括图片在内的其他依附于此页面的文件。Chrome 扩展程序也会显示在这。
   3. 代码编辑（Code Editor） 区域展示源码。
   4. JavaScript 调试（JavaScript Debugging） 区域是用于调试的，我们很快就会来探索它。
2. 控制台
   1. 可以输入一些命令然后按下 Enter 来执行。
3. 断点（Breakpoints）
   1. 条件断点，在行号上 右键单击 允许你创建一个 条件 断点。只有当给定的表达式（你创建条件断点时提供的表达式）为真时才会被触发。
4. “debugger” 命令
5. 暂停并查看
   1. 察看（Watch） —— 显示任意表达式的当前值。
   2. 调用栈（Call Stack） —— 显示嵌套的调用链。
   3. 作用域（Scope） —— 显示当前的变量。
      1. Local 显示当前函数中的变量，你还可以在源代码中看到它们的值高亮显示了出来
      2. Global 显示全局变量（不在任何函数中）。
6. 跟踪执行
   1. ▶—— “恢复（Resume）”：继续执行，快捷键 F8。放行那个符号
   2. ->· —— “下一步（Step）”：运行下一条（即当前行）指令，快捷键 F9。
   3. ↻  —— “跨步（Step over）”：运行下一条（即当前行）指令，但 不会进入到一个函数中，快捷键 F10。
   4. ↓—— “步入（Step into）”，快捷键 F11。
   5. ↑—— “步出（Step out）”：继续执行到当前函数的末尾，快捷键 Shift+F11。
   6. —— 启用/禁用所有的断点。
   7. —— 启用/禁用出现错误时自动暂停脚本执行。
   8. 在代码中的某一行上右键，在显示的关联菜单（context menu）中点击一个非常有用的名为 “Continue to here” 的选项。
7. 日志记录
   1. console.log()

代码风格

代码必须尽可能的清晰和易读。

1. 语法
   1. 没有什么规则是“必须”的
2. 花括号
   1. 花括号以 “Egyptian” 风格（译注：“egyptian” 风格又称 K&R 风格
   2. 比如if的执行代码体只有一行的时候，就不需要花括号
   3. 单独拆分出的一行 要带花括号
3. 行的长度
   1. 没有人喜欢读一长串代码，最好将代码分割一下，增加可读性和美观
4. 缩进
   1. 水平方向上的缩进：2 或 4 个空格。
   2. 垂直方向上的缩进：用于将代码拆分成逻辑块的空行。
5. 分号
   1. 每一个语句后面都应该有一个分号。即使它可以被跳过。
6. 嵌套的层级
   1. 尽量避免代码嵌套层级过深。
7. 函数位置
   1. 先写调用代码，再写函数
8. 风格指南
   • Google JavaScript 风格指南
   • Airbnb JavaScript 风格指南
   • Idiomatic.JS
   • StandardJS
9. 自动检查器
   • JSLint —— 第一批检查器之一。
   • JSHint —— 比 JSLint 多了更多设置。
   • ESLint —— 应该是最新的一个。
     1. 使用EsLint
     2. 安装 Node.JS。
     3. 使用 npm install -g eslint 命令（npm 是一个 JavaScript 包安装工具）安装 ESLint。
     4. 在 JavaScript 项目的根目录（包含该项目的所有文件的那个文件夹）创建一个名为 .eslintrc 的配置文件
     5. 在集成了 ESLint 的编辑器中安装/启用插件。大多数编辑器都有这个选项。

注释

注释可以是以 // 开始的单行注释，也可以是 /* ... */ 结构的多行注释，vscode块级注释  Alt + Shift + A

1. 配方：分解函数
   1. 用一个函数来代替一个代码片段是更好的
2. 配方：创建函数
3. 好的注释
   1. 描述架构
   2. 记录函数的参数和用法
4. 避免注释
   1. • 描述“代码如何工作”和“代码做了什么”。
   2. • 避免在代码已经足够简单或代码有很好的自描述性而不需要注释的情况下，还写些没必要的注释。

忍者代码

前辈写代码的技巧 https://zh.javascript.info/ninja-code

使用 Mocha 进行自动化测试

当通过手动重新运行来测试代码时，很容易漏掉一些东西。自动化测试意味着测试是独立于代码的。它们以各种方式运行我们的函数，并将结果与预期结果进行比较。

1. 行为驱动开发（BDD）
   1. BDD 包含了三部分内容：测试、文档和示例。
2. 规范

	describe("pow", function() {
	
	  it("raises to n-th power", function() {
	    assert.equal(pow(2, 3), 8);
	  });
	
	});
	1. describe：我们正在描述的功能是什么。在我们的例子中我们正在描述函数 `pow`。用于组织“工人（workers）” —— `it` 代码块。
	2. it：里面的描述部分，我们以一种 **易于理解** 的方式描述特定的用例，第二个参数是用于对其进行测试的函数。
	3. assert：`it` 块中的代码，如果实现是正确的，它应该在执行的时候不产生任何错误。
	4.

3. 开发流程
   1. 编写初始规范，测试最基本的功能。
   2. 创建一个最初始的实现。
   3. 检查它是否工作，我们运行测试框架 Mocha（很快会有更多细节）来运行测试。当功能未完成时，将显示错误。我们持续修正直到一切都能工作。
   4. 现在我们有一个带有测试的能工作的初步实现。
   5. 我们增加更多的用例到规范中，或许目前的程序实现还不支持。无法通过测试。
   6. 回到第 3 步，更新程序直到测试不会抛出错误。
   7. 重复第 3 步到第 6 步，直到功能完善。
4. 行为规范
   1. • Mocha —— 核心框架：提供了包括通用型测试函数 describe 和 it，以及用于运行测试的主函数。
   2. • Chai —— 提供很多断言（assertion）支持的库。它提供了很多不同的断言，现在我们只需要用 assert.equal。
   3. • Sinon —— 用于监视函数、模拟内建函数和其他函数的库，我们在后面才会用到它。
5. 初始实现
6. 改进规范
7. 一个测试检查一个东西。
   1. 有两个相互独立的检查 —— 最好将它拆分成两个更简单的检查。

Polyfill 和转译器

1. 转译器（Transpilers）
   1. 转译器 是一种可以将源码转译成另一种源码的特殊的软件。
   2. height ?? 100 重写为 (height !== undefined && height !== null) ? height : 100。
2. 垫片（Polyfills）
   1. 新的语言特性可能不仅包括语法结构和运算符，还可能包括内建函数。

	if (!Math.trunc) { // 如果没有这个函数
	  // 实现它
	  Math.trunc = function(number) {
	    // Math.ceil 和 Math.floor 甚至存在于上古年代的 JavaScript 引擎中
	    // 在本教程的后续章节中会讲到它们
	    return number < 0 ? Math.ceil(number) : Math.floor(number);
	  };
	}

3. 搭建一个基于 webpack 和 babel-loader 插件的代码构建系统。
   1. https://compat-table.github.io/compat-table/es6/ —— 对于原生 JavaScript。
   2. https://caniuse.com/ —— 对于浏览器相关的函数。