JavaScript腳本編寫規范

對於熟悉 C/C++ 或 Java 語言的工程師來說，JavaScript 顯得靈活，簡單易懂，對代碼的格式的要求也相對松散。很容易學習，並運用到自己的代碼中。也正因為這樣，JavaScript 的編碼規范也往往被輕視，開發過程中修修補補，最終也就演變成為後續維護人員的惡夢。軟件存在的長期價值直接與編碼的質量成比例。編碼規范能幫助我們降低編程中不必要的麻煩。而 JavaScript 代碼是直接發送給客戶浏覽器的，直接與客戶見面，編碼的質量更應該受到關注。 

本文淺談 JavaScript 編程中關於編碼規范的問題，分析其中緣由。希望引起更多 Web 開發人員對 JavaScript 編碼規范問題的關注和對軟件產品質量問題的重視。 

前言 

提及 C/C++ 和 Java 編碼規范，相信許多工程師並不生疏。但說到 JavaScript 語言的編碼規范，也許您會忍俊不禁。JavaScript 不是語法很靈活嗎？變量隨時用隨時可以聲明；語句結束符可以不要；字符串和數字也可以相加；參數多一個少一個也不會報錯。沒錯，當您從 C/C++ 和 Java 嚴格的語法規定之下，轉向 JavaScript 語言，會覺得自由了很多，輕松了很多。語法松散是 JavaScript 重要的特征。它靈活易懂，給開發人員帶來了很多方便，但如果編寫過程中不注意，代碼的調試成本和維護成本則會無形地增加。 

JavaScript 編碼會隨應被直接發送到客戶端的浏覽器，代碼規范不只是代碼質量的保證，也影響到產品的長期信譽。希望 JavaScript 編程語言的規范問題也能同樣引起更多朋友的關注。 

JavaScript 編碼規范建議 

本文就 JavaScript 編碼過程中涉及的排版、命名、聲明、作用域、及一些特殊符號的使用等方面，根據個人在學習工作中的總結，給出自己的一些建議，並分析其中緣由，以供參考。 

JavaScript 文件引用 

JavaScript 程序應該盡量放在 .js 的文件中，需要調用的時候在 HTML 中以 <script src="filename.js"> 的形式包含進來。JavaScript 代碼若不是該 HTML 文件所專用的，則應盡量避免在 HTML 文件中直接編寫 JavaScript 代碼。因為這樣會大大增加 HTML 文件的大小，無益於代碼的壓縮和緩存的使用。 

另外，<script src="filename.js"> 標簽應盡量放在文件的後面。這樣會降低因加載 JavaScript 代碼而影響頁面中其它組件的加載時間。 

代碼排版 

行長度 

每行代碼應小於 80 個字符。如果代碼較長，應盡量選擇換行，下一行代碼應縮進 8 個空格。這樣可以使代碼排版整齊，減輕閱讀代碼的疲勞感。換行縮進 8 個空格可以和代碼段的縮進 4 個空格區分開，以增強代碼的可閱讀性。 

行結束 

JavaScript 語句應該以分號結束。但大多數浏覽器允許不寫分號，只要在本應是分號的地方有一個換行符就行。但是如果代碼行較長需要換行的時候，有哪些注意事項呢？換行應選擇在操作符和標點符號之後，最好是在逗號’,’之後，而不要在變量名、字符串、數字、或’)’ ’]’ ’++’ ’--’等符號之後換行。 

這樣可以有效的防止拷貝、粘貼而引起的錯誤，並可有效地增強代碼的可閱讀性。請見清單 1，代碼的輸出符合我們的期望。但就寫法而言，對 valueB 的賦值語句是在變量 valueA 之後進行的換行，這很容易被誤解為 valueB=ValueA，給閱讀造成障礙。而對 valueC 的復制語句是在’+’之後進行的換行，就容易理解的多。這也是本文所提倡的換行方式。 

清單 1. 行結束的位置 

縮進 

關於縮進的問題，不只是 JavaScript，幾乎所有的語言編寫的時候，都會提及縮進的問題。縮進幾乎是代碼編寫規范的第一課，是代碼可閱讀性判斷的直接因素。 

代碼縮進的好處是不言而喻的，但是對於如何縮進，則沒有標准而言。最受歡迎的是方便使用 TAB 鍵縮進，也有些喜歡用 2 個、4 個、8 個空格進行縮進。這樣縮進風格不一，也同樣給代碼的閱讀帶來障礙。 

本文提倡用 4 個空格來進行縮進，並在同一產品中采用同一種縮進標准。不支持用 TAB 鍵進行縮進。這是因為直到現在還沒有統一的標准來定義 TAB 鍵所代替的空白大小，有些編輯器解析為 4 個空格大小，有些則解析為 8 個。因而用不同的編輯器查看代碼，可能造成格式混亂。 

當然 TAB 簡單易用，為解決這個問題，建議在設置開發環境時，將編輯器裡的 TAB 快捷鍵重新設置為 4 個空格。據了解 Eclipse, Vi, Nodepad++，Editplus, UltraEdit 等流行的編輯器，均提供了此功能。

注釋

代碼中的注釋很重要，自然也是毋庸置疑的。通常我們會強調代碼中注釋數量的多少，而輕視了對注釋質量的提高。編碼是及時添加注釋，會給後續代碼的維護人員帶來很大的便利。但是如果注釋不注意更新，或者由於拷貝、粘貼引起的錯誤的注釋，則會誤導閱讀人員，反而給閱讀帶來障礙。

除了注釋要 及時更新外，我們還應對注釋的內容要特別關注。注釋要盡量簡單、清晰明了，避免使用含混晦澀的語言，同時著重 注釋的意義，對不太直觀的部分進行注解。請見清單 2。

清單 2. 有意義的注釋

這樣的注釋方式在 JavaScript 代碼中經常見到。"initialize valueA to be sero" 這樣的注釋有什麼用呢？難道閱讀程序的工程師從"var valueA = 0;"復制語句中看不出來麼？"set timeout to be 20s"這條注釋，不只是因拷貝、粘貼引起的時間大小的錯誤，同時也誤導了程序員對這條語句的理解。setTimeout() 函數的作用並非是設置函數執行的超時時間，而是等待一定時間後執行所調用的函數，害人匪淺呀。這樣的注釋內容寧可刪掉。

此外，JavaScript 的注釋有兩種"//" 和"/* .... */"，建議"//"用作代碼行注釋，"/* .... */"形式用作對整個代碼段的注銷，或較正式的聲明中，如函數參數、功能、文件功能等的描述中。

標識符命名

JavaScript 中的標識符的命名規則：

• 以字母、下劃線'_'或美元符號'$'開頭
• 允許名稱中包含字母，數字，下劃線'_'和美元符號'$'
• 區分大小寫

變量、參數、成員變量、函數等名稱均以小寫字母開頭，構造器的名稱以大寫字母開頭。下劃線'_'開頭的變量一般習慣於標識私有 / 局部成員。而美元符號'$'開頭的變量習慣於標識系統相關，比如系統進程等。應避免用下劃線'_'或美元符號'$'來命名標識符。盡可能地降低代碼的閱讀負擔。

聲明

變量的聲明

盡管 JavaScript 語言並不要求在變量使用前先對變量進行聲明。但我們還是應該養成這個好習慣。這樣可以比較容易的檢測出那些未經聲明的變量，避免其變為隱藏的全局變量，造成隱患。

在函數的開始應先用 var 關鍵字聲明函數中要使用的局部變量，注釋變量的功能及代表的含義，且應以字母順序排序。每個變量單獨占一行，以便添加注釋。這是因為 JavaScript 中只有函數的 {} 表明作用域，用 var 關鍵字聲明的局部變量只在函數內有效，而未經 var 聲明的變量則被視為全局變量。我們來看下清單 3。

清單 3. 局部變量聲明

從上例的輸出驚奇地發現，用 var 聲明過的變量 valueA 和沒有聲明的變量 valueB 是有區別的。特別需要注意的是，在函數內部用 var 聲明的變量為局部變量，這樣可以有效地避免因局部變量和全局變量同名而產生的錯誤。

函數的聲明

函數也應在調用前進行聲明，內部函數應在 var 聲明內部變量的語句之後聲明，可以清晰地表明內部變量和內部函數的作用域。

此外，函數名緊接左括號'('之間，而右括號')'和後面的'{'之間要有個空格，以清楚地顯示函數名以其參數部分，和函數體的開始。若函數為匿名 / 無名函數，則 function 關鍵字和左括號'('之間要留空格，否則可能誤認為該函數的函數名為 function。

清單 4. 內部函數聲明 

<script language="javascript">  
 var innerA = 1;  
 function outF() {  
   var innerA = 2;  
   function _inF() {  
       alert("valueA="+innerA);  
   }  
   _inF();  
 }  
 outF();                         //output: valueA