淺談JavaScript編程語(yǔ)言的編碼規(guī)范
JavaScript 編程語(yǔ)言作為***的客戶端腳本語(yǔ)言，早已被眾多 Web 開(kāi)發(fā)人員所熟悉。隨著 Web2.0 時(shí)代的到來(lái)和 Ajax 技術(shù)的廣泛應(yīng)用，JavaScript 也逐漸吸引著更多的視線。工作中要求越多的是對(duì) JavaScript 語(yǔ)言的深入學(xué)習(xí)，靈活運(yùn)用，和對(duì)編碼質(zhì)量的保證。
對(duì)于熟悉 C/C++ 或 Java 語(yǔ)言的工程師來(lái)說(shuō)，JavaScript 顯得靈活，簡(jiǎn)單易懂，對(duì)代碼的格式的要求也相對(duì)松散。很容易學(xué)習(xí)，并運(yùn)用到自己的代碼中。也正因?yàn)檫@樣，JavaScript 的編碼規(guī)范也往往被輕視，開(kāi)發(fā)過(guò)程中修修補(bǔ)補(bǔ)，最終也就演變成為后續(xù)維護(hù)人員的惡夢(mèng)。軟件存在的長(zhǎng)期價(jià)值直接與編碼的質(zhì)量成比例。編碼規(guī)范能幫助我們降低編程中不必要的麻煩。而 JavaScript 代碼是直接發(fā)送給客戶瀏覽器的，直接與客戶見(jiàn)面，編碼的質(zhì)量更應(yīng)該受到關(guān)注。
本文淺談 JavaScript 編程中關(guān)于編碼規(guī)范的問(wèn)題，分析其中緣由。希望引起更多 Web 開(kāi)發(fā)人員對(duì) JavaScript 編碼規(guī)范問(wèn)題的關(guān)注和對(duì)軟件產(chǎn)品質(zhì)量問(wèn)題的重視。
前言
提及 C/C++ 和 Java 編碼規(guī)范，相信許多工程師并不生疏。但說(shuō)到 JavaScript 語(yǔ)言的編碼規(guī)范，也許您會(huì)忍俊不禁。JavaScript 不是語(yǔ)法很靈活嗎?變量隨時(shí)用隨時(shí)可以聲明;語(yǔ)句結(jié)束符可以不要;字符串和數(shù)字也可以相加;參數(shù)多一個(gè)少一個(gè)也不會(huì)報(bào)錯(cuò)。沒(méi)錯(cuò)，當(dāng)您從 C/C++ 和 Java 嚴(yán)格的語(yǔ)法規(guī)定之下，轉(zhuǎn)向 JavaScript 語(yǔ)言，會(huì)覺(jué)得自由了很多，輕松了很多。語(yǔ)法松散是 JavaScript 重要的特征。它靈活易懂，給開(kāi)發(fā)人員帶來(lái)了很多方便，但如果編寫(xiě)過(guò)程中不注意，代碼的調(diào)試成本和維護(hù)成本則會(huì)無(wú)形地增加。
JavaScript 編碼會(huì)隨應(yīng)被直接發(fā)送到客戶端的瀏覽器，代碼規(guī)范不只是代碼質(zhì)量的保證，也影響到產(chǎn)品的長(zhǎng)期信譽(yù)。希望 JavaScript 編程語(yǔ)言的規(guī)范問(wèn)題也能同樣引起更多朋友的關(guān)注。
JavaScript 編碼規(guī)范建議
本文就 JavaScript 編碼過(guò)程中涉及的排版、命名、聲明、作用域、及一些特殊符號(hào)的使用等方面，根據(jù)個(gè)人在學(xué)習(xí)工作中的總結(jié)，給出自己的一些建議，并分析其中緣由，以供參考。
JavaScript 文件引用
JavaScript 程序應(yīng)該盡量放在 .js 的文件中，需要調(diào)用的時(shí)候在 HTML 中以 < script src="filename.js"> 的形式包含進(jìn)來(lái)。JavaScript 代碼若不是該 HTML 文件所專(zhuān)用的，則應(yīng)盡量避免在 HTML 文件中直接編寫(xiě) JavaScript 代碼。因?yàn)檫@樣會(huì)大大增加 HTML 文件的大小，無(wú)益于代碼的壓縮和緩存的使用。
另外，<script src="filename.js"> 標(biāo)簽應(yīng)盡量放在文件的后面。這樣會(huì)降低因加載 JavaScript 代碼而影響頁(yè)面中其它組件的加載時(shí)間。
代碼排版
行長(zhǎng)度
每行代碼應(yīng)小于 80 個(gè)字符。如果代碼較長(zhǎng)，應(yīng)盡量選擇換行，下一行代碼應(yīng)縮進(jìn) 8 個(gè)空格。這樣可以使代碼排版整齊，減輕閱讀代碼的疲勞感。換行縮進(jìn) 8 個(gè)空格可以和代碼段的縮進(jìn) 4 個(gè)空格區(qū)分開(kāi)，以增強(qiáng)代碼的可閱讀性。
行結(jié)束
JavaScript 語(yǔ)句應(yīng)該以分號(hào)結(jié)束。但大多數(shù)瀏覽器允許不寫(xiě)分號(hào)，只要在本應(yīng)是分號(hào)的地方有一個(gè)換行符就行。但是如果代碼行較長(zhǎng)需要換行的時(shí)候，有哪些注意事項(xiàng)呢?換行應(yīng)選擇在操作符和標(biāo)點(diǎn)符號(hào)之后，***是在逗號(hào)'，'之后，而不要在變量名、字符串、數(shù)字、或')' ']' '++' '--'等符號(hào)之后換行。
這樣可以有效的防止拷貝、粘貼而引起的錯(cuò)誤，并可有效地增強(qiáng)代碼的可閱讀性。請(qǐng)見(jiàn)清單 1，代碼的輸出符合我們的期望。但就寫(xiě)法而言，對(duì) valueB 的賦值語(yǔ)句是在變量 valueA 之后進(jìn)行的換行，這很容易被誤解為 valueB=ValueA，給閱讀造成障礙。而對(duì) valueC 的復(fù)制語(yǔ)句是在'+'之后進(jìn)行的換行，就容易理解的多。這也是本文所提倡的換行方式。
清單 1. 行結(jié)束的位置
代碼:
- <script language="javascript">
- var valueA = 1;
- var valueB = valueA ///bad
- +1;
- var valueC = valueB + ///good
- valueA;
- alert (valueB); //output: valueB=2
- alert (valueC);//output: valueC=3
- </script>
縮進(jìn)
關(guān)于縮進(jìn)的問(wèn)題，不只是 JavaScript，幾乎所有的語(yǔ)言編寫(xiě)的時(shí)候，都會(huì)提及縮進(jìn)的問(wèn)題。縮進(jìn)幾乎是代碼編寫(xiě)規(guī)范的***課，是代碼可閱讀性判斷的直接因素。
代碼縮進(jìn)的好處是不言而喻的，但是對(duì)于如何縮進(jìn)，則沒(méi)有標(biāo)準(zhǔn)而言。***的是方便使用 TAB 鍵縮進(jìn)，也有些喜歡用 2 個(gè)、4 個(gè)、8 個(gè)空格進(jìn)行縮進(jìn)。這樣縮進(jìn)風(fēng)格不一，也同樣給代碼的閱讀帶來(lái)障礙。
本文提倡用 4 個(gè)空格來(lái)進(jìn)行縮進(jìn)，并在同一產(chǎn)品中采用同一種縮進(jìn)標(biāo)準(zhǔn)。不支持用 TAB 鍵進(jìn)行縮進(jìn)。這是因?yàn)橹钡浆F(xiàn)在還沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)來(lái)定義 TAB 鍵所代替的空白大小，有些編輯器解析為 4 個(gè)空格大小，有些則解析為 8 個(gè)。因而用不同的編輯器查看代碼，可能造成格式混亂。當(dāng)然 TAB 簡(jiǎn)單易用，為解決這個(gè)問(wèn)題，建議在設(shè)置開(kāi)發(fā)環(huán)境時(shí)，將編輯器里的 TAB 快捷鍵重新設(shè)置為 4 個(gè)空格。據(jù)了解 Eclipse, Vi, Nodepad++，Editplus, UltraEdit 等流行的編輯器，均提供了此功能。
注釋
代碼中的注釋很重要，自然也是毋庸置疑的。通常我們會(huì)強(qiáng)調(diào)代碼中注釋數(shù)量的多少，而輕視了對(duì)注釋質(zhì)量的提高。編碼是及時(shí)添加注釋?zhuān)瑫?huì)給后續(xù)代碼的維護(hù)人員帶來(lái)很大的便利。但是如果注釋不注意更新，或者由于拷貝、粘貼引起的錯(cuò)誤的注釋?zhuān)瑒t會(huì)誤導(dǎo)閱讀人員，反而給閱讀帶來(lái)障礙。
除了注釋要 及時(shí)更新外，我們還應(yīng)對(duì)注釋的內(nèi)容要特別關(guān)注。注釋要盡量簡(jiǎn)單、清晰明了，避免使用含混晦澀的語(yǔ)言，同時(shí)著重 注釋的意義，對(duì)不太直觀的部分進(jìn)行注解。請(qǐng)見(jiàn)清單 2。
清單 2. 有意義的注釋
代碼:
- <script language="javascript">
- //following section is used to initialize golbal variables (good)
- var valueA = 0; //initialize valueA to be sero (bad)
- var valueB = 1;
- ...
- //call f1 function after waiting for 50 seconds. (good)
- setTimeout (f1,50000); //set timeout to be 20s (copy error)
- ...
- </script>
這樣的注釋方式在 JavaScript 代碼中經(jīng)常見(jiàn)到。"initialize valueA to be sero" 這樣的注釋有什么用呢?難道閱讀程序的工程師從"var valueA = 0;"復(fù)制語(yǔ)句中看不出來(lái)么?"set timeout to be 20s"這條注釋?zhuān)恢皇且蚩截悺⒄迟N引起的時(shí)間大小的錯(cuò)誤，同時(shí)也誤導(dǎo)了程序員對(duì)這條語(yǔ)句的理解。setTimeout () 函數(shù)的作用并非是設(shè)置函數(shù)執(zhí)行的超時(shí)時(shí)間，而是等待一定時(shí)間后執(zhí)行所調(diào)用的函數(shù)，害人匪淺呀。這樣的注釋內(nèi)容寧可刪掉。
此外，JavaScript 的注釋有兩種"//" 和"/* .... */"，建議"//"用作代碼行注釋?zhuān)?quot;/* .... */"形式用作對(duì)整個(gè)代碼段的注銷(xiāo)，或較正式的聲明中，如函數(shù)參數(shù)、功能、文件功能等的描述中。
標(biāo)識(shí)符命名
JavaScript 中的標(biāo)識(shí)符的命名規(guī)則：
◆ 以字母、下劃線'_'或美元符號(hào)'$'開(kāi)頭
◆ 允許名稱(chēng)中包含字母，數(shù)字，下劃線'_'和美元符號(hào)'$'
◆ 區(qū)分大小寫(xiě)
變量、參數(shù)、成員變量、函數(shù)等名稱(chēng)均以小寫(xiě)字母開(kāi)頭，構(gòu)造器的名稱(chēng)以大寫(xiě)字母開(kāi)頭。下劃線'_'開(kāi)頭的變量一般習(xí)慣于標(biāo)識(shí)私有 / 局部成員。而美元符號(hào)'$'開(kāi)頭的變量習(xí)慣于標(biāo)識(shí)系統(tǒng)相關(guān)，比如系統(tǒng)進(jìn)程等。應(yīng)避免用下劃線'_'或美元符號(hào)'$'來(lái)命名標(biāo)識(shí)符。盡可能地降低代碼的閱讀負(fù)擔(dān)。
聲明
變量的聲明
盡管 JavaScript 語(yǔ)言并不要求在變量使用前先對(duì)變量進(jìn)行聲明。但我們還是應(yīng)該養(yǎng)成這個(gè)好習(xí)慣。這樣可以比較容易的檢測(cè)出那些未經(jīng)聲明的變量，避免其變?yōu)殡[藏的全局變量，造成隱患。
在函數(shù)的開(kāi)始應(yīng)先用 var 關(guān)鍵字聲明函數(shù)中要使用的局部變量，注釋變量的功能及代表的含義，且應(yīng)以字母順序排序。每個(gè)變量單獨(dú)占一行，以便添加注釋。這是因?yàn)?JavaScript 中只有函數(shù)的 {} 表明作用域，用 var 關(guān)鍵字聲明的局部變量只在函數(shù)內(nèi)有效，而未經(jīng) var 聲明的變量則被視為全局變量。我們來(lái)看下清單 3。
清單 3. 局部變量聲明
代碼:
- <script language="javascript">
- var valueA = "a";
- var valueB = "b";
- function f1 () {
- var valueA = "c";
- alert ("valueA="+valueA); //output: valueA=c
- valueB = "d";
- alert ("valueB="+valueB); //output: valueB=d
- }
- f1 ();
- alert ("valueA="+valueA); //output: valueA=a
- alert ("valueB="+valueB); //output: valueB=d
- </script>
從上例的輸出驚奇地發(fā)現(xiàn)，用 var 聲明過(guò)的變量 valueA 和沒(méi)有聲明的變量 valueB 是有區(qū)別的。特別需要注意的是，在函數(shù)內(nèi)部用 var 聲明的變量為局部變量，這樣可以有效地避免因局部變量和全局變量同名而產(chǎn)生的錯(cuò)誤。
函數(shù)的聲明
函數(shù)也應(yīng)在調(diào)用前進(jìn)行聲明，內(nèi)部函數(shù)應(yīng)在 var 聲明內(nèi)部變量的語(yǔ)句之后聲明，可以清晰地表明內(nèi)部變量和內(nèi)部函數(shù)的作用域。
此外，函數(shù)名緊接左括號(hào)'('之間，而右括號(hào)')'和后面的'{'之間要有個(gè)空格，以清楚地顯示函數(shù)名以其參數(shù)部分，和函數(shù)體的開(kāi)始。若函數(shù)為匿名 / 無(wú)名函數(shù)，則 function 關(guān)鍵字和左括號(hào)'('之間要留空格，否則可能誤認(rèn)為該函數(shù)的函數(shù)名為 function。
清單 4. 內(nèi)部函數(shù)聲明
代碼:
- <script language="javascript">
- var innerA = 1;
- function outF () {
- var innerA = 2;
- function _inF () {
- alert ("valueA="+innerA);
- }
- _inF ();
- }
- outF (); //output: valueA=2
- _inF (); //error: innerF is not defined
- </script>
從清單 4 的輸出可以看出，inF () 函數(shù)僅在 outF () 函數(shù)的內(nèi)部生效，局部變量 innerA 對(duì)內(nèi)部函數(shù)的作用域生效。這樣的編碼方式使得變量和函數(shù)的作用域變得清晰。
語(yǔ)句
對(duì)于簡(jiǎn)單語(yǔ)句而言，需要提及的仍然是分號(hào)必要性，同時(shí)，一行最多有一個(gè)語(yǔ)句。如果一個(gè)賦值語(yǔ)句是用函數(shù)和對(duì)象來(lái)賦值，可能需要跨多行，一定切記要在賦值語(yǔ)句末加上分號(hào)。
這是因?yàn)?JavaScript 中，所有表達(dá)式都可以當(dāng)語(yǔ)句，遇換行符時(shí)會(huì)解析為表達(dá)式的結(jié)束，此時(shí)不規(guī)范的換行和分號(hào)的丟失，可能引入新的錯(cuò)誤。
對(duì)于復(fù)合語(yǔ)句，if, for, while, do, switch, try … catch 等代碼體，函數(shù)定義的函數(shù)體，對(duì)象的定義等都需要放在花括號(hào)'{}'里面。
◆ '{' 應(yīng)在行末，標(biāo)志代碼塊的開(kāi)始。
◆ '}' 應(yīng)在一行開(kāi)頭，標(biāo)志代碼塊的結(jié)束，同時(shí)需要和'{'所在行的開(kāi)始對(duì)齊，以表明一個(gè)完整的復(fù)合語(yǔ)句段。這樣可以極大地提高代碼的可閱讀性，控制邏輯能清晰地表現(xiàn)出來(lái)。
◆ 被包含的代碼段應(yīng)該再縮進(jìn) 4 個(gè)空格。
◆ 即使被包含的代碼段只有一句，也應(yīng)該用花括號(hào)'{}'包含。盡管不用花括號(hào)代碼也不會(huì)錯(cuò)，但如若需要增加語(yǔ)句的話，則較容易因花括號(hào)遺漏而引起的編譯錯(cuò)誤或邏輯錯(cuò)誤。
return語(yǔ)句在使用時(shí)也需慎重，如果用表達(dá)式的執(zhí)行作為返回值，請(qǐng)把表達(dá)式和 return 放在同一行中，以免換行符被誤解析為語(yǔ)句的結(jié)束而引起返回錯(cuò)誤。return 關(guān)鍵字后若沒(méi)有返回表達(dá)式，則返回 undefined。構(gòu)造器的默認(rèn)返回值為 this。
清單 5. return 表達(dá)式
代碼:
- <script language="javascript">
- function F1 () {
- var valueA = 1;
- var valueB = 2;
- return valueA + valueB;
- }
- function F2 () {
- var valueA = 1;
- var valueB = 2;
- return
- valueA + valueB;
- }
- alert ( F1 () ); //output: 3
- alert ( F2 () ); //ouput: undefined
- </script>
在清單 5 中顯示了因返回表達(dá)式?jīng)]有和 return 關(guān)鍵字放在同一行而引起的返回錯(cuò)誤，需重視。
特殊符號(hào)
空白符
適當(dāng)?shù)目瞻仔锌梢源蟠筇岣叽a的可閱讀性，可以使代碼邏輯更清晰易懂。同時(shí)，在表達(dá)式中適當(dāng)?shù)牧艨瞻祝矔?huì)給代碼的閱讀帶來(lái)方便。
關(guān)鍵字的后面如有括號(hào)，則***在關(guān)鍵字和左括號(hào)'('之間留空白，如 for, if, while 等。而函數(shù)名和括號(hào)之間則不宜留空白，但若是匿名函數(shù)，則必須在 function 和左括號(hào)'('之間留空白，否則，編輯器會(huì)誤認(rèn)為函數(shù)名為 function。
在表達(dá)式中，二元運(yùn)算符 ( 除左括號(hào)'('，左方括號(hào)'['，作用域點(diǎn)'.') 和兩個(gè)操作數(shù)之間***留空白。一元運(yùn)算符(若不是詞 typeof 等)和其操作數(shù)之間不宜留空白。
逗號(hào)'，'的后面需要留空白，以顯示明確的參數(shù)間隔，變量間隔等。
分號(hào)';'之后通常表明表達(dá)語(yǔ)句的結(jié)束，而應(yīng)空行。在 for 的條件語(yǔ)句中，分號(hào)之后則應(yīng)該留空白。
{ } 和 [ ]
在 JavaScript 中，如需定義空對(duì)象和空數(shù)組，通常很自然地想到用 new Object () 和 new Array () 的方法。其實(shí)花括號(hào)'{}'和方括號(hào)'[]'可以直接用來(lái)定義一個(gè)空對(duì)象和一個(gè)空數(shù)組。這種書(shū)寫(xiě)方法可以使代碼看起來(lái)簡(jiǎn)單易懂。
== 和 ===
判斷"邏輯等"在代碼里太平常的不過(guò)事情了，但 JavaScript 與其他熟知的編程語(yǔ)言不同的是，除了可以使用兩個(gè)等號(hào)'=='來(lái)作判斷以為，還可以使用三個(gè)等號(hào)'==='來(lái)進(jìn)行邏輯等判斷。兩者的不同是'=='作邏輯等判斷時(shí)，會(huì)先進(jìn)行類(lèi)型轉(zhuǎn)換后再進(jìn)行比較。'==='則不會(huì)。因而，'=='進(jìn)行的判斷結(jié)果可能產(chǎn)生偏差。'!='與'!=='的區(qū)別亦是如此。本文提倡盡量使用'==='來(lái)進(jìn)行邏輯等的判斷，用'!=='進(jìn)行邏輯不等的判斷。
清單 6. === 的使用
代碼:
- <script language="javascript">
- var valueA = "1";
- var valueB = 1;
- if ( valueA == valueB) {
- alert ("Equal");
- }
- else {
- alert ("Not equal")
- }
- //output: "Equal"
- if ( valueA === valueB) {
- alert ("Equal");
- }
- else {
- alert ("Not equal")
- }
- //output: "Not equal"
- </script>
清單 6 中，valueA 和 valueB 兩個(gè)變量的值顯然是不相等的，起碼 valueA 是個(gè)字符串，而 valueB 是一個(gè)數(shù)字。但用'=='進(jìn)行判斷是，程序卻輸出相等的字樣。這是因?yàn)榫幾g器對(duì)兩個(gè)變量進(jìn)行比較時(shí)，因?yàn)樗麄兊念?lèi)型不同，而自動(dòng)地將 valueB 轉(zhuǎn)換成字符串，而后再和 valueA 進(jìn)行比較的。用'==='得到的判斷結(jié)果正和預(yù)期的結(jié)果相符。
+
加號(hào)'+'也同樣是程序員所熟知的操作符之一。JavaScript 和其他編程語(yǔ)言不同的是，在 JavaScript 中，'+'除了表示數(shù)字值相加，字符串相連接以外，還可以作一元運(yùn)算符用，把字符串轉(zhuǎn)換為數(shù)字。因而如果使用不當(dāng)，則可能與自增符'++'混淆而引起計(jì)算錯(cuò)誤。這一點(diǎn)，在清單 7 中可以清楚地看出。
清單 7. 巧用 + 號(hào)
代碼:
- <script language="javascript">
- var valueA = 20;
- var valueB = "10";
- alert ( valueA + valueB); //ouput: 2010
- alert ( valueA + (+valueB)); //output: 30
- alert ( valueA + +valueB); //output:30
- alert ( valueA ++valueB); //Compile error
- </script>
總結(jié)
本文就 JavaScript 代碼的排版、命名、聲明、語(yǔ)句、和一些特殊字符的使用等方面，談了自己對(duì) JavaScript 編程規(guī)范的建議。此外，還有許多方面需要深入了解研究，如 with, eval 語(yǔ)句和 this 對(duì)象的使用等等。我們?cè)谡J(rèn)識(shí)其普遍性的同時(shí)也需要注意其特殊性，在編寫(xiě)代碼時(shí)多用心留意，以創(chuàng)造更多更優(yōu)質(zhì)的程序代碼。
原文：http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/
【編輯推薦】
