代码质量

代码风格

花括号风格

if (n < 0) {
  console.info(`Power ${n} is not supported`);
}

// 或者极短一行
if (n < 0) return null;

避免长行

一行代码的最大长度通常是 80 或 120 个字符。

// 回勾引号 ` 允许将字符串拆分为多行
let str = `
  ECMA International's TC39 is a group of JavaScript developers,
  implementers, academics, and more, collaborating with the community
  to maintain and evolve the definition of JavaScript.
`;

// 多条件判断
if (
  id === 123 &&
  moonPhase === 'Waning Gibbous' &&
  zodiacSign === 'Libra'
) {
  doSomething();
}

缩进

水平方向：2 或 4 个空格。(使用Tab或者空格键)

show(parameters,
     aligned, // 左边有 5 个空格，使用空格键更加灵活
     one,
     after,
     another
  ) {
  // ...
}

垂直方向：用于将代码拆分成逻辑块的空行。

写代码时，不应该出现连续超过 9 行都没有被垂直分割的代码。

function pow(x, n) {
  let result = 1;
  //  空行隔开循环逻辑块
  for (let i = 0; i < n; i++) {
    result *= x;
  }
  //  空行隔开返回逻辑块
  return result;
}

分号

每一个语句后面都应该有一个分号。

避免层级嵌套

function pow(x, n) {
    if (n < 0) {
    console.info("Negative 'n' not supported");
    return;
    }
    // 上方直接判断退出
    // 下方直接处于函数体的词法环境中，而不是else层级嵌套中
    let result = 1;

    for (let i = 0; i < n; i++) {
    result *= x;
    }

    return result;
}

函数位置

一种是先统一声明再调用

// 函数声明
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

// 调用函数的代码
let elem = createElement();
setHandler(elem);
walkAround();

另一种是先调用再统一声明(此种方法更好)

// 调用函数的代码
let elem = createElement();
setHandler(elem);
walkAround();

// --- 辅助函数 ---
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

自动检查器

ESLint
使用方法：

安装 Node.JS。

链接：Node安装

推荐搭配 nvm 使用
使用 npm install -g eslint 命令安装 ESLint。
在 JavaScript 项目的根目录创建一个名为 .eslintrc 的配置文件。
在集成了 ESLint 的编辑器中安装/启用插件(推荐使用Visual Studio Code)。

调试

// 待调试代码之前
// 运行到此，代码会进入调试模式
debugger
// 待调试代码之后

垫片和转译器

让现代的代码在还不支持最新特性的旧引擎上工作的利器

`Transpilers` (转译器)

将源码转译成另一种源码的特殊的软件。
可以将新特性转换成使用旧方法实现。

// 在运行转译器之前
height = height ?? 100;

// 在运行转译器之后
height = (height !== undefined && height !== null) ? height : 100;

著名转译器：Babel

`Polyfill` (垫片)

新的语言特性可能不仅包括语法结构和运算符，还可能包括内建函数。转译器此时无法发挥能力。

只需要声明缺失的函数即可，更新/添加新函数的脚本被称为polyfill。它填补了空白并添加了缺失的实现。因此称为垫片。

垫片原理：

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

polyfill 库：core js