# 前端代碼規范 — JavaScript 風格指南
## 前言
本文基于 github 項目[airbnb/javascript](https://github.com/airbnb/javascript#types)翻譯，也加入了一些個人理解。規范有利于我們更好的提高代碼可讀性，避免一些不必要的 bug。但是，并沒有統一的標準和硬性要求，這里只是給大家提供一些參考，適合團隊和自己的才是最好的。
**個人博客地址[???? fe-code](https://github.com/wuyawei/fe-code)**
## 類型
* 1.1 基本類型
> 基本類型賦值時，應該直接使用類型的值
* `string`
* `number`
* `boolean`
* `null`
* `undefined`
* `symbol`
~~~
const foo = 1;
let bar = foo;
bar = 9;
console.log(foo, bar); // => 1,9
復制代碼
~~~
* 復雜類型
> 復雜類型賦值其實是地址的引用
* `object`
* `array`
* `function`
~~~
const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9
// const 只能阻止引用類型地址的重新賦值
// 并不能保證引用類型的屬性等不變
復制代碼
~~~
## 狀態的使用（原文為 Reference）
* 2.1 所有的賦值都用`const`，避免使用`var`. eslint:[`prefer-const`](http://eslint.org/docs/rules/prefer-const.html),[`no-const-assign`](http://eslint.org/docs/rules/no-const-assign.html)
> 盡量確保你的代碼中的狀態是可控范圍內的，重復引用會出現難以理解的 bug 和代碼。
~~~
// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2;
復制代碼
~~~
* 2.2 如果你一定要對參數重新賦值，那就用`let`，而不是`var`. eslint:[`no-var`](http://eslint.org/docs/rules/no-var.html)
> `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 和 let 都只存在于它定義的那個塊級作用域
{
let a = 1;
const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
復制代碼
~~~
## 對象
* 3.1 使用字面值創建對象. eslint:[`no-new-object`](http://eslint.org/docs/rules/no-new-object.html)
~~~
// bad
const item = new Object();
// good
const item = {};
復制代碼
~~~
* 3.2 當創建一個帶有動態屬性名的對象時，將定義的所有屬性放在對象的一個地方。
~~~
function getKey(k) {
return `a key named ${k}`;
}
// bad
const obj = {
id: 5,
name: 'San Francisco',
};
obj[getKey('enabled')] = true;
// good getKey('enabled')是動態屬性名
const obj = {
id: 5,
name: 'San Francisco',
[getKey('enabled')]: true,
};
復制代碼
~~~
* 3.3 方法簡寫. eslint:[`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html)
~~~
// 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`](http://eslint.org/docs/rules/object-shorthand.html)
~~~
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`](http://eslint.org/docs/rules/quote-props.html)
> 一般來說，我們認為它在主觀上更容易閱讀。它改進了語法突出顯示，并且更容易被JS引擎優化。
~~~
// bad
const bad = {
'foo': 3,
'bar': 4,
'data-blah': 5,
};
// good
const good = {
foo: 3,
bar: 4,
'data-blah': 5,
};
復制代碼
~~~
* 3.7 不要直接調用`Object.prototype`上的方法，如`hasOwnProperty`,`propertyIsEnumerable`,`isPrototypeOf`。
> 在一些有問題的對象上， 這些方法可能會被屏蔽掉 - 如：`{ hasOwnProperty: false }`\- 或這是一個空對象`Object.create(null)`
~~~
// bad
console.log(object.hasOwnProperty(key));
// good
console.log(Object.prototype.hasOwnProperty.call(object, key));
// best
const has = Object.prototype.hasOwnProperty; // 在模塊作用內做一次緩存
/* or */
import has from 'has'; // https://www.npmjs.com/package/has
// ...
console.log(has.call(object, key));
復制代碼
~~~
* 3.8 對象淺拷貝時，更推薦使用擴展運算符`...`，而不是[`Object.assign`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)。解構賦值獲取對象指定的幾個屬性時，推薦用 rest 運算符，也是`...`。
~~~
// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 });
delete copy.a; // so does this 改變了 original
// 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`](http://eslint.org/docs/rules/no-array-constructor.html)
~~~
// bad
const items = new Array();
// good
const items = [];
復制代碼
~~~
* 4.2 用[Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/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 += 1) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];
復制代碼
~~~
* 4.4 推薦用`...`運算符而不是[`Array.from`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from)來將一個類數組轉換成數組。
~~~
const foo = document.querySelectorAll('.foo');
// good
const nodes = Array.from(foo);
// best
const nodes = [...foo];
復制代碼
~~~
* 4.5 用[`Array.from`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/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`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from)而不是`...`運算符去迭代。 這樣可以避免創建一個中間數組。
~~~
// bad
const baz = [...foo].map(bar);
// good
const baz = Array.from(foo, bar);
復制代碼
~~~
* 4.7 在數組方法的回調函數中使用 return 語句。 如果函數體由一條返回一個表達式的語句組成， 并且這個表達式沒有副作用， 這個時候可以忽略return，詳見[8.2](https://juejin.im/post/5d5d5197518825237330552d#arrows--implicit-return). eslint:[`array-callback-return`](http://eslint.org/docs/rules/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 沒有返回值， 導致在第一次迭代后acc 就變成undefined了
[[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`](https://eslint.org/docs/rules/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 數組解構.
~~~
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) {
// 然后就是見證奇跡的時刻
return [left, right, top, bottom];
}
const [left, __, top] = processInput(input);
// good
function processInput(input) {
return { left, right, top, bottom };
}
const { left, top } = processInput(input);
復制代碼
~~~
## 字符串
* 6.1 string 統一用單引號`''`。 eslint:[`quotes`](https://eslint.org/docs/rules/quotes.html)
~~~
// bad
const name = "Capt. Janeway";
// bad - 模板應該包含插入文字或換行
const name = `Capt. Janeway`;
// good
const name = 'Capt. Janeway';
復制代碼
~~~
* 6.2 不應該用`+`連接換行字符串。
> 不好用，且可讀性差
~~~
// 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`](https://eslint.org/docs/rules/prefer-template.html)[`template-curly-spacing`](https://eslint.org/docs/rules/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.4 永遠不要在字符串中用`eval()`，漏洞太多。 eslint:[`no-eval`](https://eslint.org/docs/rules/no-eval)
* [6.5](https://juejin.im/post/5d5d5197518825237330552d#strings--escaping)不要使用不必要的轉義字符。eslint:[`no-useless-escape`](http://eslint.org/docs/rules/no-useless-escape)
> 反斜線可讀性差，只在必要時使用
~~~
// bad
const foo = '\'this\' \i\s \"quoted\"';
// good
const foo = '\'this\' is "quoted"';
//best
const foo = `my name is '${name}'`;
復制代碼
~~~
## 函數
* 7.1 用命名函數表達式而不是函數聲明。eslint:[`func-style`](http://eslint.org/docs/rules/func-style)
> 函數聲明作用域會提升，降低了代碼可讀性和可維護性。如果你發現一個函數又大又復雜，這個函數妨礙這個文件其他部分的理解性，這可能就是時候把這個函數單獨抽成一個模塊了。([Discussion](https://github.com/airbnb/javascript/issues/794))
~~~
// bad
function foo() {
// ...
}
// bad
const foo = function () {
// ...
};
// good
const short = function longUniqueMoreDescriptiveLexicalFoo() {
// ...
};
復制代碼
~~~
* 7.2 把立即執行函數包裹在圓括號里。 eslint:[`wrap-iife`](http://eslint.org/docs/rules/wrap-iife.html)
> 一個立即調用的函數表達式是一個單元 - 把它和他的調用者（圓括號）包裹起來。當然，現代模塊開發中，你基本用不到。
~~~
// immediately-invoked function expression (IIFE)
(function () {
console.log('Welcome to the Internet. Please follow me.');
}());
復制代碼
~~~
* 7.3 不要在非函數塊（if、while等等）內聲明函數。而是把這個函數分配給一個變量。瀏覽器會允許你這樣做，但瀏覽器解析方式不同，結果也許會有差異。【詳見`no-loop-func`】 eslint:[`no-loop-func`](http://eslint.org/docs/rules/no-loop-func.html)
* 7.4**注意:**在ECMA-262中 \[塊`block`\] 的定義是： 一系列的語句； 但是函數聲明不是一個語句。 函數表達式是一個語句。
~~~
// bad
if (currentUser) {
function test() {
console.log('Nope.');
}
}
// good
let test;
if (currentUser) {
test = () => {
console.log('Yup.');
};
}
復制代碼
~~~
* 7.5 永遠不要用`arguments`命名參數。它的優先級高于每個函數作用域自帶的`arguments`對象， 所以會導致函數自帶的`arguments`值被覆蓋。
~~~
// bad
function foo(name, options, arguments) {
// ...
}
// good
function foo(name, options, args) {
// ...
}
復制代碼
~~~
* 7.6 優先使用rest語法`...`，而不是`arguments`。 eslint:[`prefer-rest-params`](http://eslint.org/docs/rules/prefer-rest-params)
> `...`更明確你想用哪些參數。
~~~
// bad
function concatenateAll() {
const args = Array.prototype.slice.call(arguments);
return args.join('');
}
// good
function concatenateAll(...args) {
return args.join('');
}
復制代碼
~~~
* 7.8 使用默認參數語法，而不是在函數里對參數重新賦值。
~~~
// really bad
function handleThings(opts) {
// 雖然你想這么寫， 但是這個會帶來一些細微的bug
// 如果 opts 的值為 false, 它會被賦值為 {}
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`](http://eslint.org/docs/rules/no-new-func)
~~~
// 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`](http://eslint.org/docs/rules/space-before-function-paren)[`space-before-blocks`](http://eslint.org/docs/rules/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`](http://eslint.org/docs/rules/no-param-reassign.html)
> 特別注意引用類型的操作，保證數據的不可變性
~~~
// 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`](http://eslint.org/docs/rules/no-param-reassign.html)
~~~
// 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`](http://eslint.org/docs/rules/prefer-spread)
> Why? 這樣更清晰，你不必提供上下文，而且你不能輕易地用`apply`來組成`new`
~~~
// 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 多個參數的函數應該像這個指南里的其他多行代碼寫法一樣： 每行只有一個參數，每行逗號結尾。
~~~
// 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`](http://eslint.org/docs/rules/prefer-arrow-callback.html),[`arrow-spacing`](http://eslint.org/docs/rules/arrow-spacing.html)
> 它創建了一個在上下文中執行的函數，這通常是您想要的，并且是一種更簡潔的語法。
~~~
// 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 如果函數體由一個沒有副作用的[表達式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)的單個語句組成，去掉大括號和 return。否則，保留大括號且使用`return`語句。 eslint:[`arrow-parens`](https://eslint.org/docs/rules/arrow-parens.html),[`arrow-body-style`](https://eslint.org/docs/rules/arrow-body-style.html)
~~~
// 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
}));
// 表達式有副作用就不要用隱式返回
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:[`arrow-parens`](https://eslint.org/docs/rules/arrow-parens.html)
~~~
// 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](https://juejin.im/post/5d5d5197518825237330552d#arrows--confusing)避免箭頭函數語法`=>`和比較操作符`<=, >=`混淆. eslint:[`no-confusing-arrow`](http://eslint.org/docs/rules/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`](https://eslint.org/docs/rules/implicit-arrow-linebreak)
~~~
// bad
(foo) =>
bar;
(foo) =>
(bar);
// good
(foo) => bar;
(foo) => (bar);
(foo) => (
bar
)
復制代碼
~~~
## 類和構造函數
* 9.1 始終用`class`，避免直接操作`prototype`
~~~
// 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`](http://eslint.org/docs/rules/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`](http://eslint.org/docs/rules/no-dupe-class-members)
> 重復類成員會默默的執行最后一個，有重復肯定就是一個錯誤
~~~
// 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 不要用 import \* 這種通配符
~~~
// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';
// good
import AirbnbStyleGuide from './AirbnbStyleGuide';
復制代碼
~~~
* 10.3 不要直接從 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`](http://eslint.org/docs/rules/no-duplicate-imports)
> Why? 從同一個路徑下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 不要導出可變的綁定 eslint: [`import/no-mutable-exports`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md)
> 盡量減少狀態，保證數據的不可變性。雖然在某些場景下可能需要這種技術，但總的來說應該導出常量。
~~~
// bad
let foo = 3;
export { foo }
// good
const foo = 3;
export { foo }
復制代碼
~~~
* 10.6 在只有一個導出的模塊里，用 `export default` 更好。 eslint: [`import/prefer-default-export`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md)
> 鼓勵使用更多文件，每個文件只做一件事情并導出，這樣可讀性和可維護性更好。
~~~
// bad
export function foo() {}
// good
export default function foo() {}
復制代碼
~~~
* 10.7 `import` 放在其他所有語句之前。 eslint: [`import/first`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md)
> 防止意外行為。
~~~
// 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 loader 語法 eslint: [`import/no-webpack-loader-syntax`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md)
> 最好是在`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 不要用迭代器。用 JavaScript 高階函數代替`for-in`、 `for-of`。 eslint: [`no-iterator`](http://eslint.org/docs/rules/no-iterator.html) [`no-restricted-syntax`](http://eslint.org/docs/rules/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;
// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
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 現在不要用 generator
> 兼容性不好
* 11.3 如果你一定要用，或者你忽略[我們的建議](#generators--nope), 請確保它們的函數簽名之間的空格是正確的。 eslint: [`generator-star-spacing`](http://eslint.org/docs/rules/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`](http://eslint.org/docs/rules/dot-notation.html)
~~~
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`](https://eslint.org/docs/rules/no-restricted-properties).
~~~
// bad
const binary = Math.pow(2, 10);
// good
const binary = 2 ** 10;
復制代碼
~~~
## 變量
* 13.1 始終用 `const` 或 `let` 聲明變量。如果你不想遇到一對變量提升、全局變量的 bug 的話。 eslint: [`no-undef`](http://eslint.org/docs/rules/no-undef) [`prefer-const`](http://eslint.org/docs/rules/prefer-const)
~~~
// bad
superPower = new SuperPower();
// good
const superPower = new SuperPower();
復制代碼
~~~
* 13.2 每個變量單獨用一個 `const` 或 `let`。 eslint: [`one-var`](http://eslint.org/docs/rules/one-var.html)
~~~
// 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 變量聲明放在合理的位置
~~~
// 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 不要使用連續變量分配。 eslint: [`no-multi-assign`](https://eslint.org/docs/rules/no-multi-assign)
> Why? 鏈接變量分配創建隱式全局變量。
~~~
// bad
(function example() {
// JavaScript 將其解釋為
// let a = ( b = ( c = 1 ) );
// let 只對變量 a 起作用; 變量 b 和 c 都變成了全局變量
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
// `const` 也一樣
復制代碼
~~~
* 13.6 不要使用一元遞增遞減運算符（`++`， `--`）. eslint [`no-plusplus`](http://eslint.org/docs/rules/no-plusplus)
> 根據 eslint 文檔，一元遞增和遞減語句受到自動分號插入的影響，并且可能會導致應用程序中的值遞增或遞減的靜默錯誤。 使用num += 1 而不是 num++ 或代替語句來改變你的值也更具表現力。禁止一元遞增和遞減語句也會阻止您無意中預先遞增/預遞減值，從而減少程序出現意外行為。
~~~
// 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;
復制代碼
~~~
* 13.7 避免在 `=` 前/后換行。 如果你的語句超出 [`max-len`](https://eslint.org/docs/rules/max-len.html)， 那就用`()`把這個值包起來再換行。 eslint [`operator-linebreak`](https://eslint.org/docs/rules/operator-linebreak.html).
~~~
// bad
const foo =
superLongLongLongLongLongLongLongLongFunctionName();
// bad
const foo
= 'superLongLongLongLongLongLongLongLongString';
// good
const foo = (
superLongLongLongLongLongLongLongLongFunctionName()
);
// good
const foo = 'superLongLongLongLongLongLongLongLongString';
復制代碼
~~~
* 13.8 不允許有未使用的變量。 eslint: [`no-unused-vars`](https://eslint.org/docs/rules/no-unused-vars)
~~~
// bad
var some_unused_var = 42;
// 定義了沒有使用
var y = 10;
y = 5;
// 不會將用于修改自身的讀取視為已使用
var z = 0;
z = z + 1;
// 參數定義了但未使用
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' 即使沒有使用也可以被忽略， 因為這個有一個 rest 取值的屬性。
// 這是從對象中抽取一個忽略特殊字段的對象的一種形式
var { type, ...coords } = data;
// 'coords' 現在就是一個沒有 'type' 屬性的 'data' 對象
復制代碼
~~~
## 提升
* 14.1 var 聲明被提升。const 和 let 聲明被賦予一個所謂的新概念[Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let)。 重要的是要知道為什么 [typeof不再安全](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15).
~~~
function example() {
console.log(notDefined); // => throws a ReferenceError
}
// 在變量聲明之前使用會正常輸出，是因為變量聲明提升，值沒有。
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 匿名函數表達式和 `var` 情況相同
~~~
function example() {
console.log(anonymous); // => undefined
anonymous(); // => TypeError anonymous is not a function
var anonymous = function () {
console.log('anonymous function expression');
};
}
復制代碼
~~~
* 14.3 已命名的函數表達式提升他的變量名，而不是函數名或函數體
~~~
function example() {
console.log(named); // => undefined
named(); // => TypeError named is not a function
superPower(); // => ReferenceError superPower is not defined
var named = function superPower() {
console.log('Flying');
};
}
// 函數名和變量名相同也是一樣
function example() {
console.log(named); // => undefined
named(); // => TypeError named is not a function
var named = function named() {
console.log('named');
};
}
復制代碼
~~~
* 14.4 函數聲明則提升了函數名和函數體
~~~
function example() {
superPower(); // => Flying
function superPower() {
console.log('Flying');
}
}
復制代碼
~~~
* 更多信息前往[JavaScript Scoping & Hoisting](http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting/) by [Ben Cherry](http://www.adequatelygood.com/).
## 比較和相等
* 15.1 使用 `===` 和 `!==` 而不是 `==` 和 `!=`. eslint: [`eqeqeq`](http://eslint.org/docs/rules/eqeqeq.html)
* 15.2 `if` 等條件語句使用強制 `ToBoolean` 抽象方法來評估它們的表達式，并且始終遵循以下簡單規則：
* **Objects** => **true**
* **Undefined** => **false**
* **Null** => **false**
* **Booleans** => **the value of the boolean**
* **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 !== '') {
// ...
}
// bad
if (collection.length) {
// ...
}
// good
if (collection.length > 0) {
// ...
}
復制代碼
~~~
* 15.4 `switch case` 中，在 `case` 和 `default` 分句里用大括號創建一個塊(如：`let`, `const`, `function`, and `class`). eslint rules: [`no-case-declarations`](http://eslint.org/docs/rules/no-case-declarations.html).
> 詞匯聲明在整個 switch 塊中都是可見的，但只有在分配時才會被初始化，這只有在 case 達到時才會發生。當多個 case 子句嘗試定義相同的事物時，會出現問題。
~~~
// 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.5 三元表達式不應該嵌套，通常是單行表達式。
eslint rules: [`no-nested-ternary`](http://eslint.org/docs/rules/no-nested-ternary.html).
~~~
// 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`](http://eslint.org/docs/rules/no-unneeded-ternary.html).
~~~
// 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`](https://eslint.org/docs/rules/no-mixed-operators.html)
~~~
// bad
const foo = a && b < 0 || c > 0 || d + 1 === 0;
// bad
const bar = a ** b - 5 % d;
// bad
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`](https://eslint.org/docs/rules/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 `else` 和 `if` 的大括號保持在一行。 eslint: [`brace-style`](http://eslint.org/docs/rules/brace-style.html)
~~~
// bad
if (test) {
thing1();
thing2();
}
else {
thing3();
}
// good
if (test) {
thing1();
thing2();
} else {
thing3();
}
復制代碼
~~~
* 16.3 如果 `if` 語句都要用 `return` 返回， 那后面的 `else` 就不用寫了。 如果 `if` 塊中包含 `return`， 它后面的 `else if` 塊中也包含了 `return`， 這個時候就可以把 `else if` 拆開。 eslint: [`no-else-return`](https://eslint.org/docs/rules/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) {
// ...
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`](http://eslint.org/docs/rules/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` 前綴， 這有助于其他開發人員快速理解你指出的問題， 或者您建議的問題的解決方案。
~~~
class Calculator extends Abacus {
constructor() {
super();
// FIXME: shouldn't use a global here
total = 0;
}
}
復制代碼
~~~
~~~
class Calculator extends Abacus {
constructor() {
super();
// TODO: total should be configurable by an options param
this.total = 0;
}
}
復制代碼
~~~
## 空格
* 19.1 Tab 使用兩個空格（或者 4 個，你開心就好，但是團隊統一是必須的）。 eslint: [`indent`](http://eslint.org/docs/rules/indent.html)
~~~
// bad
function foo() {
????const name;
}
// bad
function bar() {
?const name;
}
// good
function baz() {
??const name;
}
復制代碼
~~~
* 19.2 在大括號 `{}` 前空一格。 eslint: [`space-before-blocks`](http://eslint.org/docs/rules/space-before-blocks.html)
~~~
// 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`](http://eslint.org/docs/rules/keyword-spacing.html)
~~~
// 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`](http://eslint.org/docs/rules/space-infix-ops.html)
~~~
// bad
const x=y+5;
// good
const x = y + 5;
復制代碼
~~~
* 19.5 文件結尾空一行. eslint: [`eol-last`](https://github.com/eslint/eslint/blob/master/docs/rules/eol-last.md)
~~~
// 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`](http://eslint.org/docs/rules/newline-per-chained-call) [`no-whitespace-before-property`](http://eslint.org/docs/rules/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`](http://eslint.org/docs/rules/padded-blocks.html)
~~~
// 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`](http://eslint.org/docs/rules/space-in-parens.html)
~~~
// 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`](http://eslint.org/docs/rules/array-bracket-spacing.html)
~~~
// 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`](http://eslint.org/docs/rules/object-curly-spacing.html)
~~~
// bad
const foo = {clark: 'kent'};
// good
const foo = { clark: 'kent' };
// bad
function foo() {return true;}
if (foo) { bar = 0;}
// good
function foo() { return true; }
if (foo) { bar = 0; }
復制代碼
~~~
* 19.12 避免一行代碼超過 100 個字符（包含空格、純字符串就不要換行了）。
~~~
// 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: [`comma-spacing`](https://eslint.org/docs/rules/comma-spacing)
~~~
// bad
var foo = 1,bar = 2;
var arr = [1 , 2];
// good
var foo = 1, bar = 2;
var arr = [1, 2];
復制代碼
~~~
* 19.14 在對象的屬性中， 鍵值之間要有空格。 eslint: [`key-spacing`](https://eslint.org/docs/rules/key-spacing)
~~~
// bad
var obj = { "foo" : 42 };
var obj2 = { "foo":42 };
// good
var obj = { "foo": 42 };
復制代碼
~~~
* 19.15 行末不要空格。 eslint: [`no-trailing-spaces`](https://eslint.org/docs/rules/no-trailing-spaces)
* 19.16 避免出現多個空行。 在文件末尾只允許空一行。 eslint: [`no-multiple-empty-lines`](https://eslint.org/docs/rules/no-multiple-empty-lines)
~~~
// bad
var x = 1;
var y = 2;
// good
var x = 1;
var y = 2;
復制代碼
~~~
## 逗號
* 20.1 不要前置逗號。 eslint: [`comma-style`](http://eslint.org/docs/rules/comma-style.html)
~~~
// 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`](http://eslint.org/docs/rules/comma-dangle.html)
~~~
// bad - 沒有結尾逗號的 git diff
const hero = {
firstName: 'Florence',
- lastName: 'Nightingale'
+ lastName: 'Nightingale',
+ inventorOf: ['coxcomb chart', 'modern nursing']
};
// good - 有結尾逗號的 git diff
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)
createHero(
firstName,
lastName,
inventorOf,
...heroArgs
)
復制代碼
~~~
## 分號
* 21.1 當 JavaScript 遇到沒有分號的換行符時，它會使用[`Automatic Semicolon Insertion`](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion)這一規則來決定行末是否加分號。但是，ASI 包含一些古怪的行為，如果 JavaScript 弄錯了你的換行符，你的代碼就會破壞。所以明確地使用分號，會減少這種不確定性。
~~~
// bad
(function () {
const name = 'Skywalker'
return name
})()
// good
(function () {
const name = 'Skywalker';
return name;
}());
// good
;(() => {
const name = 'Skywalker';
return name;
}());
復制代碼
~~~
[更多](https://stackoverflow.com/questions/7365172/semicolon-before-self-invoking-function/7365214%237365214).
## 類型
* 22.1 在聲明開頭執行強制類型轉換。
* 22.2 String eslint: [`no-new-wrappers`](https://eslint.org/docs/rules/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(); // 不保證返回string
// good
const totalScore = String(this.reviewScore);
復制代碼
~~~
* 22.3 Number eslint: [`radix`](http://eslint.org/docs/rules/radix)
~~~
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` 是你的性能瓶頸導致你一定要用移位運算。 請說明這個是因為[性能原因](https://jsperf.com/coercion-vs-casting/3),
~~~
// good
/**
* parseInt 導致代碼運行慢
* Bitshifting the String 將其強制轉換為數字使其快得多。
*/
const val = inputValue >> 0;
復制代碼
~~~
* 22.5 **注意:** 使用 bitshift 操作時要小心。數字表示為 64 位值，但 bitshift 操作始終返回 32 位整數。對于大于32位的整數值，Bitshift可能會導致意外行為。
~~~
2147483647 >> 0 //=> 2147483647
2147483648 >> 0 //=> -2147483648
2147483649 >> 0 //=> -2147483647
復制代碼
~~~
* 22.6 Booleans
~~~
const age = 0;
// bad
const hasAge = new Boolean(age);
// good
const hasAge = Boolean(age);
// best
const hasAge = !!age;
復制代碼
~~~
## 命名約定
* 23.1 避免用一個字母命名，讓你的命名更加語義化。 eslint: [`id-length`](http://eslint.org/docs/rules/id-length)
~~~
// bad
function q() {
// ...
}
// good
function query() {
// ...
}
復制代碼
~~~
* 23.2 用 camelCase 命名你的對象、函數、實例。 eslint: [`camelcase`](http://eslint.org/docs/rules/camelcase.html)
~~~
// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}
// good
const thisIsMyObject = {};
function thisIsMyFunction() {}
復制代碼
~~~
* 23.3 用 PascalCase 命名類。 eslint: [`new-cap`](http://eslint.org/docs/rules/new-cap.html)
~~~
// 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`](http://eslint.org/docs/rules/no-underscore-dangle.html)
> JavaScript 沒有私有屬性或方法的概念。盡管前置下劃線通常的概念上意味著 “private”，但其實，這些屬性是完全公開的，因此這部分也是你的 API 的內容。這一概念可能會導致開發者誤以為更改這個不會導致崩潰或者不需要測試。
~~~
// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';
// good
this.firstName = 'Panda';
復制代碼
~~~
* 23.5 不要保存 `this` 的引用，使用箭頭函數或硬綁定。
~~~
// 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 default`）的名稱完全匹配
~~~
// 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 默認導出（`export default`）一個函數時，函數名、文件名統一。
~~~
function makeStyleGuide() {
// ...
}
export default makeStyleGuide;
復制代碼
~~~
* 23.8 當你 export 一個構造函數/類/單例/函數庫對象時用 PascalCase。
~~~
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 全大寫字母定義用來導出的常量
~~~
// 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() 去構建。
~~~
// 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];
}
}
復制代碼
~~~
## Events
* 25.1 給事件或其他傳遞數據時，不直接使用原始值，而是通過對象包裝。這樣在未來需要增加或減少參數，不必找到每個使用中的處理器。
~~~
// bad
$(this).trigger('listingUpdated', listing.id);
...
$(this).on('listingUpdated', (e, listingId) => {
// do something with listingId
});
復制代碼
~~~
prefer:
~~~
// good
$(this).trigger('listingUpdated', { listingId: listing.id });
...
$(this).on('listingUpdated', (e, data) => {
// do something with data.listingId
});
復制代碼
~~~
## 小結
所謂規范，更多的還是為了代碼的可讀性，畢竟我們的代碼更重要的是給人看。同時，合理的規范，也會幫助我們規避很多不必要的 bug。
原文鏈接：https://juejin.im/post/5d5d5197518825237330552d
