Google JavaScript 程式碼風格指南

JavaScript · 發表 2018-10-24 16:07:53

摘要： Google 和Airbnb 是目前最流行的 JavaScript 程式碼風格，如果你長期使用 JavaScript 來寫程式碼的話，建議對比看看。以下是我認為在 Google 程式碼風格指南中最有意思的十三條規則，和大家分享一下：使用空格，而不是 tab 除了行...

Google 和ofollow,noindex">Airbnb 是目前最流行的 JavaScript 程式碼風格，如果你長期使用 JavaScript 來寫程式碼的話，建議對比看看。

以下是我認為在 Google 程式碼風格指南中最有意思的十三條規則，和大家分享一下：

使用空格，而不是 tab

除了行終止符外，在系統檔案中，空格是唯一表示空白的字元，這意味著 tab 不能作為縮排使用。

這份指南規定用2個空格（而不是4個）來表示縮排。

// bad
function foo() {
∙∙∙∙let name;
}

// bad
function bar() {
∙let name;
}

// good
function baz() {
∙∙let name;
}
複製程式碼

必不可少的分號

每個語句都必須以分號結尾，不要依賴編譯器自動插入分號。

儘管我無法理解為什麼有人會反對加分號，就像“tab 和空格”爭論一樣。無論怎麼樣 Google 是站在加分號這邊的。

// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')

// good
let luke = {};
let leia = {};
[luke, leia].forEach((jedi) => {
jedi.father = 'vader';
});
複製程式碼

暫時不要用 ES6 模組化

暫時不要用 ES6 模組化（比如 import 和 export 關鍵字），因為 ES6 模組化的語法還沒最終確定。

// Don't do this kind of thing yet:

//------ lib.js ------
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
複製程式碼

不鼓勵上下對齊程式碼

儘量不要上下對齊程式碼，維護成本太高。

// bad
{
tiny:42,
longer: 435, 
};

// good
{
tiny: 42, 
longer: 435,
};
複製程式碼

不使用 var

宣告區域性變數用 const 或者 let，預設使用 const，除非變數需要重新賦值。

// bad
var example = 42;

// good
let example = 42;
複製程式碼

箭頭函式完美替代 function

箭頭函式不僅語法簡潔易讀，而且修復了 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;
});
複製程式碼

用模板字串替代字串拼接

用模板字串（用 ` 分割）處理複雜的字串，特別是處理多行的字串。

// 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}?`;
}
複製程式碼

不要用反斜槓對長字串換行

雖然 ES5 是允許這樣做的，但是會帶來詭異的錯誤，而且會對閱讀程式碼的人帶來誤導

很有意思的是，Google 和 Airbnb 的規則大相徑庭（這裡是 Airbnb 的規則）

// bad (在移動端會出問題)
const longString = 'This is a very long string that \
far exceeds the 80 column limit. It unfortunately \
contains long stretches of spaces due to how the \
continued lines are indented.';

// bad (Airbnb 推薦這種寫法，不對長字串做任何處理。)
const longString = 'This is a very long string that far exceeds the 80 column limit. It does not contain long stretches of spaces since the concatenated strings are cleaner.';

// good
const longString = 'This is a very long string that ' + 
'far exceeds the 80 column limit. It does not contain ' + 
'long stretches of spaces since the concatenated ' +
'strings are cleaner.';
複製程式碼

for 迴圈首選 “for… of”

在 ES6 中，支援多種 for 迴圈寫法，可能你都用過，但儘可能選用 for… of 吧。

不要使用 eval()

不要使用 eval() （程式碼載入器除外），會帶來潛在的不確定性，因為在 CSP 環境中無法工作。

在MDN中也明確提到了，不用使用 eval()。

// bad
let obj = { a: 20, b: 30 };
let propName = getPropName();// returns "a" or "b"
eval( 'var result = obj.' + propName );

// good
let obj = { a: 20, b: 30 };
let propName = getPropName();// returns "a" or "b"
let result = obj[ propName ];//obj[ "a" ] is the same as obj.a
複製程式碼

常量用大寫字母加下劃線

常量用大寫字母加下劃線表示，所有單詞大寫，下劃線分割。

如果你的程式碼遵守此規則，可大大增加程式碼的可閱讀性，但需要注意的是，如果常量是函式，需要寫成駝峰。

// bad
const number = 5;

// good
const NUMBER = 5;
複製程式碼

每次申明一個變數

每次申明一個變數，不要寫成 let a = 1, b = 2；

// bad
let a = 1, b = 2, c = 3;

// good
let a = 1;
let b = 2;
let c = 3;
複製程式碼

用單引號，不要用雙引號

普通的字串用單引號分割（’），如果字串中包含單引號，那麼考慮用模板字串。

// bad
let directive = "No identification of self or mission."

// bad
let saying = 'Say it ain\u0027t so.';

// good
let directive = 'No identification of self or mission.';

// good
let saying = `Say it ain't so`;
複製程式碼