> For the complete documentation index, see [llms.txt](https://mitudegaoyang.gitbook.io/j/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mitudegaoyang.gitbook.io/j/codereview/airbnbjavascript.md).

# AirbnbJavaScript风格指南

#### 作者：高天阳

#### 邮箱：<13683265113@163.com>

```
更改历史

* 2018-09-14    高天阳    更新目录
* 2017-11-14    高天阳    初始化文档
```

## 1 目录

1. [类型](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#类型)
2. [对象](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#对象)
3. [数组](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#数组)
4. [字符串](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#字符串)
5. [函数](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#函数)
6. [属性](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#属性)
7. [变量](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#变量)
8. [提升](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#提升)
9. [比较运算符和等号](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#比较运算符和等号)
10. [块](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#块)
11. [注释](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#注释)
12. [空白](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#空白)
13. [逗号](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#逗号)
14. [分号](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#分号)
15. [类型转化](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#类型转化)
16. [命名规则](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#命名规则)
17. [存取器](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#存取器)
18. [构造函数](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#构造函数)
19. [事件](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#事件)
20. [模块](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#模块)
21. [jQuery的](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#jQuery的)
22. [ECMAScript 5兼容性](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#ECMAScript%205兼容性)
23. [测试](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#测试)
24. [性能](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#性能)
25. [资源](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#资源)
26. [谁在使用](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#谁在使用)
27. [翻译](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#翻译)
28. [JavaScript风格指南说明](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#JavaScript风格指南说明)
29. [与我们讨论JavaScript](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#与我们讨论JavaScript)
30. [贡献者](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#贡献者)
31. [许可](https://mitudegaoyang.gitbook.io/j/codereview/pages/-MU324eBsXcCyNqRrtxw#许可)

## 2 正文

### 2.1 类型 <a href="#lei-xing" id="lei-xing"></a>

* **原始值**：存取直接作用于它自身。
  * string
  * number
  * boolean
  * null
  * undefined

```
var foo = 1;
var bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9
```

* **复杂类型**：存在时作用于它自身值的引用。
  * object
  * array
  * function

```
var foo = [1, 2];
var bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9
```

### 2.2 对象 <a href="#dui-xiang" id="dui-xiang"></a>

* 使用直接量创建对象。

```
// bad
var item = new Object();

// good
var item = {};
```

* 不要使用[保留字](http://es5.github.io/#x7.6.1)作为键名，它们在IE8下不工作。[更多信息](https://github.com/airbnb/javascript/issues/61)。

```
// bad
var superman = {
  default: { clark: 'kent' },
  private: true
};

// good
var superman = {
  defaults: { clark: 'kent' },
  hidden: true
};
```

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

```
// bad
var superman = {
  class: 'alien'
};

// bad
var superman = {
  klass: 'alien'
};

// good
var superman = {
  type: 'alien'
};
```

### 2.3 数组 <a href="#shu-zu" id="shu-zu"></a>

* 使用直接量创建数组。

```
// bad
var items = new Array();

// good
var items = [];
```

* 向数组增加元素时使用Array＃push来替代直接赋值。

javascript

var someStack = \[];

```
// bad
someStack[someStack.length] = 'abracadabra';

// good
someStack.push('abracadabra');
```

* 当你需要拷贝数组时，使用Array＃[slice。jsPerf](https://jsperf.com/converting-arguments-to-an-array/7)

```
var len = items.length;
var itemsCopy = [];
var i;

// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
itemsCopy = items.slice();
```

> Demo

```
// bad
var a = [1,2,3];
var b = a;

console.log(a);// => [1,2,3]
console.log(b);// => [1,2,3]

a[0]=4;

console.log(a);// => [4,2,3]
console.log(b);// => [4,2,3]
```

```
// bad
var a = [1,2,3];
var b = [];

console.log(a);// => [1,2,3]
console.log(b);// => []

for(var i=0; i<a.length; i++){b[i]=a[i]}

console.log(a);// => [1,2,3]
console.log(b);// => [1,2,3]

a[0]=4;

console.log(a);// => [4,2,3]
console.log(b);// => [1,2,3]
```

```
// good
var a = [1,2,3];
var b = a.slice();

console.log(a);// => [1,2,3]
console.log(b);// => [1,2,3]

a[0]=4;

console.log(a);// => [4,2,3]
console.log(b);// => [1,2,3]
```

* 使用[Array＃slice](https://www.cnblogs.com/dingxiaoyue/p/4948166.html)将类数组对象转换成数组。

```
function trigger() {
  var args = Array.prototype.slice.call(arguments);
  ...
}
```

> Demo

```
function trigger() {
  var args = Array.prototype.slice.call(arguments);
  return args
}
function trigger2() {
  return arguments
}

// bad
a = trigger2('a','b','c','d') // 此时a为类数组对象
a.push('e');// => Uncaught TypeError: a.push is not a function

// good
a = trigger('a','b','c','d') // 此时a为数组对象
a.push('e');
console.log(a);// => ["a", "b", "c", "d", "e"]
```

### 2.4 字符串 <a href="#zi-fu-chuan" id="zi-fu-chuan"></a>

* 使用单引号''包裹字符串。

```
// bad
var name = "Bob Parr";

// good
var name = 'Bob Parr';

// bad
var fullName = "Bob " + this.lastName;

// good
var fullName = 'Bob ' + this.lastName;
```

* 超过100个字符的字符串应该使用连接符写成多行。
* 注：若过度使用，通过连接符连接的长字符串可能会影响性能。[jsPerf](https://jsperf.com/ya-string-concat)＆[讨论](https://github.com/airbnb/javascript/issues/40)。

```
// bad
var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

// bad
var errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';

// good
var errorMessage = 'This is a super long error that was thrown because ' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';
```

* 程序化生成的字符串使用Array＃join连接而不是使用连接符。尤其是IE下：[jsPerf](http://jsperf.com/string-vs-array-concat/2)。

```
var items;
var messages;
var length;
var i;

messages = [{
  state: 'success',
  message: 'This one worked.'
}, {
  state: 'success',
  message: 'This one worked as well.'
}, {
  state: 'error',
  message: 'This one did not work.'
}];

length = messages.length;

// bad
function inbox(messages) {
  items = '<ul>';

  for (i = 0; i < length; i++) {
    items += '<li>' + messages[i].message + '</li>';
  }

  return items + '</ul>';
}

// good
function inbox(messages) {
  items = [];

  for (i = 0; i < length; i++) {
    // use direct assignment in this case because we're micro-optimizing.
    items[i] = '<li>' + messages[i].message + '</li>';
  }

  return '<ul>' + items.join('') + '</ul>';
}
```

### 2.5 函数 <a href="#han-shu" id="han-shu"></a>

* 函数表达式：

```
// 匿名函数表达式
var anonymous = function() {
  return true;
};

// 命名函数表达式
var named = function named() {
  return true;
};

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

* 永远不要在一个非函数代码块（if，while等）中声明一个函数，把那个函数赋予给一个变量。但是它们的解析表现不一致。
* **注意： ECMA-262**把`块`定义为一组语句。函数声明不是语句。[阅读对ECMA-262这个问题的说明](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97)。

```
// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// good
var test;
if (currentUser) {
  test = function test() {
    console.log('Yup.');
  };
}
```

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

```
// bad
function nope(name, options, arguments) {
  // ...stuff...
}

// good
function yup(name, options, args) {
  // ...stuff...
}
```

### 2.6 属性 <a href="#shu-xing" id="shu-xing"></a>

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

```
var luke = {
  jedi: true,
  age: 28
};

// bad
var isJedi = luke['jedi'];

// good
var isJedi = luke.jedi;
```

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

```
var luke = {
  jedi: true,
  age: 28
};

function getProp(prop) {
  return luke[prop];
}

var isJedi = getProp('jedi');
```

### 2.7 变量 <a href="#bian-liang" id="bian-liang"></a>

* 使用总是`var`来声明变量。不这么做将导致产生全局变量。我们要避免污染全局命名空间。

```
// bad
superPower = new SuperPower();

// good
var superPower = new SuperPower();
```

* 使用`var`声明每一个变量。

这样做的好处是增加新变量将变的更加容易，你而且永远不用再担心调换错`;`跟`,`。

```
// bad
var items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

// bad
// （跟上面的代码比较一下，看看哪里错了）
var items = getItems(),
    goSportsTeam = true;
    dragonball = 'z';

// good
var items = getItems();
var goSportsTeam = true;
var dragonball = 'z';
```

* 最后再声明未赋值的变量。当你需要引用前面的变量赋值时这将变的很有用。

```
// bad
var i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// bad
var i;
var items = getItems();
var dragonball;
var goSportsTeam = true;
var len;

// good
var items = getItems();
var goSportsTeam = true;
var dragonball;
var length;
var i;
```

* 在作用域顶部声明变量。这将帮你避免变量声明提升相关的问题。

```
// bad
function () {
  test();
  console.log('doing stuff..');

  //..other stuff..

  var name = getName();

  if (name === 'test') {
    return false;
  }

  return name;
}

// good
function () {
  var name = getName();

  test();
  console.log('doing stuff..');

  //..other stuff..

  if (name === 'test') {
    return false;
  }

  return name;
}

// bad - 不必要的函数调用
function () {
  var name = getName();

  if (!arguments.length) {
    return false;
  }

  this.setFirstName(name);

  return true;
}

// good
function () {
  var name;

  if (!arguments.length) {
    return false;
  }

  name = getName();
  this.setFirstName(name);

  return true;
}
```

* \`\`\`

```
-
```

\`\`\`

> 难点：最佳实践，超出于示例，应该归纳总结出积累的技巧。

## 3 同类技术对比

> 难点：归纳比对项

## 参考资料

* [大道至简非简博客](http://www.jianshu.com/p/86331bdbf970)