編碼規(guī)范

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

單行代碼塊

在單行代碼塊中使用空格

不推薦

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

推薦

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

大括號風(fēng)格

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

• 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 風(fēng)格

變量命名

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

團隊約定使用駝峰式命名

拖尾逗號

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

拖尾逗號的例子：

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

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

因為拖尾逗號有好也有不好，所以團隊約定允許在最后一個元素或?qū)傩耘c閉括號 ] 或 } 在不同行時，可以（但不要求）使用拖尾逗號。當(dāng)在同一行時，禁止使用拖尾逗號。

逗號空格

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

不推薦

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

推薦

var foo = 1, bar = 2

逗號風(fēng)格

逗號分隔列表時，在 JavaScript 中主要有兩種逗號風(fēng)格：

• 標(biāo)準(zhǔn)風(fēng)格，逗號放置在當(dāng)前行的末尾
• 逗號前置風(fēng)格，逗號放置在下一行的開始位置

團隊約定使用標(biāo)準(zhǔn)風(fēng)格

不推薦

var foo = 1
,
bar = 2

var foo = 1
, bar = 2

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

推薦

var foo = 1,
    bar = 2

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

計算屬性的空格

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

不推薦

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

推薦

obj['foo']

拖尾換行

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

不推薦

function func () {
  // do something
}

推薦

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

可以通過 .editorconfig 添加 EOL

函數(shù)調(diào)用

為了避免語法錯誤，團隊約定在函數(shù)調(diào)用時，禁止使用空格

不推薦

fn ()
fn
()

推薦

fn()

縮進

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

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

對象字面量的鍵值縮進

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

不推薦

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

推薦

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

構(gòu)造函數(shù)首字母大寫

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

不推薦

var fooItem = new foo()

推薦

var fooItem = new Foo()

構(gòu)造函數(shù)的參數(shù)

在 JavaScript 中，通過 new 調(diào)用構(gòu)造函數(shù)時，如果不帶參數(shù)，可以省略后面的圓括號。但這樣會造成與整體的代碼風(fēng)格不一致，所以團隊約定使用圓括號

不推薦

var person = new Person

推薦

var person = new Person()

鏈?zhǔn)秸{(diào)用

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

空行

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

不推薦

var a = 1



var b = 2

推薦

var a = 1


var b = 2

鏈?zhǔn)劫x值

鏈?zhǔn)劫x值容易造成代碼的可讀性差，所以團隊約定禁止使用鏈?zhǔn)劫x值

不推薦

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 引擎可以確定一個分號應(yīng)該在什么位置然后自動添加它。此特征被稱為 自動分號插入 (ASI)，被認(rèn)為是 JavaScript 中較為有爭議的特征。

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

相關(guān)參考 ：semi

代碼塊空格

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

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

不推薦

if (a){
  b()
}

function a (){}

推薦

if (a) {
  b()
}

function a () {}

函數(shù)聲明的空格

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

團隊約定函數(shù)括號前要加空格

不推薦

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

推薦

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

操作符的空格

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

不推薦

var sum = 1+2

推薦

var sum = 1 + 2

BOM

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

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