Airbnb JavaScript Style Guide() {

JavaScript中更合理的使用方法

![Gitter](https://badges.gitter.im/Join Chat.svg)

其他风格指南

ES5
React
CSS & Sass
Ruby
目录
1. 类型
2. 引用
3. 对象
4. 数组
5. 解构
6. 字符串
7. 函数
8. 箭头函数
9. 构造器
10. 模块
11. 迭代器和生成器
12. 属性
13. 变量
14. 提升机制
15. 比较操作
16. 代码块
17. 注释
18. 留白
19. 逗号
20. 分号
21. 类型转换
22. 命名约定
23. 访问器
24. 事件
25. jQuery
26. ES5兼容性
27. ES6风格
28. 测试
29. 性能
30. 资源
31. 使用者
32. 翻译
33. JavaScript风格指南说明
34. 一起讨论Javascript
35. 贡献者
36. 许可证
37. 修订
  类型
1.1 基本类型: 按值访问，操作的是值.
- string
- number
- boolean
- null
- undefined
```
const foo = 1;
let bar = foo;

bar = 9;

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

1.2 引用类型: 按引用访问，操作的是值的指针.

object
array
function

const foo = [1, 2];
const bar = foo;

bar[0] = 9;

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

⬆ 返回顶部

引用

2.1 使用 const 来声明所有引用; 避免使用 var.

为什么? 这能确保不为引用重新赋值，同时避免错误的发生或产生难以理解的代码。

eslint 规则: prefer-const, no-const-assign.
```
// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;
```
2.2 如果一定要为变量重新赋值，则使用 let 代替 var。

为什么? let是块级作用域，而不是像var一样的函数作用域。

eslint 规则: no-var.
```
// bad
var count = 1;
if (true) {
  count += 1;
}

// good, use the let.
let count = 1;
if (true) {
  count += 1;
}
```

2.3 记住 let 和 const 都是块级作用域.

// const 和 let 只在他们所定义的块级内有效.
{
let a = 1;
const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError

⬆ 返回顶部

对象

3.1 使用字面量方式创建对象。

eslint 规则: no-new-object.
```
// bad
const item = new Object();

// good
const item = {};
```
3.2 如果你的代码将在浏览器环境中运行, 请不要使用保留字作为键，这样会在IE8下报错(查看更多). 但可以在ES6的模块中或服务器端正常使用。
```
// bad
const superman = {
default: { clark: 'kent' },
private: true,
};

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

3.3 使用可读性强的同义词代替保留字.

// bad
const superman = {
class: 'alien',
};

// bad
const superman = {
klass: 'alien',
};

// good
const superman = {
type: 'alien',
};

3.4 当需要使用动态属性名来创建对象时，请使用计算后的属性名。

为什么? 这样允许你在一个地方定义对象的所有属性。


function getKey(k) {
  return `a key named ${k}`;
}

// bad
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;

// good
const obj = {
  id: 5,
  name: 'San Francisco',
};

3.5 使用方法简写.

eslint 规则: object-shorthand.

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

3.6 使用属性简写.

为什么? 这样代码和描述都更简洁。

eslint 规则: object-shorthand.

const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const obj = {
  lukeSkywalker,
};

3.7 在对象声明的开头定义需要简写的属性。

为什么? 这样就能很清楚的分辨哪些属性使用了简写。

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};

⬆ 回到顶部

数组

4.1 使用字面量方式创建数组。

eslint 规则: no-array-constructor.
```
// bad
const items = new Array();

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

4.2 使用 Array#push，而不是直接为数组添加元素。

const someStack = [];

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

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

4.3 使用数组扩展运算符 ... 来复制数组。

// bad
const len = items.length;
const itemsCopy = [];
let i;

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

// good
const itemsCopy = [...items];

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

const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

⬆ 返回顶部

解构

5.1 当访问和使用对象的多个属性时，使用对象解构赋值。

为什么? 解构赋值让你不再为那些属性创建临时的引用。

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(obj) {
  const { firstName, lastName } = obj;
  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

5.2 使用数组解构赋值。

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

5.3 使用对象解构来实现多值返回，而不使用数组解构。

为什么? 你可以随时增加新的属性或改变属性的次序，而无需修改调用位置。

// bad
function processInput(input) {
  // then a miracle occurs
  return [left, right, top, bottom];
}

// 调用者需要考虑返回的数据的顺序
const [left, __, top] = processInput(input);

// good
function processInput(input) {
  // then a miracle occurs
  return { left, right, top, bottom };
}

// 调用者按需选择数据
const { left, right } = processInput(input);

⬆ 返回顶部

字符串

6.1 字符串变量使用单引号 ''。

eslint 规则: quotes.

// bad
const name = "Capt. Janeway";

// good
const name = 'Capt. Janeway';

6.2 长于100个字符的字符串，应分多行编写并采用字符串连接符拼接。

6.3 注意: 如果过度使用，用连接符连接字符串可能会影响性能jsPerf & Discussion.

// bad
const 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
const 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
const 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.';

6.4 当使用编程的方式来构建字符串时，应采用模板字符串，而不是字符串拼接。

为什么? 模板字符串会带来良好的可读性、简洁的语法、适当的换行和字符串插值的功能。

eslint 规则: prefer-template.
```
// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}
```
6.5 永远不要对字符串使用 eval() 方法，它会带来太多的漏洞。

⬆ 返回顶部

函数

7.1 使用函数声明，而不是函数表达式。

为什么? 函数声明会被命名，这样有利于在调用堆栈中查找。此外，函数声明会引起函数提升，而函数表达式只会引起引用的变量提升。此规则使得可以总是使用箭头函数来代替函数表达式。
```
// bad
const foo = function () {
};

// good
function foo() {
}
```

7.2 函数表达式:

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

7.3 永远不要在非函数块内声明函数（比如if, while 等），将该函数赋值给一个变量来代替。虽然浏览器都支持这种语法，但表现却不一致，这当然不是你想看到的。

7.4 注意: ECMA-262将 block 定义为语句列表。而函数声明并不是一条语句。阅读 ECMA-262 关于此问题的说明.

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

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

7.5 永远不要将参数命名为 arguments。这将覆盖原函数作用域的 arguments 对象。

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

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

7.6 永远不要使用 arguments，可以选择使用rest语法 ... 代替。

为什么? ... 明确的指出你需要哪些参数。另外rest参数是真正的数组，而不是像 arguments 一样的类数组。
```
// bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

// good
function concatenateAll(...args) {
  return args.join('');
}
```

7.7 使用默认参数语法，而不是改变函数参数。

// really bad
function handleThings(opts) {
// 不! 我们不应该改变函数参数。
// 更糟糕的是: 若opts被判断为false，它将会被设置成一个空对象
// 但这样可能会导致一些隐蔽的bugs.
opts = opts || {};
// ...
}

// still bad
function handleThings(opts) {
if (opts === void 0) {
  opts = {};
}
// ...
}

// good
function handleThings(opts = {}) {
// ...
}

7.8 避免默认参数的副作用。

为什么? 这种写法会给人带来困惑。

var b = 1;
// bad
function count(a = b++) {
console.log(a);
}
count();  // 1
count();  // 2
count(3); // 3
count();  // 3

7.9 将默认参数放在最后。

// bad
function handleThings(opts = {}, name) {
// ...
}

// good
function handleThings(name, opts = {}) {
// ...
}

7.10 永远不要使用函数构造器来创建一个新函数。

为什么? 用这种方式创建函数等同于将一个字符串传递给 eval()，这将带来漏洞。
```
// bad
var add = new Function('a', 'b', 'return a + b');

// still bad
var subtract = Function('a', 'b', 'return a - b');
```

7.11 在函数签名中添加空格.

为什么? 一致性好，同时当你添加或删除名称时没必要添加或删除空格。

// bad
const f = function(){};
const g = function (){};
const h = function() {};

// good
const x = function () {};
const y = function a() {};

⬆ 返回顶部

箭头函数

8.1 如果必须要使用函数表达式（当传递一个匿名函数时），请使用箭头函数符号。

为什么? 它创建了一个通常适用于你的该函数 this 的执行上下文环境，同时这种语法更加简洁。

为什么不? 如果有一个很复杂的函数，你或许可以将其逻辑部分抽离出来并用函数声明定义。

eslint 规则: prefer-arrow-callback, arrow-spacing.
```
// bad
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});
```

8.2 如果函数体仅包含一个表达式，可去掉大括号，采用隐式返回。除此之外，请使用 return语句。

为什么? 这是语法糖，当多个函数链式调用时的可读性更强。

为什么不? 当你想返回一个对象时。

eslint 规则: arrow-parens, arrow-body-style.

// good
[1, 2, 3].map(number => `A string containing the ${number}.`);

// bad
[1, 2, 3].map(number => {
  const nextNumber = number + 1;
  `A string containing the ${nextNumber}.`;
});

// good
[1, 2, 3].map(number => {
  const nextNumber = number + 1;
  return `A string containing the ${nextNumber}.`;
});

8.3 当一个返回的表达式跨越多行时，为了更好的可读性将他们用括号括起来。

为什么? 这样会很清楚的展示函数的起始与结束。

// bad
[1, 2, 3].map(number => 'As time went by, the string containing the ' +
  `${number} became much longer. So we needed to break it over multiple ` +
  'lines.'
);

// good
[1, 2, 3].map(number => (
  `As time went by, the string containing the ${number} became much ` +
  'longer. So we needed to break it over multiple lines.'
));

8.4 如果函数只有一个参数，可省略括号。

为什么? 减少视觉混乱。

eslint 规则: arrow-parens.
```
// good
[1, 2, 3].map(x => x * x);

// good
[1, 2, 3].reduce((y, x) => x + y);
```

⬆ 返回顶部

构造器

9.1 始终使用 class，避免直接操作 prototype。

为什么? class 语法更简洁，更容易理解。

// bad
function Queue(contents = []) {
  this._queue = [...contents];
}
Queue.prototype.pop = function () {
  const value = this._queue[0];
  this._queue.splice(0, 1);
  return value;
}

// good
class Queue {
  constructor(contents = []) {
    this._queue = [...contents];
  }
  pop() {
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
  }
}

9.2 使用 extends 语法实现继承。

为什么? 它是一个内置的方法来继承原型的功能，同时没有破坏 instanceof。

// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
  Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function () {
  return this._queue[0];
}

// good
class PeekableQueue extends Queue {
  peek() {
    return this._queue[0];
  }
}

9.3 各方法可返回 this 来实现方法的链式调用。

// bad
Jedi.prototype.jump = function () {
this.jumping = true;
return true;
};

Jedi.prototype.setHeight = function (height) {
this.height = height;
};

const luke = new Jedi();
luke.jump(); // => true
luke.setHeight(20); // => undefined

// good
class Jedi {
jump() {
  this.jumping = true;
  return this;
}

setHeight(height) {
  this.height = height;
  return this;
}
}

const luke = new Jedi();

luke.jump()
.setHeight(20);

9.4 可以自己写一个toString()方法，只需要保证他能正确运行并没有副作用即可。

class Jedi {
constructor(options = {}) {
  this.name = options.name || 'no name';
}

getName() {
  return this.name;
}

toString() {
  return `Jedi - ${this.getName()}`;
}
}

⬆ 返回顶部

模块

10.1 始终使用模块（import / export），而不是非标准的模块系统。这样你就能随时迁移到您更青睐的模块系统。

为什么? 模块是未来，让我们从现在就开始使用它。

// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;

// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;

// best
import { es6 } from './AirbnbStyleGuide';
export default es6;

10.2 不要使用通配符引用。

为什么? 这可以确保你有一个默认的输出。

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// good
import AirbnbStyleGuide from './AirbnbStyleGuide';

10.3 不要直接在引用的位置输出。

为什么? 尽管写在一行很简洁，但明确的指定输入与输出更规范。

// bad
// filename es6.js
export { es6 as default } from './airbnbStyleGuide';

// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;

⬆ 返回顶部

迭代器与生成器

11.1 不要使用迭代器。尽量使用Javascript的高阶函数，比如 map() 和 reduce()，来替代 for-of之类的循环。

为什么? 这强化了我们不可改变的规则。比起副作用，处理纯函数的返回值更容易让人理解。

eslint 规则: no-iterator.

const numbers = [1, 2, 3, 4, 5];

// bad
let sum = 0;
for (let num of numbers) {
  sum += num;
}

sum === 15;

// good
let sum = 0;
numbers.forEach((num) => sum += num);
sum === 15;

// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;

11.2 现在不要使用生成器。

为什么? 他们不能很好的转换成ES5.

⬆ 返回顶部

属性

12.1 使用点标记访问属性。

eslint 规则: dot-notation.

const luke = {
  jedi: true,
  age: 28,
};

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

// good
const isJedi = luke.jedi;

12.2 当属性为变量时，采用中括号 []。

const luke = {
jedi: true,
age: 28,
};

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

const isJedi = getProp('jedi');

⬆ 返回顶部

变量

13.1 始终使用 const 来声明变量，否则会导致全局变量。地球超人告诫我们要避免污染全局命名空间。
```
// bad
superPower = new SuperPower();

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

13.2 每个变量都使用一个 const 声明。

为什么? 这种方式让新变量添加更简单，同时你永远不用担心会用一个;来替换,，或引出标点符号差异。

eslint 规则: one-var.

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

// bad
// (与上面相比, 试着指出错误)
const items = getItems(),
    goSportsTeam = true;
    dragonball = 'z';

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

13.3 将所有的 const 和 let 分组。

为什么? 当你之后需要根据前面赋值的某个变量来为一个变量赋值时，这种方式将很有用。

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

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

// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;

13.4 在需要的地方为变量赋值，但应把他们放在合理的地方。

为什么? let 和 const 是块级作用域而不是函数作用域。

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

  //..other stuff..

  const name = getName();

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

  return name;
}

// bad - 没必要的函数调用
function (hasName) {
  const name = getName();

  if (!hasName) {
    return false;
  }

  this.setFirstName(name);

  return true;
}

// good
function (hasName) {
  if (!hasName) {
    return false;
  }

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

  return true;
}

⬆ 返回顶部

提升

14.1 var 变量的声明将会被提升到作用域的顶部，但赋值却不会。通过const 和 let 声明的变量被赋予了新的概念叫做时空盲区(TDZ)。重要的是要知道为什么typeof不再安全。

// 我们知道这个方法不会正常工作 (假设没有一个全局的notDefined存在)
function example() {
console.log(notDefined); // => throws a ReferenceError
}

// 由于变量提升，在引用变量之后创建一个变量声明会正常工作。
// 注意：变量的赋值 `true` 没有被提升。
function example() {
console.log(declaredButNotAssigned); // => undefined
var declaredButNotAssigned = true;
}

// 编译器会将变量声明提升到其作用域的顶部，
// 这就意味着我们的例子可以这样重写：
function example() {
let declaredButNotAssigned;
console.log(declaredButNotAssigned); // => undefined
declaredButNotAssigned = true;
}

// 使用 const 和 let 的情况则不同
function example() {
console.log(declaredButNotAssigned); // => throws a ReferenceError
console.log(typeof declaredButNotAssigned); // => throws a ReferenceError
const declaredButNotAssigned = true;
}

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 被命名的函数表达式的变量名会被提升，而函数名和函数体则不会。

function example() {
console.log(named); // => undefined

named(); // => TypeError named is not a function

superPower(); // => ReferenceError superPower is not defined

var named = function superPower() {
  console.log('Flying');
};
}

// 当函数名和变量名相同时也一样
function example() {
console.log(named); // => undefined

named(); // => TypeError named is not a function

var named = function named() {
  console.log('named');
}
}

14.4 函数声明会提升函数名和函数体。

function example() {
superPower(); // => Flying

function superPower() {
  console.log('Flying');
}
}

欲知详情，请参阅JavaScript的作用域和提升 by Ben Cherry.

⬆ 返回顶部

比较操作

15.1 使用 === 和 !== 来代替 == 和 !=.
15.2 像 if 一样的条件语句会强制使用 ToBoolean 抽象方法来计算他的表达式，这种强制转换始终遵循以下这些简单的规则：

eslint 规则: eqeqeq.
对象：转化成 true
Undefined：转化成 false
Null：转化成 false
布尔值：转化成 该布尔值
数字：若是+0, -0, 或 NaN 则转化成 false , 否则 true

字符串：如果是空字符串 ''，则转化成 false, 否则 true

if ([0]) {
// true
// 数组是对象，对象会被转化成true
}

15.3 使用简写。

// bad
if (name !== '') {
// ...stuff...
}

// good
if (name) {
// ...stuff...
}

// bad
if (collection.length > 0) {
// ...stuff...
}

// good
if (collection.length) {
// ...stuff...
}

15.4 欲知详情，请查看Angus Croll写的Truth Equality and JavaScript

⬆ 返回顶部

块

16.1 将所有的多行块用大括号括起来。

// bad
if (test)
return false;

// good
if (test) return false;

// good
if (test) {
return false;
}

// bad
function () { return false; }

// good
function () {
return false;
}

16.2 如果在 if 和 else 的语句中使用多行快，则将 else 与 if 块的反括号放在同一行。

eslint 规则: brace-style.
```
// bad
if (test) {
thing1();
thing2();
}
else {
thing3();
}

// good
if (test) {
thing1();
thing2();
} else {
thing3();
}
```

⬆ 返回顶部

注释

17.1 多行注释请使用 /** ... */ 。函数的注释应包含函数描述，所有参数的指定类型和值，以及返回值。

// bad
// make() 基于传递的标签名，返回一个新的元素
//
// @param {String} tag
// @return {Element} element
function make(tag) {

// ...stuff...

return element;
}

// good
/**
* make() 基于传递的标签名，返回一个新的元素 
* @param {String} tag
* @return {Element} element
*/
function make(tag) {

// ...stuff...

return element;
}

17.2 单行注释请使用 // 。将单行注释放到要注释的内容的上一行，且独占一行。在注释行的前面加一个空行，除非该注释是块的第一行。

// bad
const active = true;  // is current tab

// good
// is current tab
const active = true;

// bad
function getType() {
console.log('fetching type...');
// set the default type to 'no type'
const type = this._type || 'no type';

return type;
}

// good
function getType() {
console.log('fetching type...');

// set the default type to 'no type'
const type = this._type || 'no type';

return type;
}

// also good
function getType() {
// set the default type to 'no type'
const type = this._type || 'no type';

return type;
}

17.3 在注释前加上 FIXME 或 TODO，能帮助其他开发者马上理解你是在指出一个需要解决的问题，还是在提出一个问题的解决方案。这种与正常的注释不同，因为他们是可操作的。该操作包括 FIXME -- 需要搞清楚这个问题 和 TODO -- 需要实现。

17.4 Use // FIXME: to annotate problems. 使用 // FIXME: 注释问题。

class Calculator extends Abacus {
constructor() {
  super();

  // FIXME: 不应在这里使用全局变量
  total = 0;
}
}

17.5 使用 // TODO: 注释问题的解决方案。

class Calculator extends Abacus {
constructor() {
  super();

  // TODO: total应该可以通过一个选项的参数配置
  this.total = 0;
}
}

⬆ 返回顶部

空白

18.1 将tab设置为2空格。

eslint 规则: indent.

// bad
function () {
∙∙∙∙const name;
}

// bad
function () {
∙const name;
}

// good
function () {
∙∙const name;
}

18.2 在左大括号的前面加一个空格。

eslint 规则: space-before-blocks.

// bad
function test(){
  console.log('test');
}

// good
function test() {
  console.log('test');
}

// bad
dog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

// good
dog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

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

eslint 规则: space-after-keywords, space-before-keywords.
```
// bad
if(isJedi) {
  fight ();
}

// good
if (isJedi) {
  fight();
}

// bad
function fight () {
  console.log ('Swooosh!');
}

// good
function fight() {
  console.log('Swooosh!');
}
```
18.4 操作符两侧都要加空格.

eslint 规则: space-infix-ops.
```
// bad
const x=y+5;

// good
const x = y + 5;
```

18.5 在文件的最后加一个空行。

// bad
(function (global) {
// ...stuff...
})(this);

// bad
(function (global) {
// ...stuff...
})(this);↵
↵

// good
(function (global) {
// ...stuff...
})(this);↵

18.6 当使用较长的方法链式调用时，应采用缩进。在前方加点，这会突出该行是一个方法调用，而不是一个新的语句。

// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// bad
$('#items').
find('.selected').
  highlight().
  end().
find('.open').
  updateCount();

// good
$('#items')
.find('.selected')
  .highlight()
  .end()
.find('.open')
  .updateCount();

// bad
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true)
  .attr('width', (radius + margin) * 2).append('svg:g')
  .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
  .call(tron.led);

// good
const leds = stage.selectAll('.led')
  .data(data)
.enter().append('svg:svg')
  .classed('led', true)
  .attr('width', (radius + margin) * 2)
.append('svg:g')
  .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
  .call(tron.led);

18.7 在块的后面和下一个语句之前加一个空行。

// bad
if (foo) {
return bar;
}
return baz;

// good
if (foo) {
return bar;
}

return baz;

// bad
const obj = {
foo() {
},
bar() {
},
};
return obj;

// good
const obj = {
foo() {
},

bar() {
},
};

return obj;

// bad
const arr = [
function foo() {
},
function bar() {
},
];
return arr;

// good
const arr = [
function foo() {
},

function bar() {
},
];

return arr;

18.8 不要用空行包装你的块内容。

eslint 规则: padded-blocks.

// bad
function bar() {

  console.log(foo);

}

// also bad
if (baz) {

  console.log(qux);
} else {
  console.log(foo);

}

// good
function bar() {
  console.log(foo);
}

// good
if (baz) {
  console.log(qux);
} else {
  console.log(foo);
}

18.9 不要在小括号内添加空格。

eslint 规则: space-in-parens.

// bad
function bar( foo ) {
  return foo;
}

// good
function bar(foo) {
  return foo;
}

// bad
if ( foo ) {
  console.log(foo);
}

// good
if (foo) {
  console.log(foo);
}

18.10 不要在中括号内添加空格。

eslint 规则: array-bracket-spacing.

// bad
const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);

// good
const foo = [1, 2, 3];
console.log(foo[0]);

18.11 在单行大括号内添加空格。

eslint rules: object-curly-spacing.

// bad
const foo = {clark: 'kent'};

// good
const foo = { clark: 'kent' };

⬆ 返回顶部

逗号

19.1 逗号开头: 不要.

eslint 规则: comma-style.

// bad
const story = [
    once
  , upon
  , aTime
];

// good
const story = [
  once,
  upon,
  aTime,
];

// bad
const hero = {
    firstName: 'Ada'
  , lastName: 'Lovelace'
  , birthYear: 1815
  , superPower: 'computers'
};

// good
const hero = {
  firstName: 'Ada',
  lastName: 'Lovelace',
  birthYear: 1815,
  superPower: 'computers',
};

19.2 添加尾随逗号: 是.

eslint 规则: no-comma-dangle.

为什么? 这会带来清晰的git差异比较。同时，像Babel一样的转换器会在转换过程中将多余的逗号去除。这样就不用担心在老式浏览器中出现的尾随逗号问题。

// bad - 没有尾随逗号的git差异比较
const hero = {
     firstName: 'Florence',
-    lastName: 'Nightingale'
+    lastName: 'Nightingale',
+    inventorOf: ['coxcomb graph', 'modern nursing']
};

// good - 有尾随逗号的差异比较
const hero = {
     firstName: 'Florence',
     lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing'],
};

// bad
const hero = {
  firstName: 'Dana',
  lastName: 'Scully'
};

const heroes = [
  'Batman',
  'Superman'
];

// good
const hero = {
  firstName: 'Dana',
  lastName: 'Scully',
};

const heroes = [
  'Batman',
  'Superman',
];

⬆ 返回顶部

分号

20.1 语句结尾要有分号.

eslint 规则: semi.

// bad
(function () {
  const name = 'Skywalker'
  return name
})()

// good
(() => {
  const name = 'Skywalker';
  return name;
})();

// good (guards against the function becoming an argument when two files with IIFEs are concatenated)
;(() => {
  const name = 'Skywalker';
  return name;
})();

更多.

⬆ 返回顶部

类型转换

21.1 在声明的最开始进行类型转换。

21.2 字符串:

//  => this.reviewScore = 9;

// bad
const totalScore = this.reviewScore + '';

// good
const totalScore = String(this.reviewScore);

21.3 数字: 使用 Number 进行类型转换。在使用 parseInt 转换字符串时要始终带着基数。

const inputValue = '4';

// bad
const val = new Number(inputValue);

// bad
const val = +inputValue;

// bad
const val = inputValue >> 0;

// bad
const val = parseInt(inputValue);

// good
const val = Number(inputValue);

// good
const val = parseInt(inputValue, 10);

21.4 如果由于某种原因，你要做一些不可控（wild）事情， parseInt 方法会是你的瓶颈。由于性能原因，此时就需要使用比特位移（Bitshift），然后再注释一下为什么这么做以及怎么做的。
```
// good
/**
* parseInt是导致代码慢的原因.
* 使用比特位移将字符串转换成数字对执行速度提升很大。
*/
const val = inputValue >> 0;
```
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.1 避免用单字母作为名称。要让命名有意义。

// bad
function q() {
// ...stuff...
}

// good
function query() {
// ..stuff..
}

22.2 在命名对象、函数和实例时，采用驼峰方式。

eslint 规则: camelcase.

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

22.3 在命名构造器或类时，采用帕斯卡命名法（译者注：所有单词首字母大写且直接相连）。

// bad
function user(options) {
this.name = options.name;
}

const bad = new user({
name: 'nope',
});

// good
class User {
constructor(options) {
  this.name = options.name;
}
}

const good = new User({
name: 'yup',
});

22.4 在命名私有属性时，采用前置下划线 _ 方式。

eslint 规则: no-underscore-dangle.

// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';

// good
this._firstName = 'Panda';

22.5 请勿保存 this 的引用。采用箭头函数或Function#bind（译者注：Function.prototype.bind()）。

// bad
function foo() {
const self = this;
return function () {
  console.log(self);
};
}

// bad
function foo() {
const that = this;
return function () {
  console.log(that);
};
}

// good
function foo() {
return () => {
  console.log(this);
};
}

22.6 如果你的文件只包含一个类，则文件名应该与类名完全一致。

// file contents
class CheckBox {
// ...
}
export default CheckBox;

// in some other file
// bad
import CheckBox from './checkBox';

// bad
import CheckBox from './check_box';

// good
import CheckBox from './CheckBox';

22.7 文件导出的默认函数应采用驼峰方式命名，同时文件名应该与函数名一致。
```
function makeStyleGuide() {
}

export default makeStyleGuide;
```
22.8 当文件导出的是一个单例、或函数库、或仅是一个对象时，采用帕斯卡拼写法。
```
const AirbnbStyleGuide = {
es6: {
}
};

export default AirbnbStyleGuide;
```

⬆ 返回顶部

访问器

23.1 不需要针对属性值的访问器函数。

23.2 如果要编写访问器函数，采用 getVal() 和 setVal('hello') 的写法。

// bad
dragon.age();

// good
dragon.getAge();

// bad
dragon.age(25);

// good
dragon.setAge(25);

23.3 若访问的属性是 boolean 类型，则采用 isVal() 或 hasVal() 的写法。

// bad
if (!dragon.age()) {
return false;
}

// good
if (!dragon.hasAge()) {
return false;
}

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

class Jedi {
constructor(options = {}) {
  const lightsaber = options.lightsaber || 'blue';
  this.set('lightsaber', lightsaber);
}

set(key, val) {
  this[key] = val;
}

get(key) {
  return this[key];
}
}

⬆ 返回顶部

事件

24.1 当触发事件携带参数时（无论是DOM事件，还是带有其他更多属性的像Backbone的事件），请传递一个hash对象，而不是单个值。这使得的在随后想通过事件传递更多数据时，无需找到并更新所有事件的处理函数。举例，不是：
```
// 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
});
```
⬆ 返回顶部

jQuery

25.1 在jQuery对象的变量前加一个 $。

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

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

// good
const $sidebarBtn = $('.sidebar-btn');

25.2 缓存jQuery的查找值.

// bad
function setSidebar() {
$('.sidebar').hide();

// ...stuff...

$('.sidebar').css({
  'background-color': 'pink'
});
}

// good
function setSidebar() {
const $sidebar = $('.sidebar');
$sidebar.hide();

// ...stuff...

$sidebar.css({
  'background-color': 'pink'
});
}

25.3 对于DOM查询，采用级联形式 $('.sidebar ul') 或父子级形式 $('.sidebar > ul')。jsPerf

25.4 对于有范围的jQuery对象查询采用 find 方法。

// bad
$('ul', '.sidebar').hide();

// bad
$('.sidebar').find('ul').hide();

// good
$('.sidebar ul').hide();

// good
$('.sidebar > ul').hide();

// good
$sidebar.find('ul').hide();

⬆ 返回顶部

ES5兼容性

26.1 参考 Kangax的ES5兼容表格.

⬆ 返回顶部

ES6风格

27.1 以下是各种ES6特性的链接集合。

⬆ 返回顶部

测试

28.1 对.
```
function () {
return true;
}
```
28.2 没有, 会很严重:
- 无论使用哪个测试框架，都应该写测试!
- 争取写很多小的纯函数，会减少意外的发生。
- 要谨慎对待stubs和mocks（译者注：两种测试用到的方式）— 他们可能会导致你的测试更脆弱。
- 在Airbnb中我们主要使用mocha。对于小的、单独的模块，我们有时也会使用tape。
- 争取100%的测试覆盖率是一个很好的目标，即使它并不总是能实现的。
- 每当你解决了一个问题，写一个回归测试。解决了的bug，但没写回归测试用例，几乎可以肯定将来会再次发现问题。

⬆ 返回顶部

性能

⬆ 返回顶部

资源

ES6学习

请阅读

Standard ECMA-262

工具

Code Style Linters

其他风格指南

其他风格

Naming this in nested functions - Christian Johansen
Conditional Callbacks - Ross Allen
Popular JavaScript Coding Conventions on Github - JeongHoon Byun
Multiple var statements in JavaScript, not superfluous - Ben Alman

延伸阅读

Understanding JavaScript Closures - Angus Croll
Basic JavaScript for the impatient programmer - Dr. Axel Rauschmayer
You Might Not Need jQuery - Zack Bloom & Adam Schwartz
ES6 Features - Luke Hoban
Frontend Guidelines - Benjamin De Cock

书籍

JavaScript: The Good Parts - Douglas Crockford
JavaScript Patterns - Stoyan Stefanov
Pro JavaScript Design Patterns - Ross Harmes and Dustin Diaz
High Performance Web Sites: Essential Knowledge for Front-End Engineers - Steve Souders
Maintainable JavaScript - Nicholas C. Zakas
JavaScript Web Applications - Alex MacCaw
Pro JavaScript Techniques - John Resig
Smashing Node.js: JavaScript Everywhere - Guillermo Rauch
Secrets of the JavaScript Ninja - John Resig and Bear Bibeault
Human JavaScript - Henrik Joreteg
Superhero.js - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
JSBooks - Julien Bouquillon
Third Party JavaScript - Ben Vinegar and Anton Kovalyov
Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript - David Herman
Eloquent JavaScript - Marijn Haverbeke
You Don't Know JS: ES6 & Beyond - Kyle Simpson

博客

播客

JavaScript Jabber

⬆ 返回顶部

使用者

这是正在使用此风格指南的组织列表。若您也使用，给我们发个提交请求，我们会将您加入到列表中。

Aan Zee: AanZee/javascript
Adult Swim: adult-swim/javascript
Airbnb: airbnb/javascript
Apartmint: apartmint/javascript
Avalara: avalara/javascript
Billabong: billabong/javascript
Bisk: bisk/javascript
Blendle: blendle/javascript
ComparaOnline: comparaonline/javascript
Compass Learning: compasslearning/javascript-style-guide
DailyMotion: dailymotion/javascript
Digitpaint digitpaint/javascript
Ecosia: ecosia/javascript
Evernote: evernote/javascript-style-guide
ExactTarget: ExactTarget/javascript
Expensify Expensify/Style-Guide
Flexberry: Flexberry/javascript-style-guide
Gawker Media: gawkermedia/javascript
General Electric: GeneralElectric/javascript
GoodData: gooddata/gdc-js-style
Grooveshark: grooveshark/javascript
How About We: howaboutwe/javascript
Huballin: huballin/javascript
HubSpot: HubSpot/javascript
Hyper: hyperoslo/javascript-playbook
InfoJobs: InfoJobs/JavaScript-Style-Guide
Intent Media: intentmedia/javascript
Jam3: Jam3/Javascript-Code-Conventions
JeopardyBot: kesne/jeopardy-bot
JSSolutions: JSSolutions/javascript
Kinetica Solutions: kinetica/javascript
Mighty Spring: mightyspring/javascript
MinnPost: MinnPost/javascript
MitocGroup: MitocGroup/javascript
ModCloth: modcloth/javascript
Money Advice Service: moneyadviceservice/javascript
Muber: muber/javascript
National Geographic: natgeo/javascript
National Park Service: nationalparkservice/javascript
Nimbl3: nimbl3/javascript
Orion Health: orionhealth/javascript
Peerby: Peerby/javascript
Razorfish: razorfish/javascript-style-guide
reddit: reddit/styleguide/javascript
React: /facebook/react/blob/master/CONTRIBUTING.md#style-guide
REI: reidev/js-style-guide
Ripple: ripple/javascript-style-guide
SeekingAlpha: seekingalpha/javascript-style-guide
Shutterfly: shutterfly/javascript
Springload: springload/javascript
StudentSphere: studentsphere/javascript
Target: target/javascript
TheLadders: TheLadders/javascript
T4R Technology: T4R-Technology/javascript
VoxFeed: VoxFeed/javascript-style-guide
Weggo: Weggo/javascript
Zillow: zillow/javascript
ZocDoc: ZocDoc/javascript

⬆ 返回顶部

翻译

此篇风格指南还有其他语言版本：

Brazilian Portuguese: armoucar/javascript-style-guide
Bulgarian: borislavvv/javascript
Catalan: fpmweb/javascript-style-guide
Chinese (Simplified): sivan/javascript-style-guide
Chinese (Traditional): jigsawye/javascript
French: nmussy/javascript-style-guide
German: timofurrer/javascript-style-guide
Italian: sinkswim/javascript-style-guide
Japanese: mitsuruog/javacript-style-guide
Korean: tipjs/javascript-style-guide
Polish: mjurczyk/javascript
Russian: uprock/javascript
Spanish: paolocarrasco/javascript-style-guide
Thai: lvarayut/javascript-style-guide
JavaScript风格指南手册
参考
一起讨论JavaScript
在gitter找我们。
贡献者
贡献者列表
许可证

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

⬆ back to top

修订

我们鼓励您拷贝该指南，并改变规则来适应你的团队风格。在下面，你可以列出一些针对该风格指南的修正。这使您可以定期更新你的风格指南，而不必处理合并冲突。

LuckyBrick / LuckyBrick

[发布]Airbnb JavaScript Style Guide中文版 #5

Airbnb JavaScript Style Guide() {

目录

类型

引用

对象

数组

解构

字符串

函数

箭头函数

构造器

模块

迭代器与生成器

属性

变量

提升

比较操作

块

注释

空白

逗号

分号

类型转换

命名约定

访问器

事件

jQuery

ES5兼容性

ES6风格

测试

性能

资源

使用者

翻译

JavaScript风格指南手册

一起讨论JavaScript

贡献者

许可证

修订

};