JavaScript程序編碼規範 中文版本
Any violation to this guide is allowed if it enhances readability.
所有的代碼都要變成可供他人容易閱讀的。
軟件的長期價值直接源於其編碼質量。在它的整個生命周期裏,一個
程序
可能會被許多人閱讀或修改。如果一個
程序
可以清晰的展現出它的結構和特征,那就能減少在以後對其進行修改時出錯的可能性。
編程規範可以幫助
程序
員們增加
程序
的健壯性。所有的 JavaScript 代碼都是暴露給公眾的。所以我們更應該保證其質量。保持整潔很重要。
JavaScript文件
JavaScript
程序
應獨立保存在後綴名為 .js 的文件中。
JavaScript 代碼不應該被包含在 HTML 文件中,除非這是段特定隻屬於此部分的代碼。在 HTML 中的JavaScript代碼會明顯增加文件大小,而且也不能對其進行緩存和壓縮。
filename.js 應盡量放到 body 的後麵。這樣可以減少因為載入
腳本
而造成其他頁麵
內容
載
入也被延遲的問題。也沒有必要使用 language 或者 type 屬性。MIME 類型是由服務器而非 scripttag
來決定的。(手氣不錯:個人認為按照 Web 標準而言,建議指定 type 屬性,並將 <script> 放到頁麵的
<head> 中。)
縮進
縮進的單位為四個空格。避免使用 Tab 鍵來縮進。因為始終沒有個統一的 Tab 長短標準。雖然使用空格會增加文件的大小,但在局域網中幾乎可以忽略,且在最小化過程中也可被消除掉。
每行長度
避免每行超過 80 個字符。當一條語句一行寫不下時,請考慮折行。在運算符號,最好是逗號後換行。在運算符後換行可以減少因為複製粘貼產生的錯誤被分號掩蓋的幾率。
注釋
不要吝嗇注釋。給以後需要理解你的代碼的人們(或許就是你自己)留下信息是非常有用的。注釋應該和它們所注釋的代碼一樣是書寫良好且清晰明了。偶爾的小幽默就更不錯了。記得要避免冗長或者情緒化。
及時地更新注釋也很重要。錯誤的注釋會讓
程序
更加難以閱讀和理解。
讓注釋有意義。重點在解釋那些不容易立即明白的邏輯上。不要把讀者的
時間
浪費在閱讀類似於:
i = 0; // 讓 i 等於 0
使用單行注釋。塊注釋用於注釋正式文檔和無用代碼。
變量聲明
所有的變量必須在使用
前進
行聲明。JavaScript 並不強製必須這麼做,但這麼做可以讓
程序
易於閱讀,且也容易發現那些沒聲明的變量(它們會被編譯成全局變量)。
將 var 語句放在函數的首部。
最好把每個變量的聲明語句單獨放到一行,並加上注釋說明。所有變量按照字母排序。
var currentEntry; // 當前選擇項
var level; // 縮進程度
var size; // 表格大小
JavaScript 沒有塊範圍,所以在塊裏麵定義變量很容易引起 C/C++/Java
程序
員們的誤解。在函數的首部定義所有的變量。
盡量減少全局變量的使用。不要讓局部變量覆蓋全局變量。
函數聲明
所有的函數在使用
前進
行聲明。 內函數的聲明跟在 var 語句的後麵。這樣可以幫助判斷哪些變量是在函數範圍內的。
函數名與“(”(左括號)之間不應該有空格。“)”(右括號)與開始
程序
體的“{”(左大括號)之間應插入一個空格。函數
程序
體應縮進四個空格。“}”(右大括號)與聲明函數的那一行代
碼頭
部對齊。
function outer(c,d) {
var e = c * d;
function inner(a, b) {
return (e * a) + b;
}
return inner(0, 1);
}
下麵這種書寫方式可以在 JavaScript 中正常使用,因為在 JavaScript 中,函數和對象的聲明可以放到任何表達式允許的地方。且它讓內聯函數和混合結構具有最好的可讀性。
function getElementsByClassName(className) {
var results = [];
walkTheDOM(document.body, function (node) {
var a; // array of class names
var c = node.className; // the node's classname
var i; // loop counter
// If the node has a class name, then split it into a list of simple names.
// If any of them match the requested name, then append the node to the set of results.
if (c) {
a = c.split(' ');
for (i = 0; i < a.length; i += 1) {
if (a === className) {
results.push(node);
break;
}
}
}
});
return results;
}
如果函數是匿名函數,則在 function 和 “(”(左括號)之間應有一個空格。如果省略了空格,否則會讓人感覺函數名叫作 function。
div.onclick = function (e) {
return false;
};
that = {
method: function () {
return this.datum;
},
datum: 0
};
盡量不使用全局函數。
命名
變量名應由 26 個大小寫字母(A..Z,a..z),10 個數字(0..9),和 “_”(下劃線)組成。避免使用國際化字符(如中文),因為它們不是在任何地方都可以被方便的閱讀和理解。不要在命名中使用 “$”(美元符號)或者 “”(反斜杠)。
不要把 “_”(下劃線)作為變量名的第一個字符。它有時用來表示私有變量,但實際上 JavaScript 並沒提供私有變量的功能。如果私有變量很重要,那麼使用 私有成員 的形式。應避免使用這種容易讓人誤解的命名習慣。
大多數的變量名和方法命應以小寫字母開頭。
必須與 new 共同使用的構造函數名應以大寫字母開頭。當 new 被省略時 JavaScript 不會有任何編譯錯誤或運行錯誤拋出。忘記加 new 時會讓不好的事情發生(比如被當成一般的函數),所以大寫構造函數名是我們來盡量避免這種情況發生的唯一辦法。
全局變量應該全部大寫。(JavaScript 沒有宏或者常量,所以不會因此造成誤會)
語句
簡單語句
每一行最多隻包含一條語句。把 “,” (分號)放到每條簡單語句的結尾處。注意一個函數賦值或對象賦值語句也是賦值語句,應該以分號結尾。
JavaScript 可以把任何表達式當作一條語句。這很容易隱藏一些錯誤,特別是誤加分號的錯誤。隻有在賦值和調用時,表達式才應被當作一條單獨的語句。
複合語句
複合語句是被包含在 “{ }”(大括號)的語句序列。
被括起的語句必須多縮進四個空格。
“{”(左大括號)應在複合語句其實行的結尾處。
“}”(右大括號)應與“{”(左大括號)的那一行的開頭對齊。
大括號應該在所有複合語句中使用,即使隻有一條語句,當它們是控製結構的一部分時,比如一個 if 或者 for 語句。這樣做可以避免以後添加語句時造成的錯誤。
標示
語句標示是可選的,隻有以下語句必須被標示:while、do、for、switch。
return 語句
一條有返回值的 return 語句不要使用“( )”(括號)來括住返回值。如果返回表達式,則表達式應與 return 關鍵字在同一行,以避免誤加分號錯誤。
if 語句
if 語句應如以下格式:
if (condition){
statements;
}
if (condition) {
statements;
} else {
statements;
}
if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}
for 語句
for 語句應如以下格式:
for (initialization;condition; update) {
statements;
}
for (variable in object) if (filter) {
statements;
}
第一種形式的循環用於已經知道相關參數的數組循環。
第二種形式應用於對象中。Object 原型中的成員將會被包含在迭代器中。通過預先定義 hasOwnProperty方法來區分真正的 object 成員是個不錯方法:
for (variablein object) if (object.hasOwnProperty(variable)){
statements;
}
while 語句
while 語句應如以下格式:
while (condition){
statements;
}
do 語句
do 語句應如以下格式:
do {
statements;
} while (condition);
不像別的複合語句,do 語句總是以 “;”(分號)結尾。
switch 語句
switch 語句應如以下格式:
switch (expression){
case expression:
statements;
default:
statements;
}
每個 case 與 switch 對齊。這可避免過分縮進。
每一組 statements(除了default 應以 break,return,或者 throw 結尾),不要讓它順次往下執行。
try 語句
try 語句應如以下格式:
try {
statements;
} catch (variable){
statements;
}
try {
statements;
} catch (variable){
statements;
} finally {
statements;
}
continue 語句
避免使用 continue 語句。它很容易使得
程序
的邏輯過程晦澀難懂。
with 語句
不要使用 with 語句。
空白
用空行來將邏輯相關的代碼塊分割開可以提高
程序
的可讀性。空格應在以下情況時使用:
跟在“(”(左括號)後麵的關鍵字應被一個空格隔開。
while (true) {
函數參數與“(”(左括號)之間不應該有空格。這能幫助區分關鍵字和函數調用。所有的二元操作符,除了“.”(點) 和“(”(左括號)和 “[”(左方括號)應用空格將其與操作數隔開。
一元操作符與其操作數之間不應有空格,除非操作符是個單詞,比如 typeof。
每個在控製部分,比如 for 語句中的 “;”(分號)後須跟一個空格。
每個 “,”(逗號)後應跟一個空格。
另外的建議
{} 和[]
使用 {} 代替 new Object()。使用 [] 代替 new Array() 。
當成員名是一組有序的數字時使用數組來保存數據。當成員名是無規律的字符串或其他時使用對象來保存數據。
,(逗號)操作符
避免使用逗號操作符,除非在特定的 for 語句的控製部分。(這不包括那些被用在對象定義,數組定義,var 語句,和參數列表中的逗號分隔符。)
作用域
在 JavaScript 中塊沒有域。隻有函數有域。不要使用塊,除非在複合語句中。
賦值表達式
避免在 if 和 while 語句的條件部分進行賦值。
if (a = b) {
是一條正確語句? 或者
if (a == b) {
才是對的? 避免這種不容易判斷對錯的結構。
=== 和 !== 操作符。
使用 === 和 !== 操作符會相對好點。== 和 != 操作符會進行類型強製轉換。 特別是, 不要將 == 用於與錯值比較(false,null,undefined,“”,0,NaN)。
令人迷惑的加號和減號
小心在 + 後緊跟 + 或 ++。這種形式很容易仍人迷惑。應插入括號以便於理解。
total = subtotal + +myInput.value;
最好能寫成
total = subtotal + (+myInput.value);
這樣 + + 不會被誤認為是 ++。
eval 是惡魔
eval 是 JavaScript 中最容易被濫用的方法。避免使用它。
eval 有別名。不要使用 function 構造器。不要給 setTimeout 或者 setInterval 傳遞字符串參數。
最後更新:2017-04-02 03:42:38