Google JavaScript 程式碼風格指南
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`; 複製程式碼