JavaScript主流代碼規範大對比

時間 2019-11-17

原文原文鏈接

做爲一個程序員，確定但願能寫出一手好代碼，看起來賞心悅目，又易於理解。既方便往後本身回來翻閱一眼就能明白代碼在幹什麼，又能讓接手的人很快上手，看到精妙的地方，不禁自主地發出由衷的感嘆，悄無聲息地改變別人很差的習慣。javascript

什麼是編碼規範？🤓

編碼規範就是指導如何編寫和組織代碼的一系列標準。核心原則是：代碼應該簡潔易懂，邏輯清晰，優先保證程序的正確性。html

咱們爲何須要編碼規範？ 😎

一個主要的緣由是：每一個人寫代碼的方式都是不一樣的。我可能喜歡這麼寫，而你喜歡用另外一種方法寫。若是咱們只處理本身的代碼，這樣並無什麼問題。但若是有不少的程序員同時在一個代碼庫上面工做呢？若是沒有規範，事情很快會變得一團糟。代碼規範可讓新人迅速的熟悉相關的代碼，而且也能寫出讓其餘程序員簡單易懂的代碼。不一樣的公司有着不一樣的規範，但追求的目標是相同的，就是統一代碼編寫風格，提升工做效率。經過閱讀不一樣的編碼規範，你能夠知道在各個公司裏代碼是如何編寫的。java

1.Airbnb JavaScript Style Guide

號稱是「最合理的編寫 JavaScript 代碼的方式」。git

Airbnb 是一家位於美國舊金山的公司，本文是其內部的 JavaScript編碼規範，寫得比較全面程序員

在 Github 上有 88,897+ ⭐️，1,7152 + Fork，幾乎覆蓋了JavaScript的每一項特性。github

地址: https://github.com/airbnb/javascriptapi

中文版地址: https://github.com/lin-123/javascript數組

2.JavaScript Standard Style Guide

一個功能強大的 JavaScript 代碼規範，自帶 linter 和自動代碼糾正，無需配置，自動格式化代碼、提早發現風格及程序問題。瀏覽器

本規範特色之一是簡潔。誰也不想爲每一個項目維護一份有成百上千行語句的代碼風格配置文件。有此規範就夠了。app

不再用維護 .eslintrc, .jshintrc, or .jscsrc 。開箱即用。

這個代碼規範被不少知名公司所採用，好比 NPM、GitHub、mongoDB 等。

若是我不一樣意某條規則，能夠改嗎？不能夠，制定這套 standard 規範的目的就是讓你們都沒必要再花時間浪費在無謂的代碼風格之爭上面了。 github上有 22,392+ ⭐️，1,702+ Fork

地址：https://github.com/standard/standard（這個 Github 地址霸氣到不行。）

3.Google JavaScript Style Guide

只有遵照了這裏的規則，一個 JavaScript 源文件才能被稱爲「Google Style」。很霸氣，我行我素，同時也被很多公司沿用。

地址：https://google.github.io/styleguide/jsguide.html

這幾種主流的JavaScript規範到底有什麼區別呢？

關於縮進

Google: 2個空格

Airbnb: 2個空格

Standard: 2個空格

字符竄單雙引號

Airbnb：單引號定義字符竄使用模板字符串取代鏈接字符串

Standard: 單引號定義字符串使用模板字符串取代鏈接字符串

Google: 使用單引號使用模板字符串取代鏈接字符串

var let const

Google: 默認使用const let 。杜絕var。

Standard: 不容許存在冗餘變量,每一個 var 關鍵字單獨聲明一個變量。

Airbnb: 使用let const.

Object && Array

Airbnb:

// bad
const item = new Object();
// bad
const items = new Array();

// good
const item = {};
// good
const items = [];
複製代碼

Standard:

var nums = new Array(1, 2, 3)   // ✗ avoid
var nums = [1, 2, 3]            // ✓ ok
複製代碼

行末逗號

Airbnb:

// good
const hero = {
  firstName: 'Ada',
  lastName: 'Lovelace',
  birthYear: 1815,
  superPower: 'computers',
};
複製代碼

Standard: 始終將逗號置於行末 && 不容許有多餘的行末逗號,

// ✓ ok
var list = [1, 2, 3, 4]

var obj = {
  message: 'hello',   // ✗ avoid
}
複製代碼

Google：請在末尾加上逗號。

關於分號（最有爭議的）

Airbnb：加分號 Why? 當 JavaScript 遇到沒有分號結尾的一行，它會執行自動插入分號 Automatic Semicolon Insertion這一規則來決定行末是否加分號。若是JavaScript在你的斷行裏錯誤的插入了分號，就會出現一些古怪的行爲。當新的功能加到JavaScript裏後，這些規則會變得更復雜難懂。顯示的結束語句，並經過配置代碼檢查去捕獲沒有帶分號的地方能夠幫助你防止這種錯誤。

standard: 無分號--這沒有什麼很差不騙你！可是，不要使用 (, [, or 等做爲一行的開始。在沒有分號的狀況下代碼壓縮後會致使報錯，而堅持這一規範則可避免出錯。當前主流的代碼壓縮方案都是基於詞法（AST-based）進行的，因此在處理無分號的代碼時徹底沒有壓力（況且 JavaScript 中分號原本就不是強制的）。

Google：每一個語句必須以分號結尾。禁止依靠自動分號插入。

關於各類空格

Airbnb:

function test() {
  console.log('test');
} 

// good
if (isJedi) {
  fight();
}

// good
const x = y + 5;

// good
function bar(foo) {
  return foo;
}

// good
var obj = { "foo": 42 };

//在行的末尾避免使用空格
//避免使用多個空行
複製代碼

standard:

if (condition) { ... }
funtion name (arg) { ... }
var list = [1, 2, 3, 4]
function greet (name, options) { ... }
//單行代碼塊兩邊加空格
function foo () { return true }  // ✓ ok
//comment // ✗ avoid
// comment // ✓ ok
單行代碼塊兩邊加空格
function foo () {return true}    // ✗ avoid
function foo () { return true }  // ✓ ok
/*comment*/         // ✗ avoid
/* comment */       // ✓ ok
複製代碼

比較運算符和等號

使用 ==== 和 !== 而不是 == !=
airbnb: yes
standard: yes,但在須要檢查 null || undefined 時可使用 obj == null。

三目表達式

Airbnb: const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
standard: ? 和 : 與他們所負責的代碼處於同一行

// ✓ ok
var location = env.development ? 'localhost' : 'www.api.com'

// ✓ ok
var location = env.development
  ? 'localhost'
  : 'www.api.com'
複製代碼

文件結尾

Airbnb: 文件結尾空一行
google: 文件以空行結尾
standard:文件末尾留一空行。

冗餘變量

Airbnb: 不容許
google: 不容許
standard:不容許

關於函數和變量命名

Airbnb: 變量和函數名統一使用駝峯命名法
Google: 每次只聲明一個變量，常量命名應該使用全大寫格式，並用下劃線分割。若是這個常量是一個函數，那麼應該使用駝峯式命名法
standard: 對於變量和函數名統一使用駝峯命名法。不能包含下劃線。

不要使用eval語句

Airbnb: ✔️
Google: ✔️
standard: ✔️

各自奇特的地方：

Google規範：

禁止使用ES6模塊（不得出現export和import命令）這意味着，谷歌不使用 React，由於沒了ES6模塊，React無法寫。我好奇查了一下，Angular果真不使用ES6模塊。
優先使用for...of。
不推薦代碼水平對齊。
...

Standard規範

不要對變量使用 delete 操做
避免使用常量做爲條件表達式的條件
不要擴展原生對象。
不要省去小數點前面的0。
new 建立對象實例後須要賦值給變量。
禁止使用 Symbol 構造器。
使用 this 前請確保 super() 已調用。
檢查 NaN 的正確姿式是使用 isNaN()。
使用瀏覽器全局變量時必須加window前綴
對象字面量中不要定義重複的屬性。
switch 語句中不要定義重複的 case 分支。
同一模塊有多個導入時一次性寫完。
正則中不要使用空字符。
不要解構空值。
避免沒必要要的布爾轉換。
不要使用多餘的括號包裹函數。
switch 必定要使用 break 來將條件分支正常中斷。
避免使用 arguments.callee 和 arguments.caller。
避免對聲明過的函數從新賦值。
不要對全局只讀對象從新賦值。
嵌套的代碼塊中禁止再定義函數。
禁止使用 Function 構造器。
return 語句中的賦值必需有括號包裹。
避免將變量賦值給本身。
禁止使用稀疏數組（Sparse arrays）。
若是有更好的實現，儘可能不要使用三元表達式。
return，throw，continue 和 break 後不要再跟代碼。
避免沒必要要的 .call() 和 .apply()。
一元運算符後面跟一個空格。typeof !admin
...

Airbnb

不要對參數從新賦值
不要直接調用Object.prototype上的方法，如
hasOwnProperty, propertyIsEnumerable, isPrototypeOf。
對象淺拷貝時，更推薦使用擴展運算符[就是...運算符]，而不是Object.assign。
不要用函數構造器建立函數
不要改參數
不要對參數從新賦值。
不要使用一元自增自減運算符（++， --）而是 num += 1;
不要用前置或後置下劃線。Why? JavaScript 沒有私有屬性或私有方法的概念。儘管前置下劃線一般的概念上意味着「private」，事實上，這些屬性是徹底公有的，所以這部分也是你的API的內容。這一律念可能會致使開發者誤覺得更改這個不會致使崩潰或者不須要測試。若是你想要什麼東西變成「private」，那就不要讓它在這裏出現。
當你必定要用函數表達式（在回調函數裏）的時候就用箭頭表達式吧
經常使用class，避免直接操做prototype
不要用import通配符，就是 * 這種方式
不要用遍歷器。用JavaScript高級函數代替for-in、 for-of。
訪問屬性時使用點符號. ，當獲取的屬性是變量時用方括號[]取
作冪運算時用冪操做符 ** 。
if表達式的else和if的關閉大括號在一行
全部註釋開頭空一個，方便閱讀。
在一個代碼塊後下一條語句前空一行。
不要在代碼之間使用多個空白行填充。
jQuery對象用$變量表示。
不要保存引用this，用箭頭函數或函數綁定——Function#bind.
簡稱和縮寫應該所有大寫或所有小寫。 HTTPRequests
...