淺談JavaScript編程語言的編碼規(guī)范

1、簡介：JavaScript 編程語言作為最流行的客戶端腳本語言，早已被眾多 Web 開發(fā)人員所熟悉。隨著 Web2.0 時代的到來和 Ajax 技術的廣泛應用，JavaScript 也逐漸吸引著更多的視線。工作中要求越多的是對 JavaScript 語言的深入學習，靈活運用，和對編碼質量的保證。對于熟悉 C/C+ 或 Java 語言的工程師來說，JavaScript 顯得靈活，簡單易懂，對代碼的格式的要求也相對松散。很容易學習，并運用到自己的代碼中。也正因為這樣，JavaScript 的編碼規(guī)范也往往被輕視，開發(fā)過程中修修補補，最終也就演變成為后續(xù)維護人員的惡夢。軟件存在的長期價值直接與編碼的

2、質量成比例。編碼規(guī)范能幫助我們降低編程中不必要的麻煩。而 JavaScript 代碼是直接發(fā)送給客戶瀏覽器的，直接與客戶見面，編碼的質量更應該受到關注。本文淺談 JavaScript 編程中關于編碼規(guī)范的問題，分析其中緣由。希望引起更多 Web 開發(fā)人員對 JavaScript 編碼規(guī)范問題的關注和對軟件產(chǎn)品質量問題的重視。前言提及 C/C+ 和 Java 編碼規(guī)范，相信許多工程師并不生疏。但說到 JavaScript 語言的編碼規(guī)范，也許您會忍俊不禁。JavaScript 不是語法很靈活嗎？變量隨時用隨時可以聲明；語句結束符可以不要；字符串和數(shù)字也可以相加；參數(shù)多一個少一個也不會報錯。沒錯，

3、當您從 C/C+ 和 Java 嚴格的語法規(guī)定之下，轉向 JavaScript 語言，會覺得自由了很多，輕松了很多。語法松散是 JavaScript 重要的特征。它靈活易懂，給開發(fā)人員帶來了很多方便，但如果編寫過程中不注意，代碼的調試成本和維護成本則會無形地增加。JavaScript 編碼會隨應被直接發(fā)送到客戶端的瀏覽器，代碼規(guī)范不只是代碼質量的保證，也影響到產(chǎn)品的長期信譽。希望 JavaScript 編程語言的規(guī)范問題也能同樣引起更多朋友的關注。JavaScript 編碼規(guī)范建議本文就 JavaScript 編碼過程中涉及的排版、命名、聲明、作用域、及一些特殊符號的使用等方面，根據(jù)個人在學習

4、工作中的總結，給出自己的一些建議，并分析其中緣由，以供參考。JavaScript 文件引用JavaScript 程序應該盡量放在 .js 的文件中，需要調用的時候在 HTML 中以 的形式包含進來。JavaScript 代碼若不是該 HTML 文件所專用的，則應盡量避免在 HTML 文件中直接編寫 JavaScript 代碼。因為這樣會大大增加 HTML 文件的大小，無益于代碼的壓縮和緩存的使用。另外， 標簽應盡量放在文件的后面。這樣會降低因加載 JavaScript 代碼而影響頁面中其它組件的加載時間。代碼排版行長度每行代碼應小于 80 個字符。如果代碼較長，應盡量選擇換行，下一行代碼應縮進

5、 8 個空格。這樣可以使代碼排版整齊，減輕閱讀代碼的疲勞感。換行縮進 8 個空格可以和代碼段的縮進 4 個空格區(qū)分開，以增強代碼的可閱讀性。行結束JavaScript 語句應該以分號結束。但大多數(shù)瀏覽器允許不寫分號，只要在本應是分號的地方有一個換行符就行。但是如果代碼行較長需要換行的時候，有哪些注意事項呢？換行應選擇在操作符和標點符號之后，最好是在逗號,之后，而不要在變量名、字符串、數(shù)字、或) + -等符號之后換行。這樣可以有效的防止拷貝、粘貼而引起的錯誤，并可有效地增強代碼的可閱讀性。請見清單1，代碼的輸出符合我們的期望。但就寫法而言，對 valueB 的賦值語句是在變量 valueA 之后

6、進行的換行，這很容易被誤解為 valueB=ValueA，給閱讀造成障礙。而對 valueC 的復制語句是在+之后進行的換行，就容易理解的多。這也是本文所提倡的換行方式。清單 1. 行結束的位置代碼: var valueA = 1; var valueB = valueA /bad +1; var valueC = valueB + /good valueA; alert (valueB); /output: valueB=2 alert (valueC); /output: valueC=3 縮進關于縮進的問題，不只是 JavaScript，幾乎所有的語言編寫的時候，都會提及縮進的問題?？s進

7、幾乎是代碼編寫規(guī)范的第一課，是代碼可閱讀性判斷的直接因素。代碼縮進的好處是不言而喻的，但是對于如何縮進，則沒有標準而言。最受歡迎的是方便使用 TAB 鍵縮進，也有些喜歡用 2 個、4 個、8 個空格進行縮進。這樣縮進風格不一，也同樣給代碼的閱讀帶來障礙。本文提倡用4個空格來進行縮進，并在同一產(chǎn)品中采用同一種縮進標準。不支持用 TAB 鍵進行縮進。這是因為直到現(xiàn)在還沒有統(tǒng)一的標準來定義 TAB 鍵所代替的空白大小，有些編輯器解析為 4 個空格大小，有些則解析為 8 個。因而用不同的編輯器查看代碼，可能造成格式混亂。當然 TAB 簡單易用，為解決這個問題，建議在設置開發(fā)環(huán)境時，將編輯器里的 TAB

8、 快捷鍵重新設置為 4 個空格。據(jù)了解 Eclipse, Vi, Nodepad+，Editplus, UltraEdit 等流行的編輯器，均提供了此功能。注釋代碼中的注釋很重要，自然也是毋庸置疑的。通常我們會強調代碼中注釋數(shù)量的多少，而輕視了對注釋質量的提高。編碼是及時添加注釋，會給后續(xù)代碼的維護人員帶來很大的便利。但是如果注釋不注意更新，或者由于拷貝、粘貼引起的錯誤的注釋，則會誤導閱讀人員，反而給閱讀帶來障礙。除了注釋要及時更新外，我們還應對注釋的內容要特別關注。注釋要盡量簡單、清晰明了，避免使用含混晦澀的語言，同時著重注釋的意義，對不太直觀的部分進行注解。請見清單 2。清單 2. 有意義

9、的注釋代碼: /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) . 這樣的注釋方式在 JavaScript 代碼中經(jīng)常見到。initialize val

10、ueA to be sero 這樣的注釋有什么用呢？難道閱讀程序的工程師從var valueA = 0;復制語句中看不出來么？set timeout to be 20s這條注釋，不只是因拷貝、粘貼引起的時間大小的錯誤，同時也誤導了程序員對這條語句的理解。setTimeout () 函數(shù)的作用并非是設置函數(shù)執(zhí)行的超時時間，而是等待一定時間后執(zhí)行所調用的函數(shù)，害人匪淺呀。這樣的注釋內容寧可刪掉。此外，JavaScript 的注釋有兩種/ 和/* . */，建議/用作代碼行注釋，/* . */形式用作對整個代碼段的注銷，或較正式的聲明中，如函數(shù)參數(shù)、功能、文件功能等的描述中。標識符命名JavaScr

11、ipt 中的標識符的命名規(guī)則： 以字母、下劃線_或美元符號$開頭 允許名稱中包含字母，數(shù)字，下劃線_和美元符號$ 區(qū)分大小寫變量、參數(shù)、成員變量、函數(shù)等名稱均以小寫字母開頭，構造器的名稱以大寫字母開頭。下劃線_開頭的變量一般習慣于標識私有/局部成員。而美元符號$開頭的變量習慣于標識系統(tǒng)相關，比如系統(tǒng)進程等。應避免用下劃線_或美元符號$來命名標識符。盡可能地降低代碼的閱讀負擔。聲明變量的聲明盡管 JavaScript 語言并不要求在變量使用前先對變量進行聲明。但我們還是應該養(yǎng)成這個好習慣。這樣可以比較容易的檢測出那些未經(jīng)聲明的變量，避免其變?yōu)殡[藏的全局變量，造成隱患。在函數(shù)的開始應先用 var

12、關鍵字聲明函數(shù)中要使用的局部變量，注釋變量的功能及代表的含義，且應以字母順序排序。每個變量單獨占一行，以便添加注釋。這是因為 JavaScript 中只有函數(shù)的 表明作用域，用 var 關鍵字聲明的局部變量只在函數(shù)內有效，而未經(jīng) var 聲明的變量則被視為全局變量。我們來看下清單 3。清單 3. 局部變量聲明代碼: var valueA = a; var valueB = b; function f1 () var valueA = c; alert (valueA=+valueA); /output: valueA=c valueB = d; alert (valueB=+valueB);

13、/output: valueB=d f1 (); alert (valueA=+valueA); /output: valueA=a alert (valueB=+valueB); /output: valueB=d 從上例的輸出驚奇地發(fā)現(xiàn)，用 var 聲明過的變量 valueA 和沒有聲明的變量 valueB 是有區(qū)別的。特別需要注意的是，在函數(shù)內部用 var 聲明的變量為局部變量，這樣可以有效地避免因局部變量和全局變量同名而產(chǎn)生的錯誤。函數(shù)的聲明函數(shù)也應在調用前進行聲明，內部函數(shù)應在 var 聲明內部變量的語句之后聲明，可以清晰地表明內部變量和內部函數(shù)的作用域。此外，函數(shù)名緊接左括號(之間

14、，而右括號)和后面的之間要有個空格，以清楚地顯示函數(shù)名以其參數(shù)部分，和函數(shù)體的開始。若函數(shù)為匿名/無名函數(shù)，則 function 關鍵字和左括號(之間要留空格，否則可能誤認為該函數(shù)的函數(shù)名為 function。清單 4. 內部函數(shù)聲明代碼: var innerA = 1; function outF () var innerA = 2; function _inF () alert (valueA=+innerA); _inF (); outF (); /output: valueA=2 _inF (); /error: innerF is not defined 從清單 4 的輸出可以看出，

15、inF () 函數(shù)僅在 outF () 函數(shù)的內部生效，局部變量 innerA 對內部函數(shù)的作用域生效。這樣的編碼方式使得變量和函數(shù)的作用域變得清晰。語句對于簡單語句而言，需要提及的仍然是分號必要性，同時，一行最多有一個語句。如果一個賦值語句是用函數(shù)和對象來賦值，可能需要跨多行，一定切記要在賦值語句末加上分號。這是因為 JavaScript 中，所有表達式都可以當語句，遇換行符時會解析為表達式的結束，此時不規(guī)范的換行和分號的丟失，可能引入新的錯誤。對于復合語句，if, for, while, do, switch, try catch 等代碼體，函數(shù)定義的函數(shù)體，對象的定義等都需要放在花括號里

16、面。 應在行末，標志代碼塊的開始。 應在一行開頭，標志代碼塊的結束，同時需要和所在行的開始對齊，以表明一個完整的復合語句段。這樣可以極大地提高代碼的可閱讀性，控制邏輯能清晰地表現(xiàn)出來。 被包含的代碼段應該再縮進 4 個空格。 即使被包含的代碼段只有一句，也應該用花括號包含。盡管不用花括號代碼也不會錯，但如若需要增加語句的話，則較容易因花括號遺漏而引起的編譯錯誤或邏輯錯誤。return語句在使用時也需慎重，如果用表達式的執(zhí)行作為返回值，請把表達式和 return 放在同一行中，以免換行符被誤解析為語句的結束而引起返回錯誤。return 關鍵字后若沒有返回表達式，則返回 undefined。構造器

17、的默認返回值為 this。清單 5. return 表達式代碼: 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 在清單 5 中顯示了因返回表達式?jīng)]有和 return 關鍵字放在同一行而引起的返回錯誤，需重視。特殊符號空白符適當?shù)目瞻仔锌?/p>

18、以大大提高代碼的可閱讀性，可以使代碼邏輯更清晰易懂。同時，在表達式中適當?shù)牧艨瞻?，也會給代碼的閱讀帶來方便。關鍵字的后面如有括號，則最好在關鍵字和左括號(之間留空白，如 for, if, while 等。而函數(shù)名和括號之間則不宜留空白，但若是匿名函數(shù)，則必須在 function 和左括號(之間留空白，否則，編輯器會誤認為函數(shù)名為 function。在表達式中，二元運算符 ( 除左括號(，左方括號，作用域點.) 和兩個操作數(shù)之間最好留空白。一元運算符（若不是詞 typeof 等）和其操作數(shù)之間不宜留空白。逗號,的后面需要留空白，以顯示明確的參數(shù)間隔，變量間隔等。分號;之后通常表明表達語句的結束，

19、而應空行。在 for 的條件語句中，分號之后則應該留空白。 和 在 JavaScript 中，如需定義空對象和空數(shù)組，通常很自然地想到用 new Object () 和 new Array () 的方法。其實花括號和方括號可以直接用來定義一個空對象和一個空數(shù)組。這種書寫方法可以使代碼看起來簡單易懂。= 和 =判斷邏輯等在代碼里太平常的不過事情了，但 JavaScript 與其他熟知的編程語言不同的是，除了可以使用兩個等號=來作判斷以為，還可以使用三個等號=來進行邏輯等判斷。兩者的不同是=作邏輯等判斷時，會先進行類型轉換后再進行比較。=則不會。因而，=進行的判斷結果可能產(chǎn)生偏差。!=與!=的區(qū)別亦是如此。本文提倡盡量使用=來進行邏輯等的判斷，用!=進行邏輯不等的判斷。清單 6. = 的使用代碼: 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 清單 6 中，valueA 和 valueB 兩個變量