JS 代碼風格指南

一.基本格式

縮進

建議每級 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 風格，例如

    code
    
    /* 
     * comment line1
     * comment line2
     */

注意：

-  多行註釋上方留一個空行

-  \*星號後面留一個空格

-  多行註釋至少三行（因為第一行和最後一行後面不加註釋）

3. 在哪裡添註釋

-  不能自解釋的代碼

-  故意的，但看起來像是有錯的地方

-  針對瀏覽器的 hack

4. 文檔註釋

應該給各個函數添註釋，包括功能描述、參數、返回值、拋出的錯誤等等，例如推薦的 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
    }

3. 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()

五.風格良好的範例代碼

var obj = { // 注意對象字面量的縮進對齊方式
    
    attr1: 1,  // 注意冒號前後的空格以及本行前的空行
    attr2: (function() {
    
        // 注意 IIFE 特別的圓括號位置，不是 (function(){})()
    }()),
    _privateAttr: 2,   // 私有屬性名以下劃線開頭
    
    doSomething: function(arg) {   // 方法名動詞開頭，而且不用下劃線
        
        // 注意 if-else if-else 的空格使用以及換行方式
        if (arg === 1) {
        
        } else if (arg === 2) {
        
        } else {
        
        }
    }
}

function Fun() {    // 構造函數名以非動詞開始，Pascal 規則（注意本行的 2 個空格）

    // 多個變量應該一起聲明，注意等號對齊（註釋前面留一行空行）
    var count   = 10,       // 變量名以名詞開頭，避免與 fun 混淆，而且不用下劃線
        isTrue  = (2 > 1),  // 右邊有比較運算時要給右邊整體加括號
        color   = 0xcccccc; // 可以用 10 進制和 16 進制，不要用 8 進制，例如 011
        
    /**
     * 註釋方法應該用這種文檔註釋形式，用 @param 等等
     * 多行註釋要保證每行前面有*，並小心對齊
     * 所有的註釋（除了行尾單行註釋）前面都應該空一行
     */
    function fun(arg1, arg2) {  // 注意本行的 3 個空格（函��聲明與變量聲明間隔一行空行）
        
        var arr = [1, 2, 3],    // 有默認值的屬性先聲明
            i,                  // 循環（包括 for-in）中初始化部分用到的變量也要提前聲明
            len;                // 沒有默認值的屬性後聲明
            
        for (i = 0, len = arr.length; i < len; i++) {
            
            // 注意 for 結構中空格的使用
        }
        
        for (i in arr) {
            
            // TODO: 註解，表示未完成的任務
            // HACK: 註解，表示針對特定瀏覽器的 hack
            // XXX: 註解，表示很要緊的錯誤
            // FIXME: 註解，表示不太要緊的錯誤
            // REVIEW: 註解，表示可能存在更好的實現方式
        }
        
        while (i < len) {
            
            switch (i) {
            
                case 1:
                    /* falls through */
                    
                case 2:
                    break;
                    
                default:
                    break;
                    
                // 或者
                // no default
            
            }
        }
        
        do {
            
            // 所有語句塊前都要空一行，註釋代碼塊要用//不要用/**/，後者用來表示註釋塊
//            try {
//                //
//            } catch (err) {
//                //
//            } finally {
//               //
//            }
        } while (i < len);  // 注意 while 前後的空格
        
        return (len > 1 ? true : false);    // 返回值是複雜表達式時要給整體加括號
    }
}

參考資料

《Maintainable JavaScript》
《JavaScript 語言精粹》