深入“JS” 前端，从规范开始

572 06-23

命名规范

1 、避免单字母的名字。用你的命名来描述功能（最好使用动词命名）。

2 、在命名对象、函数和实例时使用驼峰命名法（camelCase）。

3 、只有在命名构造器或者类的时候才用帕斯卡拼命名法。（PascalCase 每个单词的第一个字母都大写）

class User {
  constructor(options) {
    this.name = options.name;
  }
}
const good = new User({
  name: 'yup',
});
复制代码

4 、不要使用前置或者后置下划线。

5 、文件名应该和默认导出的名称完全匹配。

6 、当你导出一个构造器 / 类 / 单例 / 函数库 / 暴露的对象时应该使用帕斯卡命名法。

7 、缩略词和缩写都必须是全部大写或者全部小写。

变量

1、使用 const 或者 let 来定义变量。避免污染全局命名空间。（最好使用名词命名）把 const 声明的放在一起，把 let 声明的放在一起。这在后边如果需要根据前边的赋值变量指定一个变量时很有用。

2、在你需要的使用定义变量，但是要把它们放在一个合理的地方。 let 和 const 是块级作用域而不是函数作用域。

3、不要链式变量赋值。链式变量赋值会创建隐式全局变量。

(function example() {
  let a = 1;
  let b = a;
  let c = a;
}());
console.log(a); // throws ReferenceError
console.log(b); // throws ReferenceError
console.log(c); // throws ReferenceError
// 对于 `const` 也一样
复制代码

注释

1、使用 /** ... */ 来进行多行注释。

2、使用 // 进行单行注释。将单行注释放在需要注释的行的上方新行。在注释之前放一个空行，除非它在块的第一行。

空格

1、使用 tabs (空格字符) 设置为 2 个空格。

2、在主体前放置一个空格。

3、在控制语句（if, while 等）开始括号之前放置一个空格。在函数调用和是声明中，在参数列表和函数名之间没有空格。

4、用空格分离操作符。

5、在块和下一个语句之前留下一空白行。

6、不要在括号内添加空格。

7、不要在中括号中添加空格。

8、在花括号内添加空格。 const foo = { clark: 'kent' };

9、要求打开的块标志和同一行上的标志拥有一致的间距。此规则还会在同一行关闭的块标记和前边的标记强制实施一致的间距。

10、逗号之前避免使用空格，逗号之后需要使用空格。

11、在行的末尾避免使用空格。

分号

每一行结束加分号结尾

方法

1、使用命名的函数表达式代替函数声明。函数声明是挂起的，这意味着在它在文件中定义之前，很容易引用函数。这会损害可读性和可维护性。 // 从变量引用调用中区分的词汇名称

const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
};
复制代码

2、 Wrap立即调用函数表达式。立即调用的函数表达式是单个单元 - 包装，并且拥有括号调用, 在括号内, 清晰的表达式。

(function () {
  console.log('Welcome to the Internet. Please follow me.');
}());
复制代码

3、切记不要在非功能块中声明函数 (if, while, 等)。将函数赋值给变量。

4、避免使用默认参数的副作用。他们很容易混淆。

5、总是把默认参数放在最后。

6、函数签名中的间距。一致性很好，在删除或添加名称时不需要添加或删除空格。

7、优先使用扩展运算符 ... 来调用可变参数函数它更加干净，你不需要提供上下文。

箭头函数

1、当你必须使用匿名函数时 (当传递内联函数时)，使用箭头函数。它创建了一个在 this 上下文中执行的函数版本，它通常是你想要的，并且是一个更简洁的语法。如果你有一个相当复杂的函数，你可以把这个逻辑转移到它自己的命名函数表达式中。

[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});
复制代码

2、如果表达式跨越多个行，用括号将其括起来，以获得更好的可读性。它清楚地显示了函数的起点和终点。

['get', 'post', 'put'].map(httpMethod => (
  Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod,
  )
));
复制代码

3、如果你的函数接收一个参数，则可以不用括号，省略括号。否则，为了保证清晰和一致性，需要在参数周围加上括号。注意：总是使用括号是可以接受的，在这种情况下，我们使用 “always” option 来配置减少视觉上的混乱。

4、避免箭头函数符号 (=>) 和比较运算符 (<=, >=) 的混淆。

5、注意带有隐式返回的箭头函数函数体的位置。

(foo) => bar;
(foo) => (bar);
(foo) => (
  bar
)
复制代码

类和构造器

1、尽量使用 class. 避免直接操作 prototype . class 语法更简洁，更容易推理。

class Queue {
  constructor(contents = []) {
    this.queue = [...contents];
  }
  pop() {
    const value = this.queue[0];
    this.queue.splice(0, 1);
    return value;
  }
}
复制代码

2、使用 extends 来扩展继承。它是一个内置的方法，可以在不破坏 instanceof 的情况下继承原型功能。

class PeekableQueue extends Queue {
  peek() {
    return this.queue[0];
  }
}
复制代码

3、方法返回了 this 来供其内部方法调用。

class Jedi {
  jump() {
    this.jumping = true;
    return this;
  }
  setHeight(height) {
    this.height = height;
    return this;
  }
}
const luke = new Jedi();
luke.jump()
.setHeight(20);
复制代码

4、如果没有指定类，则类具有默认的构造器。一个空的构造器或是一个代表父类的函数是没有必要的。

class Rey extends Jedi {
  constructor(...args) {
    super(...args);
    this.name = 'Rey';
  }
}
复制代码

5、避免定义重复的类成员。重复的类成员声明将会默认倾向于最后一个 - 具有重复的类成员可以说是一个错误。

class Foo {
  bar() { return 1; }
}
class Foo {
  bar() { return 2; }
}
复制代码

比较运算符和等号

1、使用 === 和 !== 而不是 == 和 !=。

2、条件语句，例如 if 语句使用 ToBoolean 的抽象方法来计算表达式的结果，并始终遵循以下简单的规则： Objects 的取值为： true Undefined 的取值为： false Null 的取值为： false Booleans 的取值为：布尔值的取值 Numbers 的取值为：如果为 +0, -0, or NaN 值为 false 否则为 true Strings 的取值为: 如果是一个空字符串 '' 值为 false 否则为 true

3、对于布尔值使用简写，但是对于字符串和数字进行显式比较。

4、获取更多信息请查看 Angus Croll 的 Truth Equality and JavaScript 。

5、在 case 和 default 的子句中，如果存在声明 (例如. let, const, function, 和 class)，使用大括号来创建块。

6、三目表达式不应该嵌套，通常是单行表达式。

7、避免不必要的三目表达式。

8、使用该混合运算符时，使用括号括起来。唯一例外的是标准算数运算符 (+, -, *, & /) 因为他们的优先级被广泛理解。这能提高可读性并且表明开发人员的意图。

const foo = (a && b < 0) || c > 0 || (d + 1 === 0);
const bar = (a ** b) - (5 % d);
if (a || (b && c)) {
  return d;
}
const bar = a + b / c * d;
复制代码

代码块

1、当有多行代码块的时候，使用大括号包裹。

2、如果你使用的是 if 和 else 的多行代码块，则将 else 语句放在 if 块闭括号同一行的位置。

3、如果一个 if 块总是执行一个 return 语句，那么接下来的 else 块就没有必要了。如果一个包含 return 语句的 else if 块，在一个包含了 return 语句的 if 块之后，那么可以拆成多个 if 块。

function cats() {
  if (x) {
    return x;
  }
  if (y) {
    return y;
  }
}

function dogs(x) {
  if (x) {
    if (z) {
      return y;
    }
  } else {
    return z;
  }
}

深入“JS” 前端，从 规范 开始

变量

注释

空格

分号

方法

箭头函数

类和构造器

比较运算符和等号

代码块

深入“JS” 前端，从规范开始