DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> javascript編程語言的編碼規范
javascript編程語言的編碼規范
編輯: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 中以

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

  語句

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

  這是因為 javascript 中,所有表達式都可以當語句,遇換行符時會解析為表達式的結束,此時不規范的換行和分號的丟失,可能引入新的錯誤。

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

  '{' 應在行末,標志代碼塊的開始。

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

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

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

  總結

  本文就 JavaScript 代碼的排版、命名、聲明、語句、和一些特殊字符的使用等方面,談了自己對 JavaScript 編程規范的建議。此外,還有許多方面需要深入了解研究,如 with, eval 語句和 this 對象的使用等等。我們在認識其普遍性的同時也需要注意其特殊性,在編寫代碼時多用心留意,以創造更多更優質的程序代碼。

  聲明

  本文所提及的 JavaScript 編程規范的建議是在學習和工作中歸納出來的,僅供技術交流使用。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved