Airbnb JavaScript编码规范指南(ES6)中文版
个人翻译,一些个人见解会用"注:"的形式标出
原版:Airbnb JavaScript Style Guide
最合理的方法书写JavaScript
注意: 本规范假定你在使用 Babel, 并且需要你使用 babel-preset-airbnb 或者等价的工具. 预期你已经在应用中安装了shims/polyfills,和 airbnb-browser-shims 或者等价的.
其他编码风格指南:
内容
- 类型
- 引用
- 对象
- 数组
- 解构
- 字符串
- 函数
- 箭头函数
- 类 & 构造函数
- 模块
- 迭代器和生成器
- 属性
- 变量
- 变量提升
- 比较运算符 & 相等
- 块
- 控制语句
- 注释
- 空格
- 逗号
- 分号
- 类型转换
- 命名规则
- 存取器
- 事件
- jQuery
- ECMAScript 5 兼容性
- ECMAScript 6+ (ES 2015+) 风格
- 标准库
- 测试
- 性能
- 资源
- 谁在使用?
- 翻译
- JavaScript编码规范指南
- 和我们聊聊JavaScript
- 贡献者
- 许可
- 修改
类型
-
1.1 原始类型: 存取原始类型直接作用于值本身.
string
number
boolean
null
undefined
symbol
const foo = 1; let bar = foo; bar = 9; console.log(foo, bar); // => 1, 9
- Symbols不能被完全polyfill,所以不能用于无法被原生支持该特性的浏览器/环境.
-
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
原因:会确保你不会改变引用的指向,否则可能会产生bug并且使代码难以理解.
// bad var a = 1; var b = 2; // good const a = 1; const b = 2;
-
2.2 如果一定要改变引用的指向,使用
let
而非var
.eslint:no-var
jscs:disallowVar
原因:
let
是块级作用域而非像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 and let only exist in the blocks they are defined in. { 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 创建动态属性名字的对象时使用计算后的属性名.
Why? 原因:允许你在一个地方定义一个对象的全部属性.
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.3 使用对象方法的简写形式. eslint:
object-shorthand
jscs:requireEnhancedObjectLiterals
// bad const atom = { value: 1, addValue: function (value) { return atom.value + value; }, }; // good const atom = { value: 1, addValue(value) { return atom.value + value; }, };
-
3.4 使用简写属性值. eslint:
object-shorthand
jscs:requireEnhancedObjectLiterals
原因:更简短且描述更清楚.
const lukeSkywalker = 'Luke Skywalker'; // bad const obj = { lukeSkywalker: lukeSkywalker, }; // good const obj = { lukeSkywalker, };
-
3.5 将简写的属性统一放到对象声明开头.
原因:容易区分使用简写的属性.
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, };
- 3.6 只对非法标识符的属性使用引号. eslint:
quote-props
jscs:disallowQuotedKeysInObjects
原因:通常我们主观上认为更易读.有利于语法高亮,更容易被许多JS引擎优化.
// bad
const bad = {
'foo': 3,
'bar': 4,
'data-blah': 5,
};
// good
const good = {
foo: 3,
bar: 4,
'data-blah': 5,
};
原因:这些方法可能会被对象自身的同名属性覆盖 - 比如
{ hasOwnProperty: false }
或者对象是null(Object.create(null)
).
// bad
console.log(object.hasOwnProperty(key));
// good
console.log(Object.prototype.hasOwnProperty.call(object, key));
// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
/* or */
import has from 'has'; // https://www.npmjs.com/package/has
// ...
console.log(has.call(object, key));
-
3.8 优先使用对象展开运算符而不是对象浅拷贝
Object.assign
. 使用对象剩余运算符来获得新的有具体被省略属性的对象.// very bad const original = { a: 1, b: 2 }; const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ delete copy.a; // so does this // bad const original = { a: 1, b: 2 }; const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 } // good const original = { a: 1, b: 2 }; const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 } const { a, ...noA } = copy; // noA => { b: 2, c: 3 }
数组
-
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'); // good const nodes = Array.from(foo); // best const nodes = [...foo];
-
4.5 使用
Array.from
方法将类数组对象转化成数组.const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 }; // bad const arr = Array.prototype.slice.call(arrLike); // good const arr = Array.from(arrLike);
-
4.6 遍历迭代器进行映射时使用 Array.from 代替扩展运算符
...
, 因为这可以避免创建中间数组.// bad const baz = [...foo].map(bar); // good const baz = Array.from(foo, bar);
-
4.7 在数组方法的回调函数中使用return.如果函数体只有一条返回没有副作用的声明则可以省略return, 遵循 8.2. eslint:
array-callback-return
// good [1, 2, 3].map((x) => { const y = x + 1; return x * y; }); // good [1, 2, 3].map(x => x + 1); // bad - no returned value means `acc` becomes undefined after the first iteration [[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => { const flatten = acc.concat(item); acc[index] = flatten; }); // good [[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => { const flatten = acc.concat(item); acc[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; });
-
4.8 如果一个数组有多行则要在数组的开括号后和闭括号前使用新行
// bad const arr = [ [0, 1], [2, 3], [4, 5], ]; const objectInArray = [{ id: 1, }, { id: 2, }]; const numberInArray = [ 1, 2, ]; // good const arr = [[0, 1], [2, 3], [4, 5]]; const objectInArray = [ { id: 1, }, { id: 2, }, ]; const numberInArray = [ 1, 2, ];
解构
-
5.1 访问对象的多个属性时使用对象解构. eslint:
prefer-destructuring
原因:解构可以避免创建属性的临时引用.
// bad function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return `${firstName} ${lastName}`; } // good function getFullName(user) { const { firstName, lastName } = user; return `${firstName} ${lastName}`; } // best function getFullName({ firstName, lastName }) { return `${firstName} ${lastName}`; }
-
5.2 使用数组解构. eslint:
prefer-destructuring
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]; } // the caller needs to think about the order of return data const [left, __, top] = processInput(input); // good function processInput(input) { // then a miracle occurs return { left, right, top, bottom }; } // the caller selects only the data they need const { left, top } = processInput(input);
字符串
-
6.1 字符串使用单引号
''
. eslint:quotes
// bad const name = "Capt. Janeway"; // bad - template literals should contain interpolation or newlines const name = `Capt. Janeway`; // good const name = 'Capt. Janeway';
-
6.2 单行超过100个字符的字符串不应该使用字符串连接符来跨行书写.
原因:截断的字符串很难维护并且代码不易被搜索查找.
// 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.3 动态构建字符串时使用模板字符串而不是拼接. eslint:
prefer-template
template-curly-spacing
原因:模板字符串有可读性强,语法明确,换行合理和字符串插值的特点.
// bad function sayHi(name) { return 'How are you, ' + name + '?'; } // bad function sayHi(name) { return ['How are you, ', name, '?'].join(); } // bad function sayHi(name) { return `How are you, ${ name }?`; } // good function sayHi(name) { return `How are you, ${name}?`; }
-
6.5 不要在字符串中使用不必要的转义字符. eslint:
no-useless-escape
原因:反斜线不利于阅读,应该只在必要的时候出现.
// bad const foo = '\'this\' \i\s \"quoted\"'; // good const foo = '\'this\' is "quoted"'; const foo = `my name is '${name}'`;
函数
-
7.1 使用具名函数表达式而非函数声明. eslint:
func-style
原因:函数声明被提升了,意味着很容易在文件中定义此函数之前引用它。不利于可读性和可维护性.如果你发现函数定义既庞大又复杂以至于不能理解文件的其他部分,或许你应该将它拆分成模块。别忘记要显式命名表达式,不用管名字是否是从包含的变量中推断的(通常出现在使用Babel编译器的现代浏览器中).这样会消除Error调用栈中的猜想. (讨论)
// bad function foo() { // ... } // bad const foo = function () { // ... }; // good // lexical name distinguished from the variable-referenced invocation(s) const short = function longUniqueMoreDescriptiveLexicalFoo() { // ... };
-
7.2 用圆括号包裹自执行匿名函数. eslint:
wrap-iife
原因:一个立即执行匿名函数表达式是一个单一的单元-括号清楚地表达了它包含函数自身和调用括号的意思.注意,在到处都是模块的世界中几乎不需要IIFE.
// immediately-invoked function expression (IIFE) (function () { console.log('Welcome to the Internet. Please follow me.'); }());
- 7.3 不要在非函数块(
if
,while
等)中声明函数.要将函数赋给变量.浏览器允许你这么做,但是处理方式不同,这不是好消息. eslint:no-loop-func
-
7.4 注意: ECMA-262定义了
block
作为一组语句的块. 函数声明不是语句. Read ECMA-262's note on this issue.// bad if (currentUser) { function test() { console.log('Nope.'); } } // good let test; if (currentUser) { test = () => { console.log('Yup.'); }; }
-
7.5 不要将参数命名为
arguments
. 会导致该参数的优先级高于每个函数作用域内原先存在的arguments
对象.// bad function foo(name, options, arguments) { // ... } // good function foo(name, options, args) { // ... }
-
7.6 不要使用
arguments
, 使用其余运算符...
. eslint:prefer-rest-params
原因:
...
是你想获得的参数列表,因此,扩展语法的参数是真正的数组,而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) { // No! We shouldn't mutate function arguments. // Double bad: if opts is falsy it'll be set to an object which may // be what you want but it can introduce subtle 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 不要使用Function构造函数创建函数. eslint:
no-new-func
原因:此方式创建函数和对字符串使用eval()一样会产生漏洞.
// bad var add = new Function('a', 'b', 'return a + b'); // still bad var subtract = Function('a', 'b', 'return a - b');
-
7.11 在函数签名中使用空格. eslint:
space-before-function-paren
space-before-blocks
原因:统一为先,不应该在增删名字的同时增删空格.
// bad const f = function(){}; const g = function (){}; const h = function() {}; // good const x = function () {}; const y = function a() {};
-
7.12 不要改变参数. eslint:
no-param-reassign
原因:操作作为参数传入的对象可能在原始调用中造成意想不到的变量副作用.
// bad function f1(obj) { obj.key = 1; }; // good function f2(obj) { const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1; };
-
7.13 不要给参数重新赋值. eslint:
no-param-reassign
原因:参数重新赋值可能会导致无法预期的行为,尤其是当操作
arguments
对象时.也可能导致优化问题,尤其是在V8引擎中// 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 调用可变参数函数时建议使用展开运算符
...
. eslint:prefer-spread
原因:显然你无需使用上下文,很难结合
new
和apply
.// 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, 8, 5])); // good new Date(...[2016, 8, 5]);
-
7.15 多行签名或调用的函数应该像此指南中其他多行列表一样被缩进:每一个独占一行,最后一个加一个逗号. eslint:
function-paren-newline
// bad function foo(bar, baz, quux) { // ... } // good function foo( bar, baz, quux, ) { // ... } // bad console.log(foo, bar, baz); // good console.log( foo, bar, baz, );
箭头函数
-
8.1 当你必须使用函数表达式(传递匿名函数)时,使用箭头函数标记. eslint:
prefer-arrow-callback
,arrow-spacing
jscs:requireArrowFunctions
原因:这会创建一个能在其中使用
this
上下文的函数,这是你想要的,语法也更明确.不适用的地方:如果有一个相当复杂的函数,应该把逻辑放到自己的函数声明里.
// 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. 否则保留花括号并使用
return
语句. eslint:arrow-parens
,arrow-body-style
原因:语法糖.当进行多个函数的链式操作时可读性好.
// bad [1, 2, 3].map(number => { const nextNumber = number + 1; `A string containing the ${nextNumber}.`; }); // good [1, 2, 3].map(number => `A string containing the ${number}.`); // good [1, 2, 3].map((number) => { const nextNumber = number + 1; return `A string containing the ${nextNumber}.`; }); // good [1, 2, 3].map((number, index) => ({ index: number })); // No implicit return with side effects function foo(callback) { const val = callback(); if (val === true) { // Do something if callback returns true } } let bool = false; // bad foo(() => bool = true); // good foo(() => { bool = true; });
-
8.3 一旦表达式跨多行,使用圆括号包裹以便更好阅读.
原因:清晰展示了函数的开始和结束.
// 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 函数如果只接收一个参数并且没使用用花括号,则省略圆括号. 否则为了清晰明确总是使用圆括号包裹参数.注意:总是使用圆括号也是可以接受的,eslint中的"always"选项.eslint:
arrow-parens
原因:看上去不混乱.
// 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’ve broken it ` + 'over multiple lines!' )); // 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 避免把箭头函数语法 (
=>
) 和比较运算符 (<=
,>=
)弄混. eslint:no-confusing-arrow
// 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; };
-
8.6 注意有隐式返回函数体的箭头函数的位置. eslint:
implicit-arrow-linebreak
// bad (foo) => bar; (foo) => (bar); // good (foo) => bar; (foo) => (bar); (foo) => ( bar )
类&构造函数
-
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()}`; } }
-
9.5 如果未声明构造函数,则类会有一个默认的构造函数. 没必要用空的构造函数或者将其委托给父类. eslint:
no-useless-constructor
// 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 避免类成员重复. eslint:
no-dupe-class-members
原因:重复的类成员声明会默认使用最后声明的-有重复值基本就是bug.
// bad class Foo { bar() { return 1; } bar() { return 2; } } // good class Foo { bar() { return 1; } } // good class Foo { bar() { return 2; } }
模块
-
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 不要使用通配符导入.
原因:这会确保你只有一个默认的export.
// bad import * as AirbnbStyleGuide from './AirbnbStyleGuide'; // good import AirbnbStyleGuide from './AirbnbStyleGuide';
-
10.3 不要直接export从import中导入的模块.
原因:很显然有一个明确的方法来import和export会保持一致性.
// bad // filename es6.js export { es6 as default } from './airbnbStyleGuide'; // good // filename es6.js import { es6 } from './AirbnbStyleGuide'; export default es6;
-
10.4 只允许在一个地方从一个路径import. eslint:
no-duplicate-imports
原因:有多行同一个路径的import会使代码更难维护.
// 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 不要export可变的绑定值. eslint:
import/no-mutable-exports
原因:通常来说可变应该被避免,尤其是在export绑定值的时候.通常来说,这个技术只在常量引用被导出的时候使用.
// bad let foo = 3; export { foo } // good const foo = 3; export { foo }
-
10.6 在单一export的模块中,建议export default而不是具名export. eslint:
import/prefer-default-export
原因:建议更多的文件只有一个export出口.有利于维护和阅读.
// bad export function foo() {} // good export default function foo() {}
-
10.7 将所有的
import
放在非import
语句前. eslint:import/imports-first
原因:由于
import
会被提前,将其全部置于顶部会避免意外行为.// bad import foo from 'foo'; foo.init(); import bar from 'bar'; // good import foo from 'foo'; import bar from 'bar'; foo.init();
-
10.8 多行import应该像多行数组和对象字面量一样被缩进.
原因:花括号遵循此规范中其他花括号块同样的缩进规则,同样要加尾逗号.
// bad import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path'; // good import { longNameA, longNameB, longNameC, longNameD, longNameE, } from 'path';
-
10.9 在模块import声明中禁止使用Webpack的加载器语法. eslint:
import/no-webpack-loader-syntax
原因:在import中使用Webpack语法会导致代码耦合到模块绑定中。建议在
webpack.config.js
中使用加载器语法.// 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 不要使用迭代器.建议使用JS更高优先级的函数代替
for-in
或for-of
循环. eslint:no-iterator
no-restricted-syntax
原因:这会强化不可变的规则.使用带返回值的纯函数很容易消除副作用.
使用
map()
/every()
/filter()
/find()
/findIndex()
/reduce()
/some()
/ ... 来遍历数组, 用Object.keys()
/Object.values()
/Object.entries()
来制造数组以便能对对象进行迭代.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; // bad const increasedByOne = []; for (let i = 0; i < numbers.length; i++) { increasedByOne.push(numbers[i] + 1); } // good const increasedByOne = []; numbers.forEach((num) => { increasedByOne.push(num + 1); }); // best (keeping it functional) const increasedByOne = numbers.map(num => num + 1);
-
11.2 现在不要使用生成器.
原因:不能很好地翻译为ES5.
-
11.3 如果你非得使用生成器或者无视 建议, 请确保函数签名中的空格位置正确. eslint:
generator-star-spacing
原因:
function
和*
是同一个概念 -*
不是function
的修饰符,function*是不同于
function的独特的构造函数
.// bad function * foo() { // ... } // bad const bar = function * () { // ... }; // bad const baz = function *() { // ... }; // bad const quux = function*() { // ... }; // bad function*foo() { // ... } // bad function *foo() { // ... } // very bad function * foo() { // ... } // very bad const wat = function * () { // ... }; // good function* foo() { // ... } // good const foo = function* () { // ... };
属性
-
12.1 访问属性时使用
.
. eslint:dot-notation
jscs:requireDotNotation
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');
-
12.3 进行幂次运算时使用
**
. eslint:no-restricted-properties
.// bad const binary = Math.pow(2, 10); // good const binary = 2 ** 10;
变量
-
13.1 总是使用
const
或者let
声明变量. 不这么做会导致全局变量问题. 要避免污染全局命名空间. Captain Plannet警告过我们.eslint:no-undef
prefer-const
// bad superPower = new SuperPower(); // good const superPower = new SuperPower();
-
13.2 每个变量的声明或赋值都要使用
const
或者let
. eslint:one-var
原因:这种方式更易添加变量声明,不用考虑将
;
变成,
.用debugger逐个调试也很方便,而不是一次跳过所有变量.// 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 将
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
是块级作用域而不是函数级作用域.// bad - unnecessary function call function checkName(hasName) { const name = getName(); if (hasName === 'test') { return false; } if (name === 'test') { this.setName(''); return false; } return name; } // good function checkName(hasName) { if (hasName === 'test') { return false; } const name = getName(); if (name === 'test') { this.setName(''); return false; } return name; }
-
13.5 变量不要进行链式赋值.
原因:变量链式赋值会创建隐藏的全局变量.
// 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); // throws ReferenceError console.log(b); // 1 console.log(c); // 1 // good (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 // the same applies for `const`
-
13.6 避免使用自增和自减一元运算符 (++, --). eslint
no-plusplus
原因:根据eslint文档,自增和自减一元运算符受到分号自动插入的影响可能在应用内部引发自增和自减值的隐蔽错误.用像
num += 1
的语句而不是num++
或num ++
来修改值更有表达力.禁止一元自增和自减语句也避免了前置自增/前置自减值在程序中引起的不可预期的行为的副作用.// bad const 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 const 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;
-
13.7 避免在赋值中的
=
前后换行. 如果要换行的话使用圆括号包裹max-len
. eslintoperator-linebreak
.原因?
=
周围的换行会混淆赋值.// bad const foo = superLongLongLongLongLongLongLongLongFunctionName(); // bad const foo = 'superLongLongLongLongLongLongLongLongString'; // good const foo = ( superLongLongLongLongLongLongLongLongFunctionName() ); // good const foo = 'superLongLongLongLongLongLongLongLongString';
-
13.8 不允许出现未被使用的变量. eslint:
no-unused-vars
原因:声明但未被使用的变量通常是不完全重构犯下的错误.这种变量在代码里浪费空间并会给读者造成困扰.
// bad var some_unused_var = 42; // Write-only variables are not considered as used. var y = 10; y = 5; // A read for a modification of itself is not considered as used. var z = 0; z = z + 1; // Unused function arguments. function getX(x, y) { return x; } // good function getXPlusY(x, y) { return x + y; } var x = 1; var y = a + 2; alert(getXPlusY(x, y)); // 'type' is ignored even if unused because it has a rest property sibling. // This is a form of extracting an object that omits the specified keys. var { type, ...coords } = data; // 'coords' is now the 'data' object without its 'type' property.
变量提升
-
14.1
var
声明会被提升到最近的闭合函数作用域的顶部, 但是赋值不会.const
和let
声明有一个新的概念叫 临时死区 (TDZ). 了解 typeof不再安全很重要.// we know this wouldn't work (assuming there // is no notDefined global variable) function example() { console.log(notDefined); // => throws a ReferenceError } // creating a variable declaration after you // reference the variable will work due to // variable hoisting. Note: the assignment // value of `true` is not hoisted. function example() { console.log(declaredButNotAssigned); // => undefined var declaredButNotAssigned = true; } // the interpreter is hoisting the variable // declaration to the top of the scope, // which means our example could be rewritten as: function example() { let declaredButNotAssigned; console.log(declaredButNotAssigned); // => undefined declaredButNotAssigned = true; } // using const and 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'); }; } // 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 函数声明会提升函数名和函数体.
function example() { superPower(); // => Flying function superPower() { console.log('Flying'); } }
-
更多信息请参考 JavaScript Scoping & Hoisting by Ben Cherry.
比较运算符&相等
-
15.2 条件声明例如
if
会用ToBoolean
这个抽象方法将表达式转成布尔值并遵循如下规则:- Objects 等于 true
- Undefined 等于 false
- Null 等于 false
- Booleans 等于 布尔值
- Numbers 在 +0, -0, or NaN的情况下等于false, 其他情况是 true
- Strings 为
''
时等于 false , 否则是 true
if ([0] && []) { // true // 数组(即使是空数组)也是对象,对象等于true }
-
15.3 对于布尔值使用简写,但对于字符串和数字要显式比较.
// bad if (isValid === true) { // ... } // good if (isValid) { // ... } // bad if (name) { // ... } // good if (name !== '') { // ...stuff... } // bad if (collection.length) { // ... } // good if (collection.length > 0) { // ... }
- 15.4 更多信息请见 Truth Equality and JavaScript by Angus Croll.
- 15.5 在用
case
和default
语句创建的包含有如下词语(如let
,const
,function
和class
)的代码块中使用花括号 .
原因:这些词语在整个
switch
中可见但是仅仅在当执行到case
时被赋值的时候初始化.当多条case
语句试图定义同一个变量时会导致问题.
eslint rules: no-case-declarations
.
```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 通常三元运算是单行表达式,不应该被嵌套. eslint:
no-nested-ternary
.// 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 避免不必要的三元运算符.
eslint rules:
no-unneeded-ternary
.// 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;
-
15.8 声明语句中有多个运算符时用圆括号包裹运算符. 唯一例外是标准算数运算符 (
+
,-
,*
, &/
) 因为它们的优先级基本都知道. eslint:no-mixed-operators
原因. 提高可读性并表明了开发者的意图.
// bad const foo = a && b < 0 || c > 0 || d + 1 === 0; // bad const bar = a ** b - 5 % d; // bad // one may be confused into thinking (a || b) && c if (a || b && c) { return d; } // good const foo = (a && b < 0) || c > 0 || (d + 1 === 0); // good const bar = (a ** b) - (5 % d); // good if (a || (b && c)) { return d; } // good const bar = a + b / c * d;
块
-
16.1 多行代码块使用花括号. eslint:
nonblock-statement-body-position
// bad if (test) return false; // good if (test) return false; // good if (test) { return false; } // bad function foo() { return false; } // good function bar() { 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(); }
-
16.3 如果
if
块总是执行return
声明, 随后的else
块是不必要的. 跟随if
块的else if
块中包含的return
可以被拆成多个if
块. eslint:no-else-return
// bad function foo() { if (x) { return x; } else { return y; } } // bad function cats() { if (x) { return x; } else if (y) { return y; } } // bad function dogs() { if (x) { return x; } else { if (y) { return y; } } } // good function foo() { if (x) { return x; } return y; } // good function cats() { if (x) { return x; } if (y) { return y; } } //good function dogs(x) { if (x) { if (z) { return y; } } else { return z; } }
控制语句
-
17.1 一旦你的控制语句 (
if
,while
等.) 太长或者超出行宽最大长度,每一个(组)条件要被放到新行.逻辑运算符应该在写在行的开头.原因:行开头有运算符可以使运算符有像链式方法一样的形式.这对于追踪复杂逻辑能够提高可读性.
// bad if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) { thing1(); } // bad if (foo === 123 && bar === 'abc') { thing1(); } // bad if (foo === 123 && bar === 'abc') { thing1(); } // bad if ( foo === 123 && bar === 'abc' ) { thing1(); } // good if ( foo === 123 && bar === 'abc' ) { thing1(); } // good if ( (foo === 123 || bar === "abc") && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening() ) { thing1(); } // good if (foo === 123 && bar === 'abc') { thing1(); }
-
17.2 不要使用短路运算符代替控制语句.
// bad !isRunning && startRunning(); // good if (!isRunning) { startRunning(); }
注释
-
18.1 多行注释使用
/** ... */
.// 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 */ function make(tag) { // ... return element; }
-
18.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; }
-
18.3 所有注释都要以空格开头便于阅读. eslint:
spaced-comment
// bad //is current tab const active = true; // good // is current tab const active = true; // bad /** *make() returns a new element *based on the passed-in tag name */ function make(tag) { // ... return element; } // good /** * make() returns a new element * based on the passed-in tag name */ function make(tag) { // ... return element; }
- 18.4 如果想表明这个问题以后会再次被查看或者给出了这个问题的解决方案,在注释前加上前缀
FIXME
或者TODO
会有利于其他开发者很快理解问题. 这些不同于一般的注释因为它们是可操作的. 操作是FIXME: -- need to figure this out
或TODO: -- need to implement
.
-
18.5 使用
// FIXME:
来标注问题.class Calculator extends Abacus { constructor() { super(); // FIXME: shouldn't use a global here total = 0; } }
-
18.6 使用
// TODO:
来标明问题的解决方案.class Calculator extends Abacus { constructor() { super(); // TODO: total should be configurable by an options param this.total = 0; } }
空格
-
19.1 将软tab设置为两个空格. eslint:
indent
// bad function foo() { ∙∙∙∙const name; } // bad function bar() { ∙const name; } // good function baz() { ∙∙const name; }
-
19.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', });
-
19.3 在控制语句的圆括号前加一个空格 (
if
,while
等). 在函数调用和声明中在参数列表和函数名间不要放置空格. eslint:keyword-spacing
// bad if(isJedi) { fight (); } // good if (isJedi) { fight(); } // bad function fight () { console.log ('Swooosh!'); } // good function fight() { console.log('Swooosh!'); }
-
19.4 操作符两边放置空格. eslint:
space-infix-ops
// bad const x=y+5; // good const x = y + 5;
-
19.5 用空行结束文件. eslint:
eol-last
// bad import { es6 } from './AirbnbStyleGuide'; // ... export default es6;
// bad import { es6 } from './AirbnbStyleGuide'; // ... export default es6;↵ ↵
// good import { es6 } from './AirbnbStyleGuide'; // ... export default es6;↵
-
19.6 进行长的函数链式调用时使用缩进(超过两个方法的链式调用).为了强调该行是方法调用而不是新的语句声明要用.开头. eslint:
newline-per-chained-call
no-whitespace-before-property
// 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').classed('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); // good const leds = stage.selectAll('.led').data(data);
-
19.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;
-
19.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); }
-
19.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); }
-
19.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]);
-
19.11 在花括号中添加空格. eslint:
object-curly-spacing
// bad const foo = {clark: 'kent'}; // good const foo = { clark: 'kent' };
-
19.12 避免一行代码超过100个字符(包括空格). 注意: above,不包括整体不应该被分割的长字符串. eslint:
max-len
原因:确保可读性和可维护性.
// bad const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy; // bad $.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.')); // good const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy; // good $.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' }, }) .done(() => console.log('Congratulations!')) .fail(() => console.log('You have failed this city.'));
-
19.13 在同一行中开放代码块的内部开始和结束的部分空格数保持一致. 此规则亦适用于单行的闭合代码块. eslint:
block-spacing
// bad function foo() {return true;} if (foo) { bar = 0;} // good function foo() { return true; } if (foo) { bar = 0; }
-
19.14 逗号前不要加空格,逗号后要加空格. eslint:
comma-spacing
// bad var foo = 1,bar = 2; var arr = [1 , 2]; // good var foo = 1, bar = 2; var arr = [1, 2];
-
19.15 计算属性内不要使用空格. eslint:
computed-property-spacing
// bad obj[foo ] obj[ 'foo'] var x = {[ b ]: a} obj[foo[ bar ]] // good obj[foo] obj['foo'] var x = { [b]: a } obj[foo[bar]]
-
19.16 在函数名和调用间不要加空格. eslint:
func-call-spacing
// bad func (); func (); // good func();
-
19.17 对象字面量属性的键和值之间要强制使用空格. eslint:
key-spacing
// bad var obj = { "foo" : 42 }; var obj2 = { "foo":42 }; // good var obj = { "foo": 42 };
- 19.18 避免行末尾的空格. eslint:
no-trailing-spaces
-
19.19 避免多个空行,只允许文件末尾出现一个新行. eslint:
no-multiple-empty-lines
// bad var x = 1; var y = 2; // good var x = 1; var y = 2;
逗号
-
20.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', };
-
20.2 结尾使用额外的逗号 eslint:
comma-dangle
原因:会让git diff更干净. 你不必担心老式浏览器的问题 结尾逗号问题因为Babel转译器会在转译后的代码中移除额外的逗号.
// bad - git diff without trailing comma const hero = { firstName: 'Florence', - lastName: 'Nightingale' + lastName: 'Nightingale', + inventorOf: ['coxcomb chart', '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', ]; // bad function createHero( firstName, lastName, inventorOf ) { // does nothing } // good function createHero( firstName, lastName, inventorOf, ) { // does nothing } // good (note that a comma must not appear after a "rest" element) function createHero( firstName, lastName, inventorOf, ...heroArgs ) { // does nothing } // bad createHero( firstName, lastName, inventorOf ); // good createHero( firstName, lastName, inventorOf, ); // good (note that a comma must not appear after a "rest" element) function createHero( firstName, lastName, inventorOf, ...heroArgs );
分号
-
21.1 当然要使用分号 eslint:
semi
jscs:requireSemicolons
原因: 当JavaScript不使用分号遇到分行符时,会使用一系列称作分号自动插入(ASI) 的规则来决定其是否应该将分行符视作声明的结尾, (正如名字所暗示的) 如果必要的话会在分行符前插入一个分号. ASI拥有几个古怪的行为, 如果JavaScript错误地解释了换行符你的代码会收到破坏. 这些规则会随着新的特性成为JavaScript的一部分而变得越来越复杂. 显式地结束声明语句并且配置好校验器来捕获缺失的分号会帮你避免遇到这些问题.
// bad - raises exception const luke = {} const leia = {} [luke, leia].forEach(jedi => jedi.father = 'vader') // bad - raises exception const reaction = "No! That's impossible!" (async function meanwhileOnTheFalcon(){ // handle `leia`, `lando`, `chewie`, `r2`, `c3p0` // ... }()) // bad - returns `undefined` instead of the value on the next line - always happens when `return` is on a line by itself because of ASI! function foo() { return 'search your feelings, you know it to be foo' } // good const luke = {}; const leia = {}; [luke, leia].forEach((jedi) => { jedi.father = 'vader'; }); // good const reaction = "No! That's impossible!"; (async function meanwhileOnTheFalcon(){ // handle `leia`, `lando`, `chewie`, `r2`, `c3p0` // ... }()); // good function foo() { return 'search your feelings, you know it to be foo'; }
更多.
类型转换
- 22.1 在声明的开始部分进行类型强转.
-
22.2 字符串:
no-new-wrappers
// => this.reviewScore = 9; // bad const totalScore = new String(this.reviewScore); // typeof totalScore is "object" not "string" // bad const totalScore = this.reviewScore + ''; // invokes this.reviewScore.valueOf() // bad const totalScore = this.reviewScore.toString(); // isn't guaranteed to return a string // good const totalScore = String(this.reviewScore);
-
22.3 数字: 使用
Number
进行转换,使用带基数的parseInt
对字符串进行转换. eslint:radix
no-new-wrappers
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);
-
22.4 不管什么原因你使用了
parseInt
,若到达了性能瓶颈,你需要使用位运算性能原因, 请注释说明这么做的原因.// good /** * parseInt was the reason my code was slow. * Bitshifting the String to coerce it to a * Number made it a lot faster. */ const val = inputValue >> 0;
-
22.5 注意: 谨慎使用位运算. 数字使用 64位值表示, 但是位运算只返回32位整数 (代码). 小于32位整数的位运算会导致不可预期的行为. 讨论. 最大的有符号整数是 2,147,483,647:
2147483647 >> 0 //=> 2147483647 2147483648 >> 0 //=> -2147483648 2147483649 >> 0 //=> -2147483647
-
22.6 布尔值:
const age = 0; // bad const hasAge = new Boolean(age); // good const hasAge = Boolean(age); // best const hasAge = !!age;
命名规则
-
23.1 避免单字母名字. 命名需要有可描述性. eslint:
id-length
// bad function q() { // ... } // good function query() { // .. }
-
23.2 命名对象,函数和实例时使用驼峰风格. eslint:
camelcase
jscs:requireCamelCaseOrUpperCaseIdentifiers
// bad const OBJEcttsssss = {}; const this_is_my_object = {}; function c() {} // good const thisIsMyObject = {}; function thisIsMyFunction() {}
-
23.3 仅当命名构造函数或类的时候使用帕斯卡风格. eslint:
new-cap
// 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', });
-
23.4 不要使用下划线开头或结尾. eslint:
no-underscore-dangle
原因:JavaScript对于属性和方法并没有隐私的概念.尽管下划线开头通常意味着'private', 事实上这些属性是完全公开的,是公开API的一部分. 这种风格可能导致开发者错误地认为这不重要或者测试也不必要. 也就是说: 如果你想让其 “private”, 必须使其不可见.
// bad this.__firstName__ = 'Panda'; this.firstName_ = 'Panda'; this._firstName = 'Panda'; // good this.firstName = 'Panda'; // good, in environments where WeakMaps are available // see https://kangax.github.io/compat-table/es6/#test-WeakMap const firstNames = new WeakMap(); firstNames.set(this, 'Panda');
-
23.5 不要保存指向
this
的引用. 使用箭头函数或 函数的#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); }; }
-
23.6 基本的文件名应该和默认export的名字刚好匹配.
// file 1 contents class CheckBox { // ... } export default CheckBox; // file 2 contents export default function fortyTwo() { return 42; } // file 3 contents export default function insideDirectory() {} // in some other file // bad import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export // bad import CheckBox from './check_box'; // PascalCase import/export, snake_case filename import forty_two from './forty_two'; // snake_case import/filename, camelCase export import inside_directory from './inside_directory'; // snake_case import, camelCase export import index from './inside_directory/index'; // requiring the index file explicitly import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly // good import CheckBox from './CheckBox'; // PascalCase export/import/filename import fortyTwo from './fortyTwo'; // camelCase export/import/filename import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index" // ^ supports both insideDirectory.js and insideDirectory/index.js
-
23.7 当默认导出一个函数时使用驼峰风格. 文件名要和函数名相同.
function makeStyleGuide() { } export default makeStyleGuide;
-
23.8 当导出 构造函数 / 类 / 单例 / 函数库 / 对象时使用帕斯卡风格.
const AirbnbStyleGuide = { es6: { } }; export default AirbnbStyleGuide;
-
23.9 缩略词应全部大写或小写.
原因:名字是用来阅读的,不能让步给计算机算法.
// bad import SmsContainer from './containers/SmsContainer'; // bad const HttpRequests = [ // ... ]; // good import SMSContainer from './containers/SMSContainer'; // good const HTTPRequests = [ // ... ]; // best import TextMessageContainer from './containers/TextMessageContainer'; // best const Requests = [ // ... ];
-
23.10 可以在以下情况把一个常量全部大写(1) 被导出, (2)
const
声明的 (不能被重新赋值), (3) 开发者r认为该变量(内部嵌套的属性)不会改变.原因? 这对于开发者不确定变量是否会改变的情形下的额外的辅助工具. UPPERCASE_VARIABLES 能让开发者明确该变量(和它的属性)无法改变.
- 所有用
const
声明的变量呢? - 没必要,所以一个文件内的常量没必要用大写. 然而在导出常量的时候应该使用大写. - 导出的对象呢? - 只对导出对象的顶层使用大写(如
EXPORTED_OBJECT.key
) 保证嵌套的属性都不会改变.
// bad const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file'; // bad export const THING_TO_BE_CHANGED = 'should obviously not be uppercased'; // bad export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables'; // --- // allowed but does not supply semantic value export const apiKey = 'SOMEKEY'; // better in most cases export const API_KEY = 'SOMEKEY'; // --- // bad - unnecessarily uppercases key while adding no semantic value export const MAPPING = { KEY: 'value' }; // good export const MAPPING = { key: 'value' };
- 所有用
存取器
- 24.1 属性的存取器不是必需的.
-
24.2 不要使用JavaScript getters/setters 因为可能引起不可预期的副作用,很难测试、维护和理解. 相反,如果要使用存取器函数,使用
getVal()
和setVal('hello')
.// bad class Dragon { get age() { // ... } set age(value) { // ... } } // good class Dragon { getAge() { // ... } setAge(value) { // ... } }
-
24.3如果属性/方法是
boolean
, 使用isVal()
或hasVal()
方法.// bad if (!dragon.age()) { return false; } // good if (!dragon.hasAge()) { return false; }
-
24.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]; } }
事件
-
25.1 当将数据和事件绑定时 (不论是 DOM 事件还是其他像Backbone一类的事件), 传递对象字面量(也叫摘要值)而不是原始值. 这会允许接下来的修改者不用查找和更新事件的每一个处理器就可以给事件添加更多的数据,不要使用下边的:
// bad $(this).trigger('listingUpdated', listing.id); ... $(this).on('listingUpdated', (e, listingId) => { // do something with listingId });
建议:
// good $(this).trigger('listingUpdated', { listingId: listing.id }); ... $(this).on('listingUpdated', (e, data) => { // do something with data.listingId });
jQuery
-
26.1 以
$
为前缀命名jQuery对象变量. jscs:requireDollarBeforejQueryAssignment
// bad const sidebar = $('.sidebar'); // good const $sidebar = $('.sidebar'); // good const $sidebarBtn = $('.sidebar-btn');
-
26.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' }); }
-
26.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();
ECMAScript5兼容性
- 27.1 参考 Kangax's ES5 compatibility table.
ECMAScript6+(ES2015+)风格
- 28.1 这是不同ES6特性的链接集合.
-
28.2 不要使用TC39 proposals还未实现的stage3的功能.
原因:未最终确定, and they are subject to change or to be withdrawn entirely会随着改变及整个废弃而被影响. 我们想要使用JavaScript,而草案还不是JavaScript.
标准库
标准库包含功能有问题但由于遗留原因保留下来的功能.
-
29.1 使用
Number.isNaN
代替全局isNaN
方法. eslint:no-restricted-globals
原因: 全局的
isNaN
方法会将非数字转换为数字, 任何被转换为NaN的东西都会返回true. 若该行为被允许,则要使其明显.// bad isNaN('1.2'); // false isNaN('1.2.3'); // true // good Number.isNaN('1.2.3'); // false Number.isNaN(Number('1.2.3')); // true
-
29.2 使用
Number.isFinite
代替全局isFinite
. eslint:no-restricted-globals
原因: 全局
isFinite
会把非数字转换为数字, 任何被转换为有限大的数字都会返回true. 若该行为被允许,则要使其明显.// bad isFinite('2e3'); // true // good Number.isFinite('2e3'); // false Number.isFinite(parseInt('2e3', 10)); // true
测试
-
30.1 当然需要
function foo() { return true; }
- 30.2 不要这么做,很严重:
- 不论你用哪一个测试框架,都应该写测试用例!
- 尽力写一些简洁的函数, 使改动数据的部分最小化.
- 小心使用 stubs 和 mocks - 它们会使测试变得脆弱.
- 我们在Airbnb中主要使用
mocha
.tape
有时也用于小的独立模块. - 100%的测试覆盖率是需要努力达成的目标,即使这是不切实际的.
- 无论何时修复bug, 写回归测试. 没有回归测试的bug修复几乎会在将在再次出现.
性能
- On Layout & Web Performance
- String vs Array Concat
- Try/Catch Cost In a Loop
- Bang Function
- jQuery Find vs Context, Selector
- innerHTML vs textContent for script text
- Long String Concatenation
- Are Javascript functions like
map()
,reduce()
, andfilter()
optimized for traversing arrays? - Loading...
资源
学习 ES6
阅读
工具
- 代码风格校验
- ESlint - Airbnb Style .eslintrc
- JSHint - Airbnb Style .jshintrc
- Neutrino preset - @neutrinojs/airbnb
其他编码规范指南
- Google JavaScript Style Guide
- jQuery Core Style Guidelines
- Principles of Writing Consistent, Idiomatic JavaScript
- StandardJS
其他风格
- 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 Weekly
- JavaScript, JavaScript...
- Bocoup Weblog
- Adequately Good
- NCZOnline
- Perfection Kills
- Ben Alman
- Dmitry Baranovskiy
- nettuts
播客
谁在使用
这是一份使用这份编码规范的组织列表.给我们提PR我们会把你加到这份列表里.
- 123erfasst: 123erfasst/javascript
- 3blades: 3Blades/javascript
- 4Catalyzer: 4Catalyzer/javascript
- Aan Zee: AanZee/javascript
- Adult Swim: adult-swim/javascript
- Airbnb: airbnb/javascript
- AltSchool: AltSchool/javascript
- Apartmint: apartmint/javascript
- Ascribe: ascribe/javascript
- Avalara: avalara/javascript
- Avant: avantcredit/javascript
- Axept: axept/javascript
- BashPros: BashPros/javascript
- Billabong: billabong/javascript
- Bisk: bisk/javascript
- Bonhomme: bonhommeparis/javascript
- Brainshark: brainshark/javascript
- CaseNine: CaseNine/javascript
- Chartboost: ChartBoost/javascript-style-guide
- ComparaOnline: comparaonline/javascript
- Compass Learning: compasslearning/javascript-style-guide
- DailyMotion: dailymotion/javascript
- DoSomething: DoSomething/eslint-config
- Digitpaint digitpaint/javascript
- Ecosia: ecosia/javascript
- Evernote: evernote/javascript-style-guide
- Evolution Gaming: evolution-gaming/javascript
- EvozonJs: evozonjs/javascript
- ExactTarget: ExactTarget/javascript
- Expensify Expensify/Style-Guide
- Flexberry: Flexberry/javascript-style-guide
- Gawker Media: gawkermedia/javascript
- General Electric: GeneralElectric/javascript
- Generation Tux: GenerationTux/javascript
- GoodData: gooddata/gdc-js-style
- Grooveshark: grooveshark/javascript
- Honey: honeyscience/javascript
- How About We: howaboutwe/javascript
- Huballin: huballin/javascript
- HubSpot: HubSpot/javascript
- Hyper: hyperoslo/javascript-playbook
- InterCity Group: intercitygroup/javascript-style-guide
- Jam3: Jam3/Javascript-Code-Conventions
- JeopardyBot: kesne/jeopardy-bot
- JSSolutions: JSSolutions/javascript
- KickorStick: kickorstick/javascript
- Kinetica Solutions: kinetica/javascript
- LEINWAND: LEINWAND/javascript
- Lonely Planet: lonelyplanet/javascript
- M2GEN: M2GEN/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
- Nimbl3: nimbl3/javascript
- Nulogy: nulogy/javascript
- Orange Hill Development: orangehill/javascript
- Orion Health: orionhealth/javascript
- OutBoxSoft: OutBoxSoft/javascript
- Peerby: Peerby/javascript
- Pier 1: Pier1/javascript
- Qotto: Qotto/javascript-style-guide
- Razorfish: razorfish/javascript-style-guide
- reddit: reddit/styleguide/javascript
- React: facebook.github.io/react/contributing/how-to-contribute.html#style-guide
- REI: reidev/js-style-guide
- Ripple: ripple/javascript-style-guide
- SeekingAlpha: seekingalpha/javascript-style-guide
- Shutterfly: shutterfly/javascript
- Sourcetoad: sourcetoad/javascript
- Springload: springload/javascript
- StratoDem Analytics: stratodem/javascript
- SteelKiwi Development: steelkiwi/javascript
- StudentSphere: studentsphere/javascript
- SwoopApp: swoopapp/javascript
- SysGarage: sysgarage/javascript-style-guide
- Syzygy Warsaw: syzygypl/javascript
- Target: target/javascript
- TheLadders: TheLadders/javascript
- The Nerdery: thenerdery/javascript-standards
- T4R Technology: T4R-Technology/javascript
- VoxFeed: VoxFeed/javascript-style-guide
- WeBox Studio: weboxstudio/javascript
- 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/javascript-style-guide
Korean: tipjs/javascript-style-guide
Polish: mjurczyk/javascript
Russian: uprock/javascript
Spanish: paolocarrasco/javascript-style-guide
Thai: lvarayut/javascript-style-guide
Vietnam: giangpii/javascript-style-guide
JavaScript编码规范指南
和我们聊聊JavaScript
- Find us on gitter.
贡献者
许可
(The MIT License)
Copyright (c) 2012 Airbnb
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
修改
我们鼓励你fork这份指南并改变规则来适应你团队的风格.你还可以列出一些修改补充.这可以让你不用处理合并冲突就可以定期升级编码规范指南