JS代碼風格指南

時間 2019-11-20

原文原文鏈接

一.基本格式

縮進javascript

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

不要省略分號，防止ASI（自動插入分號）錯誤瀏覽器
行寬編輯器

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

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

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

做者尼古拉斯還建議在流程控制塊頂部留一個空行，但給的例子不是很明確
命名
- 變量名/函數名：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
 */
```
注意：
- 多行註釋上方留一個空行
- *星號後面留一個空格
- 多行註釋至少三行（由於第一行和最後一行後面不加註釋）
在哪裏添註釋
- 不能自解釋的代碼
- 故意的，但看起來像是有錯的地方
- 針對瀏覽器的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()

五.風格良好的範例代碼

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);    // 返回值是複雜表達式時要給總體加括號
    }
}