一.基本格式
-
縮進
建議每級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 */
注意：
-
多行注釋上方留一個空行
-
*星號后面留一個空格
-
多行注釋至少三行（因為第一行和最后一行后面不加注釋）
-
-
在哪里添注釋
-
不能自解釋的代碼
-
故意的，但看起來像是有錯的地方
-
針對瀏覽器的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); // 返回值是復雜表達式時要給整體加括號
}
}
參考資料
-
《Maintainable JavaScript》
-
《JavaScript語言精粹》