ys7-style
Version:
A mostly reasonable approach to JavaScript.
2,467 lines (1,892 loc) • 60.3 kB
Markdown
# ys7 JavaScript Style Guide
[](https://travis-ci.org/zhengjianqiao/javascript)
## 目录
1. [类型](#types)
1. [引用](#references)
1. [对象](#objects)
1. [数组](#arrays)
1. [解构](#destructuring)
1. [字符串](#strings)
1. [函数](#functions)
1. [箭头函数](#arrow-functions)
1. [构造函数](#constructors)
1. [模块](#modules)
1. [Iterators & Generators ](#iterators-and-generators)
1. [属性](#properties)
1. [变量](#variables)
1. [提升](#hoisting)
1. [比较运算符 & 等号](#comparison-operators--equality)
1. [代码块](#blocks)
1. [注释](#comments)
1. [空白](#whitespace)
1. [逗号](#commas)
1. [分号](#semicolons)
1. [类型转换](#type-casting--coercion)
1. [命名规则](#naming-conventions)
1. [存取器](#accessors)
1. [事件](#events)
1. [jQuery](#jquery)
1. [ECMAScript 5 兼容性](#ecmascript-5-compatibility)
1. [ECMAScript 6 编码规范](#ecmascript-6-styles)
1. [测试](#testing)
1. [性能](#performance)
1. [资源](#resources)
1. [使用人群](#in-the-wild)
1. [翻译](#translation)
1. [JavaScript 编码规范说明](#the-javascript-style-guide-guide)
1. [一起来讨论 JavaScript](#chat-with-us-about-javascript)
1. [Contributors](#contributors)
1. [License](#license)
## 类型
- [1.1](#1.1) **基本类型**: 直接存取基本类型。
+ `字符串`
+ `数值`
+ `布尔类型`
+ `null`
+ `undefined`
```javascript
const foo = 1;
let bar = foo;
bar = 9;
console.log(foo, bar); // => 1, 9
```
- [1.2](#1.2) **引用类型**: 通过引用的方式存取复杂类型。
+ `对象`
+ `数组`
+ `函数`
```javascript
const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9
```
## 引用
- [2.1](#2.1) 对所有的引用使用 `const` ；不要使用 `var`。
> 为什么？这能确保你无法对引用重新赋值，也不会导致出现 bug 或难以理解。
```javascript
// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2;
```
- [2.2](#2.2) 如果你一定需要可变动的引用，使用 `let` 代替 `var`。
> 为什么？因为 `let` 是块级作用域，而 `var` 是函数作用域。
```javascript
// bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
}
```
- [2.3](#2.3) 注意 `let` 和 `const` 都是块级作用域。
```javascript
// const 和 let 只存在于它们被定义的区块内。
{
let a = 1;
const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
```
## 对象
- [3.1](#3.1) 使用字面值创建对象。
```javascript
// bad
const item = new Object();
// good
const item = {};
```
- [3.2](#3.2) 如果你的代码在浏览器环境下执行，别使用 [保留字](http://es5.github.io/#x7.6.1) 作为键值。这样的话在 IE8 不会运行。 [更多信息](https://github.com/airbnb/javascript/issues/61)。 但在 ES6 模块和服务器端中使用没有问题。
```javascript
// bad
const superman = {
default: { clark: 'kent' },
private: true,
};
// good
const superman = {
defaults: { clark: 'kent' },
hidden: true,
};
```
- [3.3](#3.3) 使用同义词替换需要使用的保留字。
```javascript
// bad
const superman = {
class: 'alien',
};
// bad
const superman = {
klass: 'alien',
};
// good
const superman = {
type: 'alien',
};
```
- [3.4](#3.4) 创建有动态属性名的对象时，使用可被计算的属性名称。
> 为什么？因为这样可以让你在一个地方定义所有的对象属性。
```javascript
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',
[getKey('enabled')]: true,
};
```
- [3.5](#3.5) 使用对象方法的简写。
```javascript
// 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](#3.6) 使用对象属性值的简写。
> 为什么？因为这样更短更有描述性。
-
```javascript
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
lukeSkywalker: lukeSkywalker,
};
// good
const obj = {
lukeSkywalker,
};
```
- [3.7](#3.7) 在对象属性声明前把简写的属性分组。
> 为什么？因为这样能清楚地看出哪些属性使用了简写。
-
```javascript
const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
episodeOne: 1,
twoJedisWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
mayTheFourth: 4,
anakinSkywalker,
};
// good
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJedisWalkIntoACantina: 2,
episodeThree: 3,
mayTheFourth: 4,
};
```
- [3.8](#3.8) 只对无效的标识符使用引号.
> 为什么?通常我们认为这样做可以有利于代码阅读,他有助于代码高亮,而且很多js引擎也对此有优化.
```
// bad
const bad = {
'foo': 3,
'bar': 4,
'data-blah': 5,
};
// good
const good = {
foo: 3,
bar: 4,
'data-blah': 5,
};
```
- [3.9](#3.9)不要直接使用`Object.prototype`的方法,比如`hasOwnProperty`, `propertyIsEnumerable`, 和 `isPrototypeOf`.
> 为什么?这些方法使用在对象属性上会有问题,考虑下如果这个对象是`{ hasOwnProperty: false }`或者是由`null`创建`(Object.create(null))`.那就不能使用`hasOwnProperty`这些方法了.
## 数组
- [4.1](#4.1) 使用字面值创建数组。
```javascript
// bad
const items = new Array();
// good
const items = [];
```
- [4.2](#4.2) 向数组添加元素时使用 Arrary#push 替代直接赋值。
```javascript
const someStack = [];
// bad
someStack[someStack.length] = 'abracadabra';
// good
someStack.push('abracadabra');
```
- [4.3](#4.3) 使用拓展运算符 `...` 复制数组。
```javascript
// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i += 1) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];
```
- [4.4](#4.4) 使用 Array#from 把一个类数组对象转换成数组。
```javascript
const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);
```
- [4.5](#4.5) 在Array的方法回调中使用`return`语句,如果函数体里包含[以下](https://github.com/airbnb/javascript#8.2)的单行声明.
```
// good
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});
// good
[1, 2, 3].map(x => x + 1);
// bad
const flat = {};
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
const flatten = memo.concat(item);
flat[index] = flatten;
});
// good
const flat = {};
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
const flatten = memo.concat(item);
flat[index] = flatten;
return flatten;
});
// bad
inbox.filter((msg) => {
const { subject, author } = msg;
if (subject === 'Mockingbird') {
return author === 'Harper Lee';
} else {
return false;
}
});
// good
inbox.filter((msg) => {
const { subject, author } = msg;
if (subject === 'Mockingbird') {
return author === 'Harper Lee';
}
return false;
});
```
## 解构
- [5.1](#5.1) 使用解构存取和使用多属性对象。
> 为什么？因为解构能减少临时引用属性。
```javascript
// 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](#5.2) 对数组使用解构赋值。
```javascript
const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;
```
- [5.3](#5.3) 需要回传多个值时，使用对象解构，而不是数组解构。
> 为什么？增加属性或者改变排序不会改变调用时的位置。
```javascript
// 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](#6.1) 字符串使用单引号 `''` 。
```javascript
// bad
const name = "Capt. Janeway";
// good
const name = 'Capt. Janeway';
```
- [6.2](#6.2) 字符串超过 80 个字节应该使用字符串连接号换行。
- [6.3](#6.3) 注：过度使用字串连接符号可能会对性能造成影响。[jsPerf](http://jsperf.com/ya-string-concat) 和 [讨论](https://github.com/airbnb/javascript/issues/40).
```javascript
// 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](#6.4) 程序化生成字符串时，使用模板字符串代替字符串连接。
> 为什么？模板字符串更为简洁，更具可读性。
```javascript
// 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](#6.5) 永远不要在`string`上使用`evel()`,它会引起许多问题。
- [6.6](#6.6) 不要在`string`上使用不必要的转译词。
> 为什么?反斜杠影响可读性,非必要不要使用。
```
// bad
const foo = '\'this\' \i\s \"quoted\"';
// good
const foo = '\'this\' is "quoted"';
const foo = `my name is '${name}'`;
```
## 函数
- [7.1](#7.1) 使用函数声明代替函数表达式。
> 为什么？因为函数声明是可命名的，所以他们在调用栈中更容易被识别。此外，函数声明会把整个函数提升（hoisted），而函数表达式只会把函数的引用变量名提升。这条规则使得[箭头函数](#arrow-functions)可以取代函数表达式。
```javascript
// bad
const foo = function () {
};
// good
function foo() {
}
```
- [7.2](#7.2) 在立即调用的函数表达式外包装一层:
```javascript
// 立即调用的函数表达式 (IIFE)
(() => {
console.log('Welcome to the Internet. Please follow me.');
})();
```
- [7.3](#7.3) 永远不要在一个非函数代码块（`if`、`while` 等）中声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但它们的解析表现不一致。
- [7.4](#7.4) **注意:** ECMA-262 把 `block` 定义为一组语句。函数声明不是语句。[阅读 ECMA-262 关于这个问题的说明](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97)。
```javascript
// bad
if (currentUser) {
function test() {
console.log('Nope.');
}
}
// good
let test;
if (currentUser) {
test = () => {
console.log('Yup.');
};
}
```
- [7.5](#7.5) 永远不要把参数命名为 `arguments`。这将取代原来函数作用域内的 `arguments` 对象。
```javascript
// bad
function nope(name, options, arguments) {
// ...stuff...
}
// good
function yup(name, options, args) {
// ...stuff...
}
```
- [7.6](#7.6) 不要使用 `arguments`。可以选择 rest 语法 `...` 替代。
> 为什么？使用 `...` 能明确你要传入的参数。另外 rest 参数是一个真正的数组，而 `arguments` 是一个类数组。
```javascript
// bad
function concatenateAll() {
const args = Array.prototype.slice.call(arguments);
return args.join('');
}
// good
function concatenateAll(...args) {
return args.join('');
}
```
- [7.7](#7.7) 直接给函数的参数指定默认值，不要使用一个变化的函数参数。
```javascript
// really bad
function handleThings(opts) {
// 不！我们不应该改变函数参数。
// 更加糟糕: 如果参数 opts 是 false 的话，它就会被设定为一个对象。
// 但这样的写法会造成一些 Bugs。
//（译注：例如当 opts 被赋值为空字符串，opts 仍然会被下一行代码设定为一个空对象。）
opts = opts || {};
// ...
}
// still bad
function handleThings(opts) {
if (opts === void 0) {
opts = {};
}
// ...
}
// good
function handleThings(opts = {}) {
// ...
}
```
- [7.8](#7.8) 直接给函数参数赋值时需要避免副作用。
> 为什么？因为这样的写法让人感到很困惑。
```javascript
var b = 1;
// bad
function count(a = b++) {
console.log(a);
}
count(); // 1
count(); // 2
count(3); // 3
count(); // 3
```
- [7.9](#7.9) 把默认参数放在最后。
```javascript
// bad
function handleThings(opts = {}, name) {
// ...
}
// good
function handleThings(name, opts = {}) {
// ...
}
```
- [7.10](#7.10) 永远不要使用函数构造器`Function`来构建一个新函数。
> 为什么？以这种方式构建函数类似将使用evel来构建，会引起漏洞。
```javascript
// bad
var add = new Function('a', 'b', 'return a + b');
// still bad
var subtract = Function('a', 'b', 'return a - b');
```
- [7.11](#7.11) 在函数名字前添加一个空格。
```javascript
// bad
const f = function(){};
const g = function (){};
const h = function() {};
// good
const x = function () {};
const y = function a() {};
```
- [7.12](#7.12) 永远不要更改参数。
> 为什么？操作以传入的对象会在引用函数中引起无法预想的副作用，
```javascript
// bad
function f1(obj) {
obj.key = 1;
};
// good
function f2(obj) {
const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
};
```
- [7.13](#7.13) 永远不要对参数进行赋值。
```javascript
// bad
function f1(a) {
a = 1;
}
function f2(a) {
if (!a) { a = 1; }
}
// good
function f3(a) {
const b = a || 1;
}
function f4(a = 1) {
}
```
- [7.14](#7.14) 使用扩展操作符`...`代替`call`函数。
> 为什么？这种方式更加的简洁，你不需要提供一个上下文，也不需要费劲的使用`apply`来构建。
```javascript
// bad
const x = [1, 2, 3, 4, 5];
console.log.apply(console, x);
// good
const x = [1, 2, 3, 4, 5];
console.log(...x);
// bad
new (Function.prototype.bind.apply(Date, [null, 2016, 08, 05]));
// good
new Date(...[2016, 08, 05]);
```
- [7.15](#7.15) 拥有多个复杂参数的时候，应该将每个参数作为一行，并在最后加上逗号。
```javascript
// bad
function foo(bar,
baz,
quux) {
// body
}
// good
function foo(
bar,
baz,
quux,
) {
// body
}
// bad
console.log(foo,
bar,
baz);
// good
console.log(
foo,
bar,
baz,
);
```
## 箭头函数
- [8.1](#8.1) 当你必须使用函数表达式（或传递一个匿名函数）时，使用箭头函数符号。
> 为什么?因为箭头函数创造了新的一个 `this` 执行环境（译注：参考 [Arrow functions - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 和 [ES6 arrow functions, syntax and lexical scoping](http://toddmotto.com/es6-arrow-functions-syntaxes-and-lexical-scoping/)），通常情况下都能满足你的需求，而且这样的写法更为简洁。
> 为什么不？如果你有一个相当复杂的函数，你或许可以把逻辑部分转移到一个函数声明上。
```javascript
// 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](#8.2) 如果一个函数适合用一行写出并且只有一个参数，那就把花括号、圆括号和 `return` 都省略掉。如果不是，那就不要省略。
> 为什么？语法糖。在链式调用中可读性很高。
```javascript
// good
[1, 2, 3].map(x => x * x);
// good
[1, 2, 3].reduce((total, n) => {
return total + n;
}, 0);
```
- [8.3](#8.3) 如果表达式有多行，就将其放在一对括号里面增加其可读性
> 为什么?这样可以清晰的现实函数开始与结束的地方。
```javascript
// bad
['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call(
httpMagicObjectWithAVeryLongName,
httpMethod
)
);
// good
['get', 'post', 'put'].map(httpMethod => (
Object.prototype.hasOwnProperty.call(
httpMagicObjectWithAVeryLongName,
httpMethod
)
));
```
- [8.4](#8.4) 如果你的函数只有一个简单的参数，而且也没有使用大括号，那就省略参数的圆括号，否则的话就在参数上使用括号。
> 为什么?更加的清晰。
```javascript
// bad
[1, 2, 3].map((x) => x * x);
// good
[1, 2, 3].map(x => x * x);
// good
[1, 2, 3].map(number => (
`A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
));
// bad
[1, 2, 3].map(x => {
const y = x + 1;
return x * y;
});
// good
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});
```
- [8.5](#8.5) 避免混用箭头函数`=>`和大小比较`>=`和`<=`。
```javascript
// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
// good
const itemHeight = (item) => {
const { height, largeSize, smallSize } = item;
return height > 256 ? largeSize : smallSize;
};
```
## 类与构造器
- [9.1](#9.1) 总是使用 `class`。避免直接操作 `prototype` 。
> 为什么? 因为 `class` 语法更为简洁更易读。
```javascript
// 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](#9.2) 使用 `extends` 继承。
> 为什么？因为 `extends` 是一个内建的原型继承方法并且不会破坏 `instanceof`。
```javascript
// 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](#9.3) 方法可以返回 `this` 来帮助链式调用。
```javascript
// 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](#9.4) 可以写一个自定义的 `toString()` 方法，但要确保它能正常运行并且不会引起副作用。
```javascript
class Jedi {
constructor(options = {}) {
this.name = options.name || 'no name';
}
getName() {
return this.name;
}
toString() {
return `Jedi - ${this.getName()}`;
}
}
```
- [9.5](#9.5) 类如果没有特别定义都会有一个默认的构造函数，设置一个空的构造函数或者只是代表一个父类，是没有必要的。
```javascript
// bad
class Jedi {
constructor() {}
getName() {
return this.name;
}
}
// bad
class Rey extends Jedi {
constructor(...args) {
super(...args);
}
}
// good
class Rey extends Jedi {
constructor(...args) {
super(...args);
this.name = 'Rey';
}
}
```
- [9.6](#9.6) 避免类成员的重复。
> 为什么？重复的声明类成员会默认使用最后一个。拥有重复成员本来就是错的。
```javascript
// bad
class Foo {
bar() { return 1; }
bar() { return 2; }
}
// good
class Foo {
bar() { return 1; }
}
// good
class Foo {
bar() { return 2; }
}
```
## 模块
- [10.1](#10.1)总是使用模组 (`import`/`export`) 而不是其他非标准模块系统。你可以编译为你喜欢的模块系统。
> 为什么？模块就是未来，让我们开始迈向未来吧。
```javascript
// 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](#10.2) 不要使用通配符 import。
> 为什么？这样能确保你只有一个默认 export。
```javascript
// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';
// good
import AirbnbStyleGuide from './AirbnbStyleGuide';
```
- [10.3](#10.3) 不要从 import 中直接 export。
> 为什么？虽然一行代码简洁明了，但让 import 和 export 各司其职让事情能保持一致。
```javascript
// bad
// filename es6.js
export { es6 as default } from './airbnbStyleGuide';
// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;
```
- [10.4](#10.4) 一个地址只在一个地方导入`inmport`。
> 为什么？在多个地方导入相同地址的会使得代码难以维护。
```javascript
// bad
import foo from 'foo';
// … some other imports … //
import { named1, named2 } from 'foo';
// good
import foo, { named1, named2 } from 'foo';
// good
import foo, {
named1,
named2,
} from 'foo';
```
- [10.5](#10.5) 不要导出易变的绑定。
> 为什么？通常情况下要避免导出易变的绑定，但在特殊情况下可以使用这种技术。一般来说，只有不变的引用可以导出。
```
// bad
let foo = 3;
export { foo }
// good
const foo = 3;
export { foo }
```
- [10.6](#10.6) 只有单一导出的模块最好使用`default`而不是以名称导出。
```javascript
// bad
export function foo() {}
// good
export default function foo() {}
```
- [10.7](#10.7) 将所有的`import`语句放在非`import`语句之前。
> 为什么？由于导入提升的缘故。把他们放在顶部有助于防止意外的行为。
```javascript
// bad
import foo from 'foo';
foo.init();
import bar from 'bar';
// good
import foo from 'foo';
import bar from 'bar';
foo.init();
```
- [10.8](#10.8) 多行导入应该像数组和对象导入一样使用缩进的方式导入。
> 为什么？遵循花括号的使用的风格，。
```javascript
// bad
import foo from 'foo';
foo.init();
import bar from 'bar';
// good
import foo from 'foo';
import bar from 'bar';
foo.init();
```
- [10.9](#10.9) 在导入函数中禁止使用Webpack加载器的代码。
> 为什么？webpack加载器可以在`webpack.config.js`中设置。
```javascript
// bad
import fooSass from 'css!sass!foo.scss';
import barCss from 'style!css!bar.css';
// good
import fooSass from 'foo.scss';
import barCss from 'bar.css';
```
## 迭代器和生成器
- [11.1](#11.1) 不要使用迭代器。使用高阶函数例如 `map()` 和 `reduce()` 替代 `for-of`。
> 为什么？这加强了我们不变的规则。处理纯函数的回调值更易读，这比它带来的副作用更重要。
```javascript
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](#11.2) 现在还不要使用 generators。
> 为什么？因为它们现在还没法很好地编译到 ES5。 (译者注：目前(2016/03) Chrome 和 Node.js 的稳定版本都已支持 generators)
## 属性
- [12.1](#12.1) 使用 `.` 来访问对象的属性。
```javascript
const luke = {
jedi: true,
age: 28,
};
// bad
const isJedi = luke['jedi'];
// good
const isJedi = luke.jedi;
```
- [12.2](#12.2) 当通过变量访问属性时使用中括号 `[]`。
```javascript
const luke = {
jedi: true,
age: 28,
};
function getProp(prop) {
return luke[prop];
}
const isJedi = getProp('jedi');
```
## 变量
- [13.1](#13.1) 一直使用 `const` 来声明变量，如果不这样做就会产生全局变量。我们需要避免全局命名空间的污染。[地球队长](http://www.wikiwand.com/en/Captain_Planet)已经警告过我们了。（译注：全局，global 亦有全球的意思。地球队长的责任是保卫地球环境，所以他警告我们不要造成「全球」污染。）
```javascript
// bad
superPower = new SuperPower();
// good
const superPower = new SuperPower();
```
- [13.2](#13.2) 使用 `const` 声明每一个变量。
> 为什么？增加新变量将变的更加容易，而且你永远不用再担心调换错 `;` 跟 `,`。
```javascript
// bad
const items = getItems(),
goSportsTeam = true,
dragonball = 'z';
// bad
// (compare to above, and try to spot the mistake)
const items = getItems(),
goSportsTeam = true;
dragonball = 'z';
// good
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';
```
- [13.3](#13.3) 将所有的 `const` 和 `let` 分组
> 为什么？当你需要把已赋值变量赋值给未赋值变量时非常有用。
```javascript
// 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](#13.4) 在你需要的地方给变量赋值，但请把它们放在一个合理的位置。
> 为什么？`let` 和 `const` 是块级作用域而不是函数作用域。
```javascript
// good
function() {
test();
console.log('doing stuff..');
//..other stuff..
const name = getName();
if (name === 'test') {
return false;
}
return name;
}
// bad - unnecessary function call
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;
}
```
- [13.5](#13.5) 不要使用链式赋值。
> 为什么？链式赋值会引起无法察觉的全局变量。(可参考操作符优先级)
```javascript
// bad
(function example() {
// JavaScript interprets this as
// let a = ( b = ( c = 1 ) );
// The let keyword only applies to variable a; variables b and c become
// global variables.
let a = b = c = 1;
}());
console.log(a); // undefined
console.log(b); // 1
console.log(c); // 1
// good
(function example() {
let a = 1;
let b = a;
let c = a;
}());
console.log(a); // undefined
console.log(b); // undefined
console.log(c); // undefined
// the same applies for `const`
```
- [13.6](#13.6) 避免使用一元的增加`++`和减少`--`。
> 为什么？更具eslint的文档，一元的增加与减少会遭受自动的添加分号，而在在程序中会引起静默的错误，使用`num += 1`来代替一元的增减。
```javascript
// bad
let array = [1, 2, 3];
let num = 1;
num++;
--num;
let sum = 0;
let truthyCount = 0;
for(let i = 0; i < array.length; i++){
let value = array[i];
sum += value;
if (value) {
truthyCount++;
}
}
// good
let array = [1, 2, 3];
let num = 1;
num += 1;
num -= 1;
const sum = array.reduce((a, b) => a + b, 0);
const truthyCount = array.filter(Boolean).length;
```
## 变量提升
- [14.1](#14.1) `var` 声明会被提升至该作用域的顶部，但它们赋值不会提升。`let` 和 `const` 被赋予了一种称为「[暂时性死区（Temporal Dead Zones, TDZ）](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let)」的概念。这对于了解为什么 [type of 不再安全](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15)相当重要。
```javascript
// 我们知道这样运行不了
// （假设 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](#14.2) 匿名函数表达式的变量名会被提升，但函数内容并不会。
```javascript
function example() {
console.log(anonymous); // => undefined
anonymous(); // => TypeError anonymous is not a function
var anonymous = function() {
console.log('anonymous function expression');
};
}
```
- [14.3](#14.3) 命名的函数表达式的变量名会被提升，但函数名和函数函数内容并不会。
```javascript
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');
};
}
// the same is true when the function name
// is the same as the variable name.
function example() {
console.log(named); // => undefined
named(); // => TypeError named is not a function
var named = function named() {
console.log('named');
}
}
```
- [14.4](#14.4) 函数声明的名称和函数体都会被提升。
```javascript
function example() {
superPower(); // => Flying
function superPower() {
console.log('Flying');
}
}
```
- 想了解更多信息，参考 [Ben Cherry](http://www.adequatelygood.com/) 的 [JavaScript Scoping & Hoisting](http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting)。
## 比较运算符 & 等号
- [15.1](#15.1) 优先使用 `===` 和 `!==` 而不是 `==` 和 `!=`.
- [15.2](#15.2) 条件表达式例如 `if` 语句通过抽象方法 `ToBoolean` 强制计算它们的表达式并且总是遵守下面的规则：
+ **对象** 被计算为 **true**
+ **Undefined** 被计算为 **false**
+ **Null** 被计算为 **false**
+ **布尔值** 被计算为 **布尔的值**
+ **数字** 如果是 **+0、-0、或 NaN** 被计算为 **false**, 否则为 **true**
+ **字符串** 如果是空字符串 `''` 被计算为 **false**，否则为 **true**
```javascript
if ([0]) {
// true
// An array is an object, objects evaluate to true
}
```
- [15.3](#15.3) 使用简写。
```javascript
// bad
if (name !== '') {
// ...stuff...
}
// good
if (name) {
// ...stuff...
}
// bad
if (collection.length > 0) {
// ...stuff...
}
// good
if (collection.length) {
// ...stuff...
}
```
- [15.4](#15.4) 想了解更多信息，参考 Angus Croll 的 [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108)。
- [15.5](#15.5) 在使用`switch-case`语句的时候，加上`default`，并在`case`后的语句使用花括号。
```javascript
// bad
switch (foo) {
case 1:
let x = 1;
break;
case 2:
const y = 2;
break;
case 3:
function f() {}
break;
default:
class C {}
}
// good
switch (foo) {
case 1: {
let x = 1;
break;
}
case 2: {
const y = 2;
break;
}
case 3: {
function f() {}
break;
}
case 4:
bar();
break;
default: {
class C {}
}
}
```
- [15.6](#15.6) 三元表达式不应该被嵌套,而且应该放在一行。
```javascript
// bad
const foo = maybe1 > maybe2
? "bar"
: value1 > value2 ? "baz" : null;
// better
const maybeNull = value1 > value2 ? 'baz' : null;
const foo = maybe1 > maybe2
? 'bar'
: maybeNull;
// best
const maybeNull = value1 > value2 ? 'baz' : null;
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
```
- [15.7](#15.7) 避免不必要的三元表达式。
```
// bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;
// good
const foo = a || b;
const bar = !!c;
const baz = !c;
```
## 代码块
- [16.1](#16.1) 使用大括号包裹所有的多行代码块。
```javascript
// 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](#16.2) 如果通过 `if` 和 `else` 使用多行代码块，把 `else` 放在 `if` 代码块关闭括号的同一行。
```javascript
// bad
if (test) {
thing1();
thing2();
}
else {
thing3();
}
// good
if (test) {
thing1();
thing2();
} else {
thing3();
}
```
## 注释
- [17.1](#17.1) 使用 `/** ... */` 作为多行注释。包含描述、指定所有参数和返回值的类型和值。
```javascript
// bad
// make() returns a new element
// based on the passed in tag name
//
// @param {String} tag
// @return {Element} element
function make(tag) {
// ...stuff...
return element;
}
// good
/**
* make() returns a new element
* based on the passed in tag name
*
* @param {String} tag
* @return {Element} element
*/
function make(tag) {
// ...stuff...
return element;
}
```
- [17.2](#17.2) 使用 `//` 作为单行注释。在评论对象上面另起一行使用单行注释。在注释前插入空行。
```javascript
// 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;
}
```
- [17.3](#17.3) 给注释增加 `FIXME` 或 `TODO` 的前缀可以帮助其他开发者快速了解这是一个需要复查的问题，或是给需要实现的功能提供一个解决方式。这将有别于常见的注释，因为它们是可操作的。使用 `FIXME -- need to figure this out` 或者 `TODO -- need to implement`。
- [17.4](#17.4) 使用 `// FIXME`: 标注问题。
```javascript
class Calculator {
constructor() {
// FIXME: shouldn't use a global here
total = 0;
}
}
```
- [17.5](#17.5) 使用 `// TODO`: 标注问题的解决方式。
```javascript
class Calculator {
constructor() {
// TODO: total should be configurable by an options param
this.total = 0;
}
}
```
## 空白
- [18.1](#18.1) 使用 4 个空格作为缩进。
```javascript
// bad
function() {
∙∙const name;
}
// bad
function() {
∙const name;
}
// good
function() {
∙∙∙∙const name;
}
```
- [18.2](#18.2) 在花括号前放一个空格。
```javascript
// 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](#18.3) 在控制语句（`if`、`while` 等）的小括号前放一个空格。在函数调用及声明中，不在函数的参数列表前加空格。
```javascript
// bad
if(isJedi) {
fight ();
}
// good
if (isJedi) {
fight();
}
// bad
function fight () {
console.log ('Swooosh!');
}
// good
function fight() {
console.log('Swooosh!');
}
```
- [18.4](#18.4) 使用空格把运算符隔开。
```javascript
// bad
const x=y+5;
// good
const x = y + 5;
```
- [18.5](#18.5) 在文件末尾插入一个空行。
```javascript
// bad
(function(global) {
// ...stuff...
})(this);
```
```javascript
// bad
(function(global) {
// ...stuff...
})(this);↵
↵
```
```javascript
// good
(function(global) {
// ...stuff...
})(this);↵
```
- [18.5](#18.5) 在使用长方法链时进行缩进。使用前面的点 `.` 强调这是方法调用而不是新语句。
```javascript
// 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.6](#18.6) 在块末和新语句前插入空行。
```javascript
// 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;
```
## 逗号
- [19.1](#19.1) 行首逗号：**不需要**。
```javascript
// 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](#19.2) 增加结尾的逗号: **需要**。
> 为什么? 这会让 git diffs 更干净。另外，像 babel 这样的转译器会移除结尾多余的逗号，也就是说你不必担心老旧浏览器的[尾逗号问题](es5/README.md#commas)。
```javascript
// bad - git diff without trailing comma
const hero = {
firstName: 'Florence',
- lastName: 'Nightingale'
+ lastName: 'Nightingale',
+ inventorOf: ['coxcomb graph', 'modern nursing']
}
// good - git diff with trailing comma
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](#20.1) **使用分号**
```javascript
// bad
(function() {
const name = 'Skywalker'
return name
})()
// good
(() => {
const name = 'Skywalker';
return name;
})();
// good (防止函数在两个 IIFE 合并时被当成一个参数)
;(() => {
const name = 'Skywalker';
return name;
})();
```
[Read more](http://stackoverflow.com/a/7365214/1712802).
## 类型转换
- [21.1](#21.1) 在语句开始时执行类型转换。
- [21.2](#21.2) 字符串：
```javascript
// => this.reviewScore = 9;
// bad
const totalScore = this.reviewScore + '';
// good
const totalScore = String(this.reviewScore);
```
- [21.3](#21.3) 对数字使用 `parseInt` 转换，并带上类型转换的基数。
```javascript
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](#21.4) 如果因为某些原因 parseInt 成为你所做的事的瓶颈而需要使用位操作解决[性能问题](http://jsperf.com/coercion-vs-casting/3)时，留个注释说清楚原因和你的目的。
```javascript
// good
/**
* 使用 parseInt 导致我的程序变慢，
* 改成使用位操作转换数字快多了。
*/
const val = inputValue >> 0;
```
- [21.5](#21.5) **注:** 小心使用位操作运算符。数字会被当成 [64 位值](http://es5.github.io/#x4.3.19)，但是位操作运算符总是返回 32 位的整数（[参考](http://es5.github.io/#x11.7)）。位操作处理大于 32 位的整数值时还会导致意料之外的行为。[关于这个问题的讨论](https://github.com/airbnb/javascript/issues/109)。最大的 32 位整数是 2,147,483,647：
```javascript
2147483647 >> 0 //=> 2147483647
2147483648 >> 0 //=> -2147483648
2147483649 >> 0 //=> -2147483647
```
- [21.6](#21.6) 布尔:
```javascript
const age = 0;
// bad
const hasAge = new Boolean(age);
// good
const hasAge = Boolean(age);
// good
const hasAge = !!age;
```
## 命名规则
- [22.1](#22.1) 避免单字母命名。命名应具备描述性。
```javascript
// bad
function q() {
// ...stuff...
}
// good
function query() {
// ..stuff..
}
```
- [22.2](#22.2) 使用驼峰式命名对象、函数和实例。
```javascript
// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}
// good
const thisIsMyObject = {};
function thisIsMyFunction() {}
```
- [22.3](#22.3) 使用帕斯卡命名构造函数或类。
```javascript
// 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](#22.4) 使用下划线 `_` 开头命名私有属性。
> 为什么？JavaScript 并没有私有属性或私有方法的概念。虽然使用下划线是表示「私有」的一种共识，但实际上这些属性是完全公开的，它本身就是你公共接口的一部分。这种习惯或许会导致开发者错误的认为改动它不会造成破坏或者不需要去测试。长话短说：如果你想要某处为「私有」，它必须不能是显式提出的。
```javascript
// bad
this.__firstName__ = 'Panda';
this._firstName_ = 'Panda';
// good
this.firstName = 'Panda';
```
- [22.5](#22.5) 别保存 `this` 的引用。使用箭头函数或 Function#bind。
```javascript
// 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](#22.6) 如果你的文件只输出一个类，那你的文件名必须和类名完全保持一致。
```javascript
// 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](#22.7) 当你导出默认的函数时使用驼峰式命名。你的文件名必须和函数名完全保持一致。
```javascript
function makeStyleGuide() {
}
export default makeStyleGuide;
```
- [22.8](#22.8) 当你导出单例、函数库、空对象时使用帕斯卡式命名。
```javascript
const AirbnbStyleGuide = {
es6: {
}
};
export default AirbnbStyleGuide;
```
## 存取器
- [23.1](#23.1) 属性的存取函数不是必须的。
- [23.2](#23.2) 如果你需要存取函数时使用 `getVal()` 和 `setVal('hello')`。
```javascript
// bad
dragon.age();
// good
dragon.getAge();
// bad
dragon.age(25);
// good
dragon.setAge(25);
```
- [23.3](#23.3) 如果属性是布尔值，使用 `isVal()` 或 `hasVal()`。
```javascript
// bad
if (!dragon.age()) {
return false;
}
// good
if (!dragon.hasAge()) {
return false;
}
```
- [23.4](#23.4) 创建 `get()` 和 `set()` 函数是可以的，但要保持一致。
```javascript
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](#24.1) 当给事件附加数据时（无论是 DOM 事件还是私有事件），传入一个哈希而不是原始值。这样可以让后面的贡献者增加更多数据到事件数据而无需找出并更新事件的每一个处理器。例如，不好的写法：
```javascript
// bad
$(this).trigger('listingUpdated', listing.id);
...
$(this).on('listingUpdated', function(e, listingId) {
// do something with listingId
});
```
更好的写法：
```javascript
// good
$(this).trigger('listingUpdated', { listingId : listing.id });
...
$(this).on('listingUpdated', function(e, data) {
// do something with data.listingId
});
```
## jQuery
- [25.1](#25.1) 使用 `$` 作为存储 jQuery 对象的变量名前缀。
```javascript
// bad
const sidebar = $('.sidebar');
// good
const $sidebar = $('.sidebar');
```
- [25.2](#25.2) 缓存 jQuery 查询。
```javascript
// 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](#25.3) 对 DOM 查询使用层叠 `$('.sidebar ul')` 或 父元素 > 子元素 `$('.sidebar > ul')`。 [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16)
- [25.4](#25.4) 对有作用域的 jQuery 对象查询使用 `find`。
```javascript
// bad
$('ul', '.sidebar').hide();
// bad
$('.sidebar').find('ul').hide();
// good
$('.sidebar ul').hide();
// good
$('.sidebar > ul').hide();
// good
$sidebar.find('ul').hide();
```
## ECMAScript 5 兼容性
- [26.1](#26.1) 参考 [Kangax](https://twitter.com/kangax/) 的 ES5 [兼容性](http://kangax.github.com/es5-compat-table/).
## ECMAScript 6 规范
- [27.1](#27.1) 以下是链接到 ES6 的各个特性的列表。
1. [Arrow Functions](#arrow-functions)
1. [Classes](#constructors)
1. [Object Shorthand](#es6-object-shorthand)
1. [Object Concise](#es6-object-concise)
1. [Object Computed Properties](#es6-computed-properties)
1. [Template Strings](#es6-template-literals)
1. [Destructuring](#destructuring)
1. [Default Parameters](#es6-default-parameters)
1. [Rest](#es6-rest)
1. [Array Spreads](#es6-array-spreads)
1. [Let and Const](#references)
1. [Iterators and Generators](#iterators-and-generators)
1. [Modules](#modules)
## 测试
- [28.1](#28.1) **需要.**
```javascript
function() {
return true;
}
```
## 性能
- [On Layout & Web Performance](http://kellegous.com/j/2013/01/26/layout-performance/)
- [String vs Array Concat](http://jsperf.com/string-vs-array-concat/2)
- [Try/Catch Cost In a Loop](http://jsperf.com/try-catch-in-loop-cost)
- [Bang Function](http://jsperf.com/bang-function)
- [jQuery Find vs Context, Selector](http://jsperf.com/jquery-find-vs-context-sel/13)
- [innerHTML vs textContent for script text](http://jsperf.com/innerhtml-vs-textcontent-for-script-text)
- [Long String Concatenation](http://jsperf.com/ya-string-concat)
- Loading...
**[⬆ 返回目录](#table-of-contents)**
## 资源
**Learning ES6**
- [Draft ECMA 2015 (ES6) Spec](https://people.mozilla.org/~jorendorff/es6-draft.html)
- [ExploringJS](http://exploringjs.com/)
- [ES6 Compatibility Table](https://kangax.github.io/compat-table/es6/)
- [Comprehensive Overview of ES6 Features](http://es6-features.org/)
**Read This**
- [Annotated ECMAScript 5.1](http://es5.github.com/)
**Tools**
- Code Style Linters
+ [ESlint](http://eslint.org/) - [Airbnb Style .eslintrc](https://github.com/airbnb/javascript/blob/master/linters/.eslintrc)
+ [JSHint](http://www.jshint.com/) - [Airbnb Style .jshintrc](https://github.com/airbnb/javascript/blob/master/linters/jshintrc)
+ [JSCS](https://github.com/jscs-dev/node-jscs) - [Airbnb Style Preset](https://github.com/jscs-dev/node-jscs/blob/master/presets/airbnb.json)
**Other Styleguides**
- [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml)
- [jQuery Core Style Guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines)
- [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwldrn/idiomatic.js/)
**Other Styles**
- [Naming this in nested functions](https://gist.github.com/4135065) - Christian Johansen
- [Conditional Callbacks](https://github.com/airbnb/javascript/issues/52) - Ross Allen
- [Popular JavaScript Coding Conventions on Github](http://sideeffect.kr/popularconvention/#javascript) - JeongHoon Byun
- [Multiple var statements in JavaScript, not superfluous](http://benalman.com/news/2012/05/multiple-var-statements-javascript/) - Ben Alman
**Further Reading**
- [Understanding JavaScript Closures](http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll
- [Basic JavaScript for the impatient programmer](http://www.2ality.com/2013/06/basic-javascript.html) - Dr. Axel Rauschmayer
- [You Might Not Need jQuery](http://youmightnotneedjquery.com/) - Zack Bloom & Adam Schwartz
- [ES6 Features](https://github.com/lukehoban/es6features) - Luke Hoban
- [Frontend Guidelines](https://github.com/bendc/frontend-guidelines) - Benjamin De Cock
**Books**
- [JavaScript: The Good Parts](http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742) - Douglas Crockford
- [JavaScript Patterns](http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752) - Stoyan Stefanov
- [Pro JavaScript Design Patterns](http://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X) - Ross Harmes and Dustin Diaz
- [High Performance Web Sites: Essential Knowledge for Front-End Engineers](http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309) - Steve Souders
- [Maintainable JavaScript](http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Zakas/dp/1449327680) - Nicholas C. Zakas
- [JavaScript Web Applications](http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X) - Alex MacCaw
- [Pro JavaScript Techniques](http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273) - John Resig
- [Smashing Node.js: JavaScript Everywhere](http://www.amazon.com/Smashing-Node-js-JavaScript-Everywhere-Magazine/dp/1119962595) - Guillermo Rauch
- [Secrets of the JavaScript Ninja](http://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X) - John Resig and Bear Bibeault
- [Human JavaScript](http://hum