前端基礎：JavaScript 代碼風格指南

一.基本格式

縮進

建議每級4個空格，能夠給編輯器設置tab = 4個空格，自動轉換

分號

不要省略分號，防止ASI（自動插入分號）錯誤

行寬

每行代碼不超過80個字符，過長應該用操做符手動斷行

斷行

操做符在上一行末尾，且下一行縮進2級，若是是賦值語句，還應該和等號後面部分對齊

空行

函數聲明與函數聲明、變量聲明與函數聲明、函數內部的邏輯塊之間都應該有空行隔開

做者尼古拉斯還建議在流程控制塊頂部留一個空行，但給的例子不是很明確

命名

• 變量名/函數名：Camel（駝峯）規則，首詞首字母小寫，後續詞首字母大寫，其他部分小寫
• 常量名：C語言式，全大寫，下劃線分詞
• 構造函數：Pascal規則，全部詞首字母大寫，其他部分小寫

字面量

• 字符串：雙引號包裹，斷行用[+]操做符，不要用\轉義字符
• 數值：不要省略小數點先後的部分，不要用八進制形式
• Null：只把null看成Object的佔位符，不要用來檢測形參，也不要用來檢測未初始化的變量
• Undefined：應該把全部對象都初始化爲null，以區分未定義和未初始化
• 對象字面量/數組字面量：不要用構造函數方式聲明對象和數組

二.註釋

P.S.書中有一句很是經典的解釋：

Appropriately written comments help tell the story of code, allowing other developers to drop into a part of the story without needing to hear the beginning.

單行註釋

• 行尾：用1級縮進隔開代碼，並且//後面要有一個空格
• 獨佔一行：用來註釋下面，要與被註釋的代碼保持相同的縮進
• 行首：用來註釋多行代碼

多行註釋

用來包裹大段註釋，推薦Eclipse風格，例如

/*

 * comment line1

 * comment line2

 */

注意：

• 多行註釋上方留一個空行
• *星號後面留一個空格
• 多行註釋至少三行（由於第一行和最後一行後面不加註釋）

在哪裏添註釋

• 不能自解釋的代碼
• 故意的，但看起來像是有錯的地方
• 針對瀏覽器的hack

文檔註釋

應該給各個函數添註釋，包括功能描述、參數、返回值、拋出的錯誤等等，例如推薦的Eclipse風格：

/**

 * 添加指定元素到默認數組

 *

 * @method add

 * @param {Number} 將要添加的元素

 * @return {Boolean} 添加成功/失敗

 * @throw {TypeError} 參數類型不匹配

 */function add(item){

    if(typeof item === "number"){

        arr.push(item)

    }

    else{

        throw new TypeError();

    }

}

三.語句和表達式

花括號對齊方式

建議行尾風格，不推薦次行風格

塊語句空格

if後的圓括號部分先後各有一個空格，例如：

if (expr) {

    code

}

switch語句

• 縮進：case與switch對齊，break縮進1級
• case貫穿：用空行或註釋//falls through代表case貫穿是故意的
• default：保留default或者用註釋//no default代表沒有default

P.S.《JavaScript語言精粹》的做者道格拉斯認爲不該該用case貫穿（稱之爲雞肋），由於極易引起bug，而尼古拉斯認爲用空行或者註釋說明就行了

with語句

不用

for循環

全部變量都應該在函數體頂部聲明，包括for循環初始化部分用到的變量，避免hosting（提高）引起bug（可能會屏蔽全局變量）

for-in循環

不要用來遍歷數組，用的時候記得加上hasOwnProperty過濾，若是故意遍歷原型屬性，應該用註釋說明

四.變量、函數、操做符

變量聲明

函數體 = 變量聲明 + 函數聲明 + 邏輯語句。用空行隔開各個部分

函數聲明

先聲明再使用，千萬不要把函數聲明放在if分支裏，由於瀏覽器理解不一樣，並且ES沒給標準

函數調用

圓括號先後都不加空格，避免和塊語句混淆

匿名函數當即執行

把當即執行的匿名函數用圓括號包裹，避免與匿名函數聲明混淆

嚴格模式

不要在全局做用域開嚴格模式，只在函數內部開，給多個函數開能夠用匿名函數當即執行限定嚴格模式的做用域

判斷等於

只用===和!==

eval

不用eval()和new Function()，用匿名函數優化setTimeout()和setInterval()

基本包裝類型

不要用new Boolean(), new String(), new Number()

參考資料

• 《Maintainable JavaScript》
• 《JavaScript語言精粹》

 知海匠庫web前端課程：http://www.zhihaijiangku.com 系統學習，快速就業。