Airbnb JavaScript 代码规范（ES6）

太过爱你忘了你带给我的痛 2022-05-29 01:38 567阅读 0赞

## [Airbnb JavaScript 代码规范（ES6）][Airbnb JavaScript _ES6] ##

### 1. 类型 ###

1.1 **基本类型**: 直接存取基本类型（字符串、数值、布尔类型、null、undefined）。

1.2 **复杂类型**: 通过引用的方式存取复杂类型（对象、数组、函数）。

### 2. 引用 ###

2.1 对所有的引用使用 `const` ；避免使用 `var`。确保你无法对引用重新赋值，也不会导致出现 bug 或难以理解。

2.2 如果你一定需要可变动的引用，使用 `let` 代替 `var`。因为 `let` 是块级作用域，而 `var` 是函数作用域。

2.3 注意 let 和 const 都是块级作用域。const 和 let 只存在于它们被定义的区块内。

### 3. 对象 ###

3.1 使用字面值创建对象。

3.2 如果你的代码在浏览器环境下执行，别使用 `保留字` 作为键值。这样的话在 IE8 不会运行。但在 ES6 模块和服务器端中使用没有问题。

3.3 使用同义词替换需要使用的保留字。

3.4 创建有动态属性名的对象时，使用可被计算的属性名称。这样可以让你在一个地方定义所有的对象属性。

3.5 使用对象方法的简写。

3.6 使用对象属性值的简写。

3.7 在对象属性声明前把简写的属性分组。这样能清楚地看出哪些属性使用了简写。

### 4. 数组 ###

4.1 使用字面值创建数组。

4.2 向数组添加元素时使用 Arrary\#push 替代直接赋值。

4.3 使用拓展运算符`...`复制数组。

4.4 使用 Array\#from 把一个类数组对象转换成数组。

### 5. 解构 ###

5.1 使用解构存取和使用多属性对象。解构能减少临时引用属性。

5.2 对数组使用解构赋值。

5.3 需要回传多个值时，使用对象解构，而不是数组解构。这样增加属性或者改变排序不会改变调用时的位置。

### 6. 字符串 ###

6.1 字符串使用单引号 `''` 。

6.2 字符串超过 80 个字节应该使用字符串连接号换行。

6.3 不过度使用字串连接符号`\` 。过度使用字串连接符号可能会对性能造成影响。

6.4 程序化生成字符串时，使用模板字符串代替字符串连接。模板字符串更为简洁，更具可读性。

### 7. 函数 ###

7.1 使用函数声明代替函数表达式。因为函数声明是可命名的，所以他们在调用栈中更容易被识别。此外，函数声明会把整个函数提升（hoisted），而函数表达式只会把函数的引用变量名提升。这条规则使得箭头函数可以取代函数表达式。

7.2 函数表达式:

// 立即调用的函数表达式 (IIFE)
    (() => { console.log('Welcome to the Internet. Please follow me.'); })();

7.3 永远不要在一个非函数代码块（if、while 等）中声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但它们的解析表现不一致。

7.4 注意: ECMA-262 把 `block` 定义为一组语句。函数声明不是语句。

// bad
    if (currentUser) {
      function test() {
        console.log('Nope.');
      }
    }
    
    // good
    let test;
    if (currentUser) {
      test = () => {
        console.log('Yup.');
      };
    }

7.5 永远不要把参数命名为 `arguments`。这将取代原来函数作用域内的 `arguments` 对象。

7.6 不要使用 `arguments`。可以选择 rest 语法 `...` 替代。使用 `...` 能明确你要传入的参数。另外 rest 参数是一个真正的数组，而 `arguments`是一个类数组。

7.7 直接给函数的参数指定默认值，不要使用一个变化的函数参数。

7.8 直接给函数参数赋值时需要避免副作用。

### 8. 箭头函数 ###

8.1 当你必须使用函数表达式（或传递一个匿名函数）时，使用箭头函数符号。因为箭头函数创造了新的一个 this 执行环境，通常情况下都能满足你的需求，而且这样的写法更为简洁。

8.2 如果一个函数适合用一行写出并且只有一个参数，那就把花括号、圆括号和 return 都省略掉。如果不是，那就不要省略。

### 9. 构造函数 ###

9.1 总是使用 class。避免直接操作 prototype 。因为 class 语法更为简洁更易读。

9.2 使用 extends 继承。因为 `extends` 是一个内建的原型继承方法并且不会破坏 `instanceof`。

9.3 方法可以返回 `this` 来帮助链式调用。

9.4 可以写一个自定义的 `toString()` 方法，但要确保它能正常运行并且不会引起副作用。

### 10. 模块 ###

10.1 总是使用模组 (import/export) 而不是其他非标准模块系统。你可以编译为你喜欢的模块系统。

10.2 不要使用通配符 import。这样能确保你只有一个默认 export。

10.3 不要从 import 中直接 export。虽然一行代码简洁明了，但让 import 和 export 各司其职,让事情能保持一致。

### 11. Iterators & Generators ###

11.1 不要使用 `iterators`。使用高阶函数例如 `map()` 和 `reduce()` 替代 `for-of`。

11.2 现在还不要使用 `generators`。因为它们现在还没法很好地编译到 ES5。

### 12. 属性 ###

12.1 使用 `.`来访问对象的属性。

12.2 当通过变量访问属性时使用中括号 `[]`。

### 13. 变量 ###

13.1 一直使用 `const` 来声明变量，如果不这样做就会产生全局变量。我们需要避免全局命名空间的污染。

13.2 使用 `const` 声明每一个变量。增加新变量将变的更加容易，而且你永远不用再担心调换错 ; 跟 ,。

13.3 将所有的 const 和 let 分组。当你需要把已赋值变量赋值给未赋值变量时非常有用。

13.4 在你需要的地方给变量赋值，但请把它们放在一个合理的位置。

### 14. 提升 ###

14.1 `var` 声明会被提升至该作用域的顶部，但它们赋值不会提升。let 和 const 被赋予了一种称为「暂时性死区（Temporal Dead Zones, TDZ）」的概念。这对于了解为什么 `type of` 不再安全相当重要。

14.2 匿名函数表达式的变量名会被提升，但函数内容并不会。

function example() {
      console.log(anonymous); // => undefined
    
      anonymous(); // => TypeError anonymous is not a function
    
      var anonymous = function() {
        console.log('anonymous function expression');
      };
    }

14.3 命名的函数表达式的变量名会被提升，但函数名（即使和变量名相同）和函数的函数内容并不会。

14.4 函数声明的名称和函数体都会被提升。

function example() { 
      superPower(); // => Flying
    
      function superPower() { 
        console.log('Flying');
      }
    }

### 15. 比较运算符 & 等号 ###

15.1 优先使用 `===` 和 `!==` 而不是`==` 和 `!=`。

15.2 条件表达式例如 `if` 语句通过抽象方法 `ToBoolean` 强制计算它们的表达式并且总是遵守下面的规则：

*  **对象** 被计算为 **true**
 *  **Undefined** 被计算为 **false**
 *  **Null** 被计算为 **false**
 *  **布尔值** 被计算为 **布尔的值**
 *  **数字** 如果是 **+0、-0、或 NaN** 被计算为 **false**, 否则为 **true**
 *  **字符串** 如果是空字符串 `''` 被计算为 **false**，否则为 **true**

15.3 使用简写。

// bad
    if (name !== '') {
      // ...stuff...
    }
    
    // good
    if (name) {
      // ...stuff...
    }
    
    // bad
    if (collection.length > 0) {
      // ...stuff...
    }
    
    // good
    if (collection.length) {
      // ...stuff...
    }

### 16. 代码块 ###

16.1 使用大括号包裹所有的多行代码块。

16.2 如果通过 if 和 else 使用多行代码块，把 else 放在 if 代码块关闭括号的同一行。

### 17. 注释 ###

17.1 使用 `/** ... */` 作为多行注释。包含描述、指定所有参数和返回值的类型和值。

17.2 使用 `//` 作为单行注释。在评论对象上面另起一行使用单行注释。在注释前插入空行。

17.3 给注释增加 `FIXME` 或 `TODO` 的前缀可以帮助其他开发者快速了解这是一个需要复查的问题，或是给需要实现的功能提供一个解决方式。这将有别于常见的注释，因为它们是可操作的。使用`FIXME -- need to figure this out` 或者 `TODO -- need to implement`。

17.4 使用 `// FIXME`: 标注问题。

17.5 使用 `// TODO`: 标注问题的解决方式。

### 18. 空白 ###

18.1 使用 2 个空格作为缩进。

18.2 在花括号前放一个空格。

18.3 在控制语句（if、while 等）的小括号前放一个空格。在函数调用及声明中，不在函数的参数列表前加空格。

18.4 使用空格把运算符隔开。

18.5 在文件末尾插入一个空行。

18.5 在使用长方法链时进行缩进。使用前面的点 `.` 强调这是方法调用而不是新语句。

18.6 在块末和新语句前插入空行。

### 19. 逗号 ###

19.1 行首逗号：不需要。

19.2 增加结尾的逗号: 需要。

### 20. 分号 ###

20.1 使用分号

### 21. 类型转换 ###

21.1 在语句开始时执行类型转换。

21.2 字符串：

// => this.reviewScore = 9;
    
    // bad
    const totalScore = this.reviewScore + '';
    
    // good
    const totalScore = String(this.reviewScore);

21.3 对数字使用 parseInt 转换，并带上类型转换的基数。

21.4 如果因为某些原因 parseInt 成为你所做的事的瓶颈而需要使用位操作解决性能问题时，留个注释说清楚原因和你的目的。

21.5 注: 小心使用位操作运算符。数字会被当成 64 位值，但是位操作运算符总是返回 32 位的整数。位操作处理大于 32 位的整数值时还会导致意料之外的行为。最大的 32 位整数是 2,147,483,647：

2147483647 >> 0 //=> 2147483647
    2147483648 >> 0 //=> -2147483648
    2147483649 >> 0 //=> -2147483647

21.6 布尔:

const age = 0;
    
    // bad
    const hasAge = new Boolean(age);
    
    // good
    const hasAge = Boolean(age);
    
    // good
    const hasAge = !!age;

### 22. 命名规则 ###

22.1 避免单字母命名。命名应具备描述性。

22.2 使用驼峰式命名对象、函数和实例。

22.3 使用帕斯卡式(每个单词首字母大写)命名构造函数或类。

22.4 使用下划线 `_` 开头命名私有属性。

22.5 别保存 this 的引用。使用箭头函数或 Function\#bind。

22.6 如果你的文件只输出一个类，那你的文件名必须和类名完全保持一致。

22.7 当你导出默认的函数时使用驼峰式命名。你的文件名必须和函数名完全保持一致。

22.8 当你导出单例、函数库、空对象时使用帕斯卡式命名。

### 23. 存取器 ###

23.1 属性的存取函数不是必须的。

23.2 如果你需要存取函数时使用 `getVal()` 和 `setVal('hello')`。

// bad
    dragon.age();
    
    // good
    dragon.getAge();
    
    // bad
    dragon.age(25);
    
    // good
    dragon.setAge(25);

23.3 如果属性是布尔值，使用 `isVal()` 或 `hasVal()`。

23.4 创建 get() 和 set() 函数是可以的，但要保持一致。

### 24. 事件 ###

24.1 当给事件附加数据时（无论是 DOM 事件还是私有事件），传入一个哈希而不是原始值。这样可以让后面的贡献者增加更多数据到事件数据而无需找出并更新事件的每一个处理器。例如，不好的写法：

// bad
    $(this).trigger('listingUpdated', listing.id);
    
    ...
    
    $(this).on('listingUpdated', function(e, listingId) {
      // do something with listingId
    });

更好的写法：

// good
    $(this).trigger('listingUpdated', { listingId : listing.id });
    
    ...
    
    $(this).on('listingUpdated', function(e, data) {
      // do something with data.listingId
    });

### 25. jQuery ###

25.1 使用 `$` 作为存储 jQuery 对象的变量名前缀。

// bad
    const sidebar = $('.sidebar');
    
    // good
    const $sidebar = $('.sidebar');

25.2 缓存 jQuery 查询。

25.3 对 DOM 查询使用层叠 `$('.sidebar ul')` 或 父元素 > 子元素 `$('.sidebar > ul')`。

25.4 对有作用域的 jQuery 对象查询使用 `find`。

[Airbnb JavaScript _ES6]: https://www.kancloud.cn/kancloud/javascript-style-guide