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. 行結束的位置

代碼:

<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>

縮進

關於縮進的問題，不僅是 JavaScript，幾乎全部的語言編寫的時候，都會說起縮進的問題。縮進幾乎是代碼編寫規範的第一課，是代碼可閱讀性判斷的直接因素。

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

本文提倡用 4 個空格來進行縮進，並在同一產品中採用同一種縮進標準。不支持用 TAB 鍵進行縮進。這是由於直到如今尚未統一的標準來定義 TAB 鍵所代替的空白大小，有些編輯器解析爲 4 個空格大小，有些則解析爲 8 個。於是用不一樣的編輯器查看代碼，可能形成格式混亂。固然 TAB 簡單易用，爲解決這個問題，建議在設置開發環境時，將編輯器裏的 TAB 快捷鍵從新設置爲 4 個空格。據瞭解 Eclipse, Vi, Nodepad++，Editplus, UltraEdit 等流行的編輯器，均提供了此功能。

註釋

代碼中的註釋很重要，天然也是毋庸置疑的。一般咱們會強調代碼中註釋數量的多少，而輕視了對註釋質量的提升。編碼是及時添加註釋，會給後續代碼的維護人員帶來很大的便利。可是若是註釋不注意更新，或者因爲拷貝、粘貼引發的錯誤的註釋，則會誤導閱讀人員，反而給閱讀帶來障礙。

除了註釋要 及時更新外，咱們還應對註釋的內容要特別關注。註釋要儘可能簡單、清晰明瞭，避免使用含混晦澀的語言，同時着重 註釋的意義，對不太直觀的部分進行註解。請見清單 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 代碼中常常見到。"initialize valueA to be sero" 這樣的註釋有什麼用呢?難道閱讀程序的工程師從"var valueA = 0;"複製語句中看不出來麼?"set timeout to be 20s"這條註釋，不僅是因拷貝、粘貼引發的時間大小的錯誤，同時也誤導了程序員對這條語句的理解。setTimeout () 函數的做用並不是是設置函數執行的超時時間，而是等待必定時間後執行所調用的函數，害人匪淺呀。這樣的註釋內容寧肯刪掉。

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

標識符命名

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

◆ 以字母、下劃線'_'或美圓符號'$'開頭

◆ 容許名稱中包含字母，數字，下劃線'_'和美圓符號'$'

◆ 區分大小寫

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

聲明

變量的聲明

儘管 JavaScript 語言並不要求在變量使用前先對變量進行聲明。但咱們仍是應該養成這個好習慣。這樣能夠比較容易的檢測出那些未經聲明的變量，避免其變爲隱藏的全局變量，形成隱患。

在函數的開始應先用 var 關鍵字聲明函數中要使用的局部變量，註釋變量的功能及表明的含義，且應以字母順序排序。每一個變量單獨佔一行，以便添加註釋。這是由於 JavaScript 中只有函數的 {} 代表做用域，用 var 關鍵字聲明的局部變量只在函數內有效，而未經 var 聲明的變量則被視爲全局變量。咱們來看下清單 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>

從上例的輸出驚奇地發現，用 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=2
 _inF ();                         //error: innerF is not defined
 </script>

從清單 4 的輸出能夠看出，inF () 函數僅在 outF () 函數的內部生效，局部變量 innerA 對內部函數的做用域生效。這樣的編碼方式使得變量和函數的做用域變得清晰。

語句

對於簡單語句而言，須要說起的仍然是分號必要性，同時，一行最多有一個語句。若是一個賦值語句是用函數和對象來賦值，可能須要跨多行，必定切記要在賦值語句末加上分號。

這是由於 JavaScript 中，全部表達式均可以當語句，遇換行符時會解析爲表達式的結束，此時不規範的換行和分號的丟失，可能引入新的錯誤。

對於複合語句，if, for, while, do, switch, try … catch 等代碼體，函數定義的函數體，對象的定義等都須要放在花括號'{}'裏面。

◆ '{' 應在行末，標誌代碼塊的開始。

◆ '}' 應在一行開頭，標誌代碼塊的結束，同時須要和'{'所在行的開始對齊，以代表一個完整的複合語句段。這樣能夠極大地提升代碼的可閱讀性，控制邏輯能清晰地表現出來。

◆ 被包含的代碼段應該再縮進 4 個空格。

◆ 即便被包含的代碼段只有一句，也應該用花括號'{}'包含。儘管不用花括號代碼也不會錯，但如若須要增長語句的話，則較容易因花括號遺漏而引發的編譯錯誤或邏輯錯誤。

return語句在使用時也需慎重，若是用表達式的執行做爲返回值，請把表達式和 return 放在同一行中，以避免換行符被誤解析爲語句的結束而引發返回錯誤。return 關鍵字後若沒有返回表達式，則返回 undefined。構造器的默認返回值爲 this。

清單 5. return 表達式

代碼:

<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 中顯示了因返回表達式沒有和 return 關鍵字放在同一行而引發的返回錯誤，需重視。

特殊符號

空白符

適當的空白行能夠大大提升代碼的可閱讀性，可使代碼邏輯更清晰易懂。同時，在表達式中適當的留空白，也會給代碼的閱讀帶來方便。

關鍵字的後面若有括號，則最好在關鍵字和左括號'('之間留空白，如 for, if, while 等。而函數名和括號之間則不宜留空白，但如果匿名函數，則必須在 function 和左括號'('之間留空白，不然，編輯器會誤認爲函數名爲 function。

在表達式中，二元運算符 ( 除左括號'('，左方括號'['，做用域點'.') 和兩個操做數之間最好留空白。一元運算符(若不是詞 typeof 等)和其操做數之間不宜留空白。

逗號'，'的後面須要留空白，以顯示明確的參數間隔，變量間隔等。

分號';'以後一般代表表達語句的結束，而應空行。在 for 的條件語句中，分號以後則應該留空白。

{ } 和 [ ]

在 JavaScript 中，如需定義空對象和空數組，一般很天然地想到用 new Object () 和 new Array () 的方法。其實花括號'{}'和方括號'[]'能夠直接用來定義一個空對象和一個空數組。這種書寫方法可使代碼看起來簡單易懂。

== 和 ===

判斷"邏輯等"在代碼裏太日常的不過事情了，但 JavaScript 與其餘熟知的編程語言不一樣的是，除了可使用兩個等號'=='來做判斷覺得，還可使用三個等號'==='來進行邏輯等判斷。二者的不一樣是'=='做邏輯等判斷時，會先進行類型轉換後再進行比較。'==='則不會。於是，'=='進行的判斷結果可能產生誤差。'!='與'!=='的區別亦是如此。本文提倡儘可能使用'==='來進行邏輯等的判斷，用'!=='進行邏輯不等的判斷。

清單 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 兩個變量的值顯然是不相等的，起碼 valueA 是個字符串，而 valueB 是一個數字。但用'=='進行判斷是，程序卻輸出相等的字樣。這是由於編譯器對兩個變量進行比較時，由於他們的類型不一樣，而自動地將 valueB 轉換成字符串，然後再和 valueA 進行比較的。用'==='獲得的判斷結果正和預期的結果相符。

+

加號'+'也一樣是程序員所熟知的操做符之一。JavaScript 和其餘編程語言不一樣的是，在 JavaScript 中，'+'除了表示數字值相加，字符串相鏈接之外，還能夠做一元運算符用，把字符串轉換爲數字。於是若是使用不當，則可能與自增符'++'混淆而引發計算錯誤。這一點，在清單 7 中能夠清楚地看出。

清單 7. 巧用 + 號

代碼:

<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>