編碼規(guī)范

統(tǒng)一團隊的編碼規(guī)范，有助于代碼的維護。本章是傳統(tǒng)意義上的 Style Guideline，目的是統(tǒng)一一些相對主觀化的代碼風格。

單行代碼塊

在單行代碼塊中使用空格

不推薦

function foo () {return true}
if (foo) {bar = 0}

推薦

function foo () { return true }
if (foo) { bar = 0 }

大括號風格

在編程過程中，大括號風格與縮進風格緊密聯系，用來描述大括號相對代碼塊位置的方法有很多。在 JavaScript 中，主要有三種風格，如下：

• One True Brace Style

  if (foo) {
    bar()
  } else {
    baz()
  }
  

• Stroustrup

  if (foo) {
    bar()
  }
  else {
    baz()
  }
  

• Allman

  if (foo)
  {
    bar()
  }
  else
  {
    baz()
  }
  

我們團隊約定使用 One True Brace Style 風格

變量命名

當命名變量時，主流分為駝峰式命名（variableName）和下劃線命名（variable_name）兩大陣營。

團隊約定使用駝峰式命名

拖尾逗號

在 ECMAScript5 里面，對象字面量中的拖尾逗號是合法的，但在 IE8（非 IE8 文檔模式）下，當出現拖尾逗號，則會拋出錯誤。

拖尾逗號的例子：

var foo = {
  name: 'foo',
  age: '22',
}

拖尾逗號的好處是，簡化了對象和數組添加或刪除元素，我們只需要修改新增的行即可，并不會增加差異化的代碼行數。

因為拖尾逗號有好也有不好，所以團隊約定允許在最后一個元素或屬性與閉括號 ] 或 } 在不同行時，可以（但不要求）使用拖尾逗號。當在同一行時，禁止使用拖尾逗號。

逗號空格

逗號前后的空格可以提高代碼的可讀性，團隊約定在逗號后面使用空格，逗號前面不加空格。

不推薦

var foo = 1,bar = 2
var foo = 1 , bar = 2
var foo = 1 ,bar = 2

推薦

var foo = 1, bar = 2

逗號風格

逗號分隔列表時，在 JavaScript 中主要有兩種逗號風格：

• 標準風格，逗號放置在當前行的末尾
• 逗號前置風格，逗號放置在下一行的開始位置

團隊約定使用標準風格

不推薦

var foo = 1
,
bar = 2

var foo = 1
, bar = 2

var foo = ['name'
          , 'age']

推薦

var foo = 1,
    bar = 2

var foo = ['name',
            'age']

計算屬性的空格

團隊約定在對象的計算屬性內，禁止使用空格

不推薦

obj['foo' ]
obj[ 'foo']
obj[ 'foo' ]

推薦

obj['foo']

拖尾換行

在非空文件中，存在拖尾換行是一個常見的 UNIX 風格，它的好處是可以方便在串聯和追加文件時不會打斷 Shell 的提示。在日常的項目中，保留拖尾換行的好處是，可以減少版本控制時的代碼沖突。

不推薦

function func () {
  // do something
}

推薦

function func () {
  // do something
}
  // 此處是新的一行

可以通過 .editorconfig 添加 EOL

函數調用

為了避免語法錯誤，團隊約定在函數調用時，禁止使用空格

不推薦

fn ()
fn
()

推薦

fn()

縮進

代碼保持一致的縮進，是作為工程師的職業(yè)素養(yǎng)。但縮進用兩個空格，還是四個空格，是用 Tab 還是空格呢？這樣的爭論太多了，也得不出答案。本規(guī)范結合了市面上優(yōu)秀的開源項目，姑且約定使用 空格 來縮進，而且縮進使用兩個空格。

那是不是不能使用 Tab 進行縮進了？我們可以通過配置 .editorconfig ，將 Tab 自動轉換為空格。

對象字面量的鍵值縮進

團隊約定對象字面量的鍵和值之間不能存在空格，且要求對象字面量的冒號和值之間存在一個空格

不推薦

var obj = { 'foo' : 'haha' }

推薦

var obj = { 'foo': 'haha' }

構造函數首字母大寫

在 JavaScript 中 new 操作符用來創(chuàng)建某個特定類型的對象的一個實例，該類型的對象是由一個構造函數表示的。由于構造函數只是常規(guī)函數，唯一區(qū)別是使用 new 來調用。所以我們團隊約定構造函數的首字母要大小，以此來區(qū)分構造函數和普通函數。

不推薦

var fooItem = new foo()

推薦

var fooItem = new Foo()

構造函數的參數

在 JavaScript 中，通過 new 調用構造函數時，如果不帶參數，可以省略后面的圓括號。但這樣會造成與整體的代碼風格不一致，所以團隊約定使用圓括號

不推薦

var person = new Person

推薦

var person = new Person()

鏈式調用

鏈式調用如果放在同一行，往往會造成代碼的可讀性差，但有些時候，短的鏈式調用并不會影響美觀。所以本規(guī)范約定一行最多只能有四個鏈式調用，超過就要求換行。

空行

空白行對于分離代碼邏輯有幫助，但過多的空行會占據屏幕的空間，影響可讀性。團隊約定最大連續(xù)空行數為 2

不推薦

var a = 1



var b = 2

推薦

var a = 1


var b = 2

鏈式賦值

鏈式賦值容易造成代碼的可讀性差，所以團隊約定禁止使用鏈式賦值

不推薦

var a = b = c = 1

推薦

var a = 1
var b = 1
var c = 1

變量聲明

JavaScript 允許在一個聲明中，聲明多個變量。團隊約定在聲明變量時，一個聲明只能有一個變量

不推薦

var a, b, c

推薦

var a
var b
var c

分號

JavaScript 在所有類 C 語言中是比較獨特的，它不需要在每個語句的末尾有分號。在很多情況下，JavaScript 引擎可以確定一個分號應該在什么位置然后自動添加它。此特征被稱為 自動分號插入 (ASI)，被認為是 JavaScript 中較為有爭議的特征。

團隊中對于是否應該使用分號，也有許多爭論，本規(guī)范推薦不使用分號，因為我們認為好的工程師應該知道什么時候該加，什么時候不該加。

相關參考 ：semi

代碼塊空格

一致性是任何風格指南的重要組成部分。雖然在哪里放置塊的開括號純屬個人偏好，但在整個項目中應該保持一致。不一致的風格將會分散讀者閱讀代碼的注意力。

團隊約定代碼塊前要添加空格

不推薦

if (a){
  b()
}

function a (){}

推薦

if (a) {
  b()
}

function a () {}

函數聲明的空格

當格式化一個函數，函數名或 function 關鍵字與左括號之間允許有空白。命名函數要求函數名和 function 關鍵字之間有空格，但是匿名函數要求不加空格。

團隊約定函數括號前要加空格

不推薦

function func(x) {
  // ...
}

推薦

function func (x) {
  // ...
}

操作符的空格

團隊約定操作符前后都需要添加空格

不推薦

var sum = 1+2

推薦

var sum = 1 + 2

BOM

Unicode 字節(jié)順序標記 (BOM) 用來指定代碼單元是高字節(jié)序還是低字節(jié)序。也就是說，是高位在前還是低位在前。UTF-8 不需要 BOM 來表明字節(jié)順序，因為單個字節(jié)并不影響字節(jié)順序。

相信不少同學遇到過 BOM 的坑，這里不多說了，切記不要使用 windows 的記事本改代碼！