前言：

程序語(yǔ)言的編碼風(fēng)格對(duì)于一個(gè)長(zhǎng)期維護(hù)的軟件非常重要，特別是在團(tuán)隊(duì)協(xié)作中。如果一個(gè)團(tuán)隊(duì)使用統(tǒng)一規(guī)范的編碼分風(fēng)格，可以提高團(tuán)隊(duì)的協(xié)作水平和工作效率。編程風(fēng)格指南的核心是基本的格式化規(guī)則，這些規(guī)則決定了如何編寫高水準(zhǔn)的代碼。本指南來(lái)自于《編寫可維護(hù)的JavaScript》這本書，基于"Java語(yǔ)言編碼規(guī)范"和Crockford的JavaScript編程規(guī)范，還有Nicbolas的一些個(gè)人經(jīng)驗(yàn)和喜好。寫作本文旨在加深自己印象，也為了更多人的了解到JS編碼風(fēng)格，提高自己的編碼質(zhì)量。想了解更多的內(nèi)容請(qǐng)閱讀《編寫可維護(hù)的JavaScript》。

1.縮進(jìn)

每一行的層級(jí)由4個(gè)空格組成，避免使用Tab進(jìn)行縮進(jìn)。

// 好的寫法
if (true) {
  doSomeThing();
}

2.行的長(zhǎng)度

每行長(zhǎng)度不應(yīng)超過80個(gè)字符。如果一行超過80個(gè)字符，應(yīng)當(dāng)在一個(gè)運(yùn)算符后換行。下一行應(yīng)當(dāng)增加兩級(jí)縮進(jìn)（8個(gè)字符）。

// 好的寫法
doSomeThing(argument1, argument2, aegument3, argument4,
    argument5);

// 不好的寫法：第二行只有4個(gè)空格的縮進(jìn)
doSomeThing(argument1, argument2, aegument3, argument4,
  argument5);

3.原始值

字符串應(yīng)當(dāng)始終使用雙引號(hào)且保持一行，避免在字符串中使用斜線另起一行。

數(shù)字應(yīng)當(dāng)使用十進(jìn)制整數(shù)，科學(xué)計(jì)算法表示整數(shù)，十六進(jìn)制整數(shù)，或者十進(jìn)制浮點(diǎn)小數(shù)，小數(shù)前后應(yīng)當(dāng)至少保留一位數(shù)字。避免使用八進(jìn)制直接量。

特殊值null除了下述情況下應(yīng)當(dāng)避免使用。
•用來(lái)初始化一個(gè)變量，這個(gè)變量可能被賦值為一個(gè)對(duì)象。
•用來(lái)和一個(gè)已經(jīng)初始化的變量比較，這個(gè)變量可以是也可以不是一個(gè)對(duì)象。
•當(dāng)函數(shù)的參數(shù)期望是對(duì)象時(shí)，被用作參數(shù)傳入。
•當(dāng)函數(shù)的返回值期望是對(duì)象時(shí)，被用作返回值傳出。

避免使用特殊值undefined。判斷一個(gè)變量是否定義應(yīng)當(dāng)使用typeof操作符。

4.運(yùn)算符間距

二元預(yù)算符前后必須使用一個(gè)空格來(lái)保持表達(dá)式的整潔。操作符包括賦值運(yùn)算符和邏輯運(yùn)算符。

// 好的寫法
for (var i = 0; i < count; i++) {
  process(i);
}

// 不好的寫法：丟失了空格
for (var i=0; i<count; i++) {
  process(i);
}

5.括號(hào)間距

當(dāng)使用括號(hào)時(shí)，緊接左括號(hào)之后和緊接右括號(hào)之前不應(yīng)該有空格。

// 好的寫法
for (var i = 0; i < count; i++) {
  process(i);
}
 
// 不好的寫法：參數(shù)兩邊有額外的空格
for (var i = 0; i < count; i++) {
  process( i );
}

6.對(duì)象直接量

對(duì)象直接量應(yīng)當(dāng)有如下格式。
•起始左花括號(hào)應(yīng)當(dāng)同表達(dá)式保持同一行。
•每個(gè)屬性的名值對(duì)應(yīng)當(dāng)保持一個(gè)縮進(jìn)，第一個(gè)屬性應(yīng)當(dāng)在左花括號(hào)后另起一行。
•每個(gè)屬性的名值對(duì)應(yīng)當(dāng)使用不含引號(hào)的屬性名，其后緊跟一個(gè)冒號(hào)（之前不舍空格），其后是值。
•倘若屬性值是函數(shù)類型，函數(shù)體應(yīng)當(dāng)在屬性名之下另起一行，而且其前后均應(yīng)保留一個(gè)空行。
•一組相關(guān)的屬性前后可以插入空行以提升代碼的可讀性。
•結(jié)束的右花括號(hào)應(yīng)當(dāng)獨(dú)占一行。

// 好的寫法
var object = {

  key1: value1,
  key2: value2,

  func: function() {
  // doSomeThing
  },

  key3: value3
};

// 不好的寫法：不恰當(dāng)?shù)目s進(jìn)
var object = {
    key1: value1,
    key2: value2
  };

// 不好的寫法：函數(shù)體周圍缺少空行
var object = {

  key1: value1,
  key2: value2,
  func: function() {
  // doSomeThing
  },
  key3: value3
};

當(dāng)對(duì)象字面量作為函數(shù)參數(shù)時(shí)，如果值是變量，起始花括號(hào)應(yīng)當(dāng)同函數(shù)名在同一行。所有其余先前列出的規(guī)則同樣適用。

// 好的寫法
doSomeThing({
  key1: value1,
  key2: value2
});
// 不好的寫法：所有代碼在一行上
doSomeThing({ key1: value1, key2: value2 });

7.注釋

使用簡(jiǎn)潔明了注釋有助于他人理解你的代碼。如下情況應(yīng)當(dāng)使用注釋。
•代碼晦澀難懂。
•可能被誤認(rèn)為錯(cuò)誤的代碼。
•必要但不明顯的針對(duì)特定瀏覽器的代碼。
•對(duì)于對(duì)象、方法或者屬性，生成文檔是有必要的（使用恰當(dāng)?shù)奈臋n注釋）。

單行注釋

單行注釋應(yīng)當(dāng)用來(lái)說明一行代碼或者一組相關(guān)的代碼。單行注釋可能有三種使用方式。
•獨(dú)占一行的注釋，用來(lái)解釋下一行代碼。
•在代碼行的尾部的注釋，用來(lái)解釋它之前的代碼。
•多行，用來(lái)注釋掉一個(gè)代碼塊。

// 好的寫法
if (condition) {

  // 如果代碼執(zhí)行到這里，則表明通過了所有安全檢查
  allowed();
}

// 不好的寫法：注釋之前沒有空行
if (condition) {
  // 如果代碼執(zhí)行到這里，則表明通過了所有安全檢查
  allowed();
}

// 不好的寫法：錯(cuò)誤的縮進(jìn)
if (condition) {

// 如果代碼執(zhí)行到這里，則表明通過了所有安全檢查
  allowed();
}

// 不好的寫法：應(yīng)當(dāng)使用多行注釋
// 這段代碼進(jìn)行**判斷
// 然后執(zhí)行
if (condition) {

  // 如果代碼執(zhí)行到這里，則表明通過了所有安全檢查
  allowed();
}

// 好的寫法：在行尾注釋時(shí)，代碼結(jié)尾和注釋間應(yīng)保留一個(gè)空格
if (condition) {

  // 如果代碼執(zhí)行到這里，則表明通過了所有安全檢查
  allowed(); // 執(zhí)行**函數(shù)
}

// 不好的寫法：代碼和注釋間沒有足夠的空格
if (condition) {

  // 如果代碼執(zhí)行到這里，則表明通過了所有安全檢查
  allowed();// 執(zhí)行**函數(shù)
}

// 好的寫法：在注釋掉一個(gè)代碼塊時(shí)，應(yīng)聯(lián)系使用單行注釋，多行注釋不應(yīng)當(dāng)使用在此種情況下。
// if (condition) {
//   allowed();//執(zhí)行**函數(shù)
// }

多行注釋

多行注釋應(yīng)當(dāng)在代碼需要更多文字去解釋的時(shí)候使用。每個(gè)多行注釋都至少有如下三行：
1.首行僅僅包括/*注釋開始。該行不應(yīng)當(dāng)有其他文字。
2.接下來(lái)的行以*開頭并保持左對(duì)齊。這些可以有文字描述。
3.最后一行以*/開頭并同先前行保持對(duì)齊。也不應(yīng)有其他文字。

多行注釋的首行應(yīng)當(dāng)保持同它描述代碼的相同層次的縮進(jìn)。后續(xù)的每行應(yīng)當(dāng)有同樣層次的縮進(jìn)并附加一個(gè)空格（為了適當(dāng)保持*字符的對(duì)齊）。每一個(gè)多行代碼之前應(yīng)當(dāng)預(yù)留一個(gè)空行。

// 好的寫法、
if (condition) {

  /*
  * 如果代碼執(zhí)行到這里
  * 說明通過了所有的安全檢測(cè)
  */
  allowed();
}

注釋聲明

注釋有時(shí)候也可以用來(lái)給一段代碼聲明額外的信息。這些聲明的格式以單個(gè)單詞打頭并緊跟一個(gè)冒號(hào)?？梢允褂玫穆暶魅缦?。

TODO：說明代碼還未完成。應(yīng)當(dāng)包含下一步要做的事情。

HACK：表明代碼實(shí)現(xiàn)走了一個(gè)捷徑。應(yīng)當(dāng)包含為何使用hack的原因。這也可能表明該問題可能會(huì)有更好的解決辦法。

XXX：說明代碼是有問題的并應(yīng)當(dāng)盡快修復(fù)。

FIXME：說明代碼是有問題的并應(yīng)盡快修復(fù)。重要性略次于XXX。

REVIEW：說明代碼在任何可能的改動(dòng)都需要評(píng)審。

這些聲明可能在一行或者多行注釋中使用，并且應(yīng)當(dāng)遵循同一般注釋類型相同的格式規(guī)則。

8.命名

變量和函數(shù)在命名時(shí)應(yīng)當(dāng)小心。命名應(yīng)緊限于數(shù)字字母字符，某些情況下可以使用下劃線(_)。最好不要在任何命名中使用美元符號(hào)($)或者反斜杠(\)。

變量命名應(yīng)當(dāng)采用駝峰命名格式，首字母小寫，每個(gè)單詞首字母大寫。變量名的第一個(gè)單詞應(yīng)當(dāng)是一個(gè)名詞(而非動(dòng)詞)以避免同函數(shù)混淆。不要在變量名中使用下劃線。

// 好的寫法
var accountNumber = "test001";
 
// 不好的寫法：大寫字母開頭
var AccountNumber = "test001";

// 不好的寫法：動(dòng)詞開頭
var getAccountNumber = "test001";

// 不好的寫法：使用下劃線
var account_number = "test001";

函數(shù)名也應(yīng)當(dāng)采用駝峰命名格式。函數(shù)名的第一個(gè)單詞應(yīng)當(dāng)是動(dòng)詞（而非名詞）來(lái)避免同變量混淆。函數(shù)名中最好不要使用下劃線。

// 好的寫法
function doSomething() {
  // code
}

// 不好的寫法：大寫字母開頭
function DoSomething() {
  // code
}

// 不好的寫法：名詞開頭
function something() {
  // code
}

// 不好的寫法：使用下劃線
function do_something() {
  // code
}

構(gòu)造函數(shù)--通過new運(yùn)算符創(chuàng)建新對(duì)象的函數(shù)--也應(yīng)當(dāng)以駝峰格式命名并且首字符大寫。構(gòu)造函數(shù)名稱應(yīng)當(dāng)以非動(dòng)詞開頭，因?yàn)閚ew代表著創(chuàng)建一個(gè)對(duì)象實(shí)例的操作。

// 好的寫法
function MyObject() {
  // code
}

// 不好的寫法：小寫字母開頭
function myObject() {
  // code
}

// 不好的寫法：使用下劃線
function my_object() {
  // code
}

// 不好的寫法：動(dòng)詞開頭
function getMyObject() {
  // code
}

常量（值不會(huì)被改變的變量）的命名應(yīng)當(dāng)是所有大寫字母，不同單詞之間單個(gè)下劃線隔開。

// 好的寫法
var TOTAL_COUNT = 10;

// 不好的寫法：駝峰形式
var totalCount = 10;

// 不好的寫法：混合形式
var total_COUNT = 10;

對(duì)象的屬性同變量的命名規(guī)則相同。對(duì)象的方法同函數(shù)的命名規(guī)則相同。如果屬性或者方法是私有的，應(yīng)當(dāng)在之前加上一個(gè)下劃線。

// 好的寫法
var object = {
  _count: 10,4 
  _getCount: function() {
    return this._count;
  }
}

9.變量與函數(shù)聲明

變量聲明

所有的變量在使用前都應(yīng)當(dāng)事先定義。變量定義應(yīng)當(dāng)放在函數(shù)開頭，使用一個(gè)var表達(dá)式每行一個(gè)變量。除了首行，所有行都應(yīng)當(dāng)多一層縮進(jìn)以使變量名能夠垂直方向?qū)R。變量定義時(shí)應(yīng)當(dāng)初始化，并且賦值操作符應(yīng)當(dāng)保持一致的縮進(jìn)。初始化的變量應(yīng)當(dāng)在未初始化變量之前。

 // 好的寫法
 var count = 10,
   name = "jeri",
   found = false,
   empty;

函數(shù)聲明

函數(shù)應(yīng)當(dāng)在使用前提前定義。一個(gè)不是作為方法的函數(shù)（也就是說沒有作為一個(gè)對(duì)象的屬性）應(yīng)當(dāng)使用函數(shù)定義的格式（不是函數(shù)表達(dá)式和Function構(gòu)造器格式）。函數(shù)名和開始圓括號(hào)之間不應(yīng)當(dāng)有空格。結(jié)束的圓括號(hào)和右邊的花括號(hào)之間應(yīng)當(dāng)留一個(gè)空格。右側(cè)的花括號(hào)應(yīng)當(dāng)同function關(guān)鍵字保持同一行。開始和結(jié)束括號(hào)之間不應(yīng)該有空格。參數(shù)名之間應(yīng)當(dāng)在逗號(hào)之后保留一個(gè)空格。函數(shù)體應(yīng)當(dāng)保持一級(jí)縮進(jìn)。

// 好的寫法
function outer() {
  var count = 10,
    name = "jeri",
    found = false,
    empty;
  function inner() {
    // code
  }
  // 調(diào)用inner()的代碼
}

匿名函數(shù)可能作為方法賦值給對(duì)象，或者作為其他函數(shù)的參數(shù)。function關(guān)鍵字同開始括號(hào)之間不應(yīng)有空格。

// 好的寫法
object.method = function() {
  // code
};

// 不好的寫法：不正確的空格
object.method = function () {
  // code
};

立即被調(diào)用的函數(shù)應(yīng)當(dāng)在函數(shù)調(diào)用的外層用園括號(hào)包裹。

// 好的方法
var value = (function() {

  // 函數(shù)體

  return {
    message:"hi"
  }
}());

嚴(yán)格模式

嚴(yán)格模式應(yīng)當(dāng)僅限在函數(shù)內(nèi)部使用，千萬(wàn)不要在全局使用。

// 不好的寫法：全局使用嚴(yán)格模式
"use strict";

function doSomething() {
  // code
}
 
// 好的寫法
function doSomething() {
  "use strict";
 
  // code
}

10.運(yùn)算符

賦值

給變量賦值時(shí)，如果右側(cè)是含有比較語(yǔ)句的表達(dá)式，需要用圓括號(hào)包裹。

// 好的寫法
var flag = (i < count);

// 不好的寫法：遺漏圓括號(hào)
var flag = i < count;

等號(hào)運(yùn)算符

使用===（嚴(yán)格相等）和!==（嚴(yán)格不相等）代替==（相等）和!=（不等）來(lái)避免弱類型轉(zhuǎn)換錯(cuò)誤。

// 好的寫法
var same = (a === b);

// 好的寫法
var same = (a == b);

三元操作符

三元運(yùn)算符應(yīng)當(dāng)僅僅用在條件賦值語(yǔ)句中，而不要作為if語(yǔ)句的替代品。

// 好的寫法
var value = condition ? value1 : value2;

// 不好的寫法：沒有賦值，應(yīng)當(dāng)使用if表達(dá)式
condition ? doSomething() : doSomethingElse;

11.語(yǔ)句

簡(jiǎn)單語(yǔ)句

每一行最多只包含一條語(yǔ)句。所有簡(jiǎn)單的語(yǔ)句都應(yīng)該以分號(hào)(;)結(jié)束。

// 好的寫法
count++;
a = b;

// 不好的寫法：多個(gè)表達(dá)式寫在一行
count++; a = b;

返回語(yǔ)句

返回語(yǔ)句當(dāng)返回一個(gè)值的時(shí)候不應(yīng)當(dāng)使用圓括號(hào)包裹，除非在某些情況下這么做可以讓返回值更容易理解。例如：

return;

return collection.size();

return (size > 0 ? size : defaultSize);

復(fù)合語(yǔ)句

復(fù)合語(yǔ)句是大括號(hào)括起來(lái)的語(yǔ)句列表。
•括起來(lái)的語(yǔ)句應(yīng)當(dāng)較復(fù)合語(yǔ)句多縮進(jìn)一個(gè)層級(jí)。
•開始的大括號(hào)應(yīng)當(dāng)在復(fù)合語(yǔ)句所在行的末尾；結(jié)束的大括號(hào)應(yīng)當(dāng)獨(dú)占一行且同復(fù)合語(yǔ)句的開始保持同樣的縮進(jìn)。
•當(dāng)語(yǔ)句是控制結(jié)構(gòu)的一部分時(shí)，諸如if或者for語(yǔ)句，所有語(yǔ)句都需要用大括號(hào)括起來(lái)，也包括單個(gè)語(yǔ)句。這個(gè)約定使得我們更方便地添加語(yǔ)句而不用擔(dān)心忘記加括號(hào)而引起bug。
•像if一樣的語(yǔ)句開始的關(guān)鍵詞，其后應(yīng)該緊跟一個(gè)空格，起始大括號(hào)應(yīng)當(dāng)在空格之后。

if 語(yǔ)句

if 語(yǔ)句應(yīng)當(dāng)是下面的格式。

if (condition) {
  statements
}

if (condition) {
  statements
} else {
  statements
}

if (condition) {
  statements
} else if (condition) {
  statements
} else {
  statements
}

絕不允許在if語(yǔ)句中省略花括號(hào)。

// 好的寫法
if (condition) {
  doSomething();
}

// 不好的寫法：不恰當(dāng)?shù)目崭?
if (condition){
  doSomething();
}

// 不好的寫法：所有代碼都在一行
if (condition) { doSomething(); }

// 不好的寫法：所有代碼都在一行且沒有花括號(hào)
if (condition) doSomething();

for 語(yǔ)句

for類型的語(yǔ)句應(yīng)當(dāng)是下面的格式。

for (initialization; condition; update) {
  statements
}

for (variable in object) {
  statements
}

for語(yǔ)句的初始化部分不應(yīng)當(dāng)有變量聲明。

// 好的方法
var i,
  len;

for (i=0, len=0; i < len; i++) {
  // code
}

// 不好的寫法：初始化時(shí)候聲明變量
for (var i=0, len=0; i < len; i++) {
  // code
}

// 不好的寫法：初始化時(shí)候聲明變量
for (var prop in object) {
  // code
}

當(dāng)使用for-in語(yǔ)句時(shí)，記得使用hasOwnProperty()進(jìn)行雙重檢查來(lái)過濾對(duì)象的成員。

while 語(yǔ)句

while 類的語(yǔ)句應(yīng)當(dāng)是下面的格式。

while (condition) {
  statements
}

do 語(yǔ)句

do 類的語(yǔ)句應(yīng)當(dāng)是下面的格式。

do {
  statements
} while (condition);

switch 語(yǔ)句

switch 類的語(yǔ)句應(yīng)當(dāng)是如下格式。

switch (expression) {
  case expression:
    statements

  default:
    statements
}

switch下的第一個(gè)case都應(yīng)當(dāng)保持一個(gè)縮進(jìn)。除第一個(gè)之外包括default在內(nèi)的每一個(gè)case都應(yīng)當(dāng)在之前保持一個(gè)空行。

每一組語(yǔ)句（除了default）都應(yīng)當(dāng)以break、return、throw結(jié)尾，或者用一行注釋表示跳過。

// 好的寫法
switch (value) {
  case 1:
    /* falls through */

  case 2:
    doSomething();
    break;

  case 3:
    return true;

  default:
    throw new Error("Some error");
}

如果一個(gè)switch語(yǔ)句不包含default情況，應(yīng)當(dāng)用一行注釋代替。

// 好的寫法
switch (value) {
  case 1:
    /* falls through */

  case 2:
    doSomething();
    break;

  case 3:
    return true;

  default:
    // 沒有default
}

try 語(yǔ)句

try類的語(yǔ)句應(yīng)當(dāng)格式如下。

try {
  statements
} catch (variable) {
  statements
}

try {
  statements
} catch (variable) {
  statements
} finally {
  statements
}

12.留白

在邏輯相關(guān)的代碼之間添加空行代碼可以提高代碼的可讀性。

兩行空行僅限于在如下情況下使用：
•在不同的源代碼文件之間。
•在類和接口定義之間。

單行空行僅限在如下情況中使用。
•方法之間。
•方法中局部變量和第一行語(yǔ)句之間。
•多行或者單行注釋之前。
•方法中邏輯代碼塊之間以提升代碼的可讀性。

空格應(yīng)當(dāng)在如下的情況下使用。
•關(guān)鍵詞后跟括號(hào)的情況應(yīng)當(dāng)用空格隔開。
•參數(shù)列表中逗號(hào)之后應(yīng)當(dāng)保留一個(gè)空格。
•所有的除了點(diǎn)(.)之外的二元運(yùn)算符，其操作數(shù)都應(yīng)當(dāng)用空格隔開。單目運(yùn)算符的操作數(shù)之間不應(yīng)該用空白隔開，例如一元減號(hào)，遞增(++)，遞減(--)。
•for 語(yǔ)句的表達(dá)式之間應(yīng)當(dāng)用空格隔開。

13.需要避免的

•切勿使用像String一類的原始包裝類型創(chuàng)建新的對(duì)象。
•避免使用eval()。
•避免使用with語(yǔ)句。該語(yǔ)句在嚴(yán)格模式中不復(fù)存在，可能在未來(lái)的ECMAScript標(biāo)準(zhǔn)中也將去除。

寫在最后

　　上述指南并不是在開發(fā)過程中必須完全遵守的，我們可以只汲取其中的一部分來(lái)改善自己的編碼風(fēng)格，讓自己的代碼易讀、可維護(hù)。關(guān)于編碼風(fēng)格，每個(gè)團(tuán)隊(duì)都有自己的特色，只要保持團(tuán)隊(duì)一致性，可以高效的開發(fā)就OK了。有些規(guī)則也并不是我們必須一成不變地遵守的，比如在縮進(jìn)方面，我們使用Tab鍵很多時(shí)候更加地便捷，但是我們不能保證在任何環(huán)境下Tab都代表4個(gè)空格，為了在縮進(jìn)方面保持一致性，如果使用Tab鍵那么在整個(gè)過程中都要使用；還有關(guān)于""和‘'的使用，我們也不必都使用""，使用''也是可以的，只要保持一致的風(fēng)格就可以了。還有很多其他類似的風(fēng)格問題，全憑個(gè)人選擇。

　　沒有絕對(duì)的準(zhǔn)則，只有適不適合。

最新評(píng)論