JS 代碼規(guī)范

編碼規(guī)范

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

單行代碼塊

在單行代碼塊中使用空格

不推薦

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

推薦

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

大括號(hào)風(fēng)格

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

• One True Brace Style

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

• Stroustrup

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

• Allman

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

我們團(tuán)隊(duì)約定使用 One True Brace Style 風(fēng)格

變量命名

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

團(tuán)隊(duì)約定使用駝峰式命名

拖尾逗號(hào)

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

拖尾逗號(hào)的例子：

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

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

因?yàn)橥衔捕禾?hào)有好也有不好，所以團(tuán)隊(duì)約定允許在最后一個(gè)元素或?qū)傩耘c閉括號(hào) ] 或 } 在不同行時(shí)，可以（但不要求）使用拖尾逗號(hào)。當(dāng)在同一行時(shí)，禁止使用拖尾逗號(hào)。

逗號(hào)空格

逗號(hào)前后的空格可以提高代碼的可讀性，團(tuán)隊(duì)約定在逗號(hào)后面使用空格，逗號(hào)前面不加空格。

不推薦

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

推薦

var foo = 1, bar = 2

逗號(hào)風(fēng)格

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

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

團(tuán)隊(duì)約定使用標(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']

計(jì)算屬性的空格

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

不推薦

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

推薦

obj['foo']

拖尾換行

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

不推薦

function func () {
  // do something
}

推薦

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

可以通過(guò) .editorconfig 添加 EOL

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

為了避免語(yǔ)法錯(cuò)誤，團(tuán)隊(duì)約定在函數(shù)調(diào)用時(shí)，禁止使用空格

不推薦

fn ()
fn
()

推薦

fn()

縮進(jìn)

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

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

對(duì)象字面量的鍵值縮進(jìn)

團(tuán)隊(duì)約定對(duì)象字面量的鍵和值之間不能存在空格，且要求對(duì)象字面量的冒號(hào)和值之間存在一個(gè)空格

不推薦

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

推薦

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

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

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

不推薦

var fooItem = new foo()

推薦

var fooItem = new Foo()

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

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

不推薦

var person = new Person

推薦

var person = new Person()

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

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

空行

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

不推薦

var a = 1



var b = 2

推薦

var a = 1


var b = 2

鏈?zhǔn)劫x值

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

不推薦

var a = b = c = 1

推薦

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

變量聲明

JavaScript 允許在一個(gè)聲明中，聲明多個(gè)變量。團(tuán)隊(duì)約定在聲明變量時(shí)，一個(gè)聲明只能有一個(gè)變量

不推薦

var a, b, c

推薦

var a
var b
var c

分號(hào)

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

團(tuán)隊(duì)中對(duì)于是否應(yīng)該使用分號(hào)，也有許多爭(zhēng)論，本規(guī)范推薦不使用分號(hào)，因?yàn)槲覀冋J(rèn)為好的工程師應(yīng)該知道什么時(shí)候該加，什么時(shí)候不該加。

相關(guān)參考 ：semi

代碼塊空格

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

團(tuán)隊(duì)約定代碼塊前要添加空格

不推薦

if (a){
  b()
}

function a (){}

推薦

if (a) {
  b()
}

function a () {}

函數(shù)聲明的空格

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

團(tuán)隊(duì)約定函數(shù)括號(hào)前要加空格

不推薦

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

推薦

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

操作符的空格

團(tuán)隊(duì)約定操作符前后都需要添加空格

不推薦

var sum = 1+2

推薦

var sum = 1 + 2

BOM

Unicode 字節(jié)順序標(biāo)記 (BOM) 用來(lái)指定代碼單元是高字節(jié)序還是低字節(jié)序。也就是說(shuō)，是高位在前還是低位在前。UTF-8 不需要 BOM 來(lái)表明字節(jié)順序，因?yàn)閱蝹€(gè)字節(jié)并不影響字節(jié)順序。

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