JavaScript 程式編碼規範

軟體的長期價值直接源於其編碼品質。在它的整個生命週期裡,一個程式可能會被許多人閱讀或修改。如果一個程式可以清晰的展現出它的結構和特徵,那就能減少在以後對其進行修改時出錯的可能性。編程規範可以協助程式員們增加程式的健壯性。

所有的JavaScript代碼都是暴露給公眾的。所以我們更應該保證其品質。保持整潔很重要。

JavaScript檔案

JavaScript程式應獨立儲存在尾碼名為.js的檔案中。

JavaScript代碼不應該被包含在HTML檔案中,除非這是段特定只屬於此部分的代碼。在HTML中的JavaScript代碼會明顯增加檔案大小,而且也不能對其進行緩衝和壓縮。

filename.js 應盡量放到body的後面。這樣可以減少因為載入script而造成其他頁面內容載入也被延遲的問題。也沒有必要使用 language或者type屬性。MIME類型是由伺服器而非scripttag來決定的。

縮排

縮排的單位為四個空格。避免使用Tab鍵來縮排(即使現在已經是21世紀了),也始終沒有個統一的Tab長短標準。雖然使用空格會增加檔案的大小,但在區域網路中幾乎可以忽略,且在 最小化過程中也可被消除掉。

每行長度

避免每行超過80個字元。當一條語句一行寫不下時,請考慮折行。在運算子號,最好是逗號後換行。在運算子後換行可以減少因為複製粘貼產生的錯誤被分號掩蓋的幾率。下一行應該縮排8個空格。

注釋

不要吝嗇注釋。給以後需要理解你的代碼的人們(或許就是你自己)留下資訊是非常有用的。注釋應該和它們所注釋的代碼一樣是書寫良好且清晰明了。偶爾的小幽默就更不錯了。記得要避免冗長或者情緒化。

及時地更新注釋也很重要。錯誤的注釋會讓程式更加難以閱讀和理解。

讓注釋有意義。重點在解釋那些不容易立即明白的邏輯上。不要把讀者的時間浪費在閱讀類似於:

  i = 0; //讓i等於0

使用單行注釋。塊注釋用於注釋正式文檔和無用代碼。

變數聲明

所有的變數必須在使用前進行聲明。JavaScript並不強制必須這麼做,但是這麼做可以讓程式易於閱讀,且也容易發現那些沒聲明的變數(它們會被編譯成全域變數)。

將var語句放在函數的首部

最好把每個變數的聲明語句單獨放到一行,並加上注釋說明。所有變數按照字母排序。

  var currentEntry; // 當前選擇項    var level;    // 縮排程度    var size;     // 表格大小

JavaScript沒有區塊範圍,所以在塊裡面定義變數很容易引起C/C++/Java程式員們的誤解。在函數的首部定義所有的變數。

盡量減少全域變數的使用。不要讓局部變數覆蓋全域變數。

函式宣告

所有的函數在使用前進行聲明。 內函數的聲明跟在var語句的後面。這樣可以協助判斷哪些變數是在函數範圍內的。

函數名與((左括弧)之間不應該有空格。) (右括弧)與 開始程式體的{(左大括弧)之間應插入一個空格。函數程式體應縮排四個空格。 }(右大括弧)與聲明函數的那一行代碼頭部對齊。

  function outer(c, d) {    var e = c * d;    function inner(a, b) {      return (e * a) + b;    }    return inner(0, 1);  }

下面這種書寫方式可以在JavaScript中正常使用,因為在JavaScript中,函數和對象的聲明可以放到任何錶達式允許的地方。且它讓內嵌函式和混合結構具有最好的可讀性。

  function getElementsByClassName(className) {    var results = [];    walkTheDOM(document.body, function (node) {      var a;         // 類名數組      var c = node.className; // 節點的類名      var i;         // 迴圈計數器// If the node has a class name, then split it into a list of simple names.// If any of them match the requested name, then append the node to the set of results.      if (c) {        a = c.split(' ');        for (i = 0; i < a.length; i += 1) {          if (a[i] === className) {            results.push(node);            break;          }        }      }    });    return results;  }

如果函數是匿名函數,則在function和((左括弧)之間應有一個空格。如果省略了空格,否則會讓人感覺函數名叫作 function。

  div.onclick = function (e) {    return false;  };  that = {    method: function () {      return this.datum;    },    datum: 0  };

盡量不使用全域函數。

命名

變數名應由26個大小寫字母(A..Z,a..z),10個數字( 0..9),和_(底線)組成。避免使用國際化字元(如中文),因為它們不是在任何地方都可以被方便的閱讀和理解。不要在命名中使用 $(貨幣符號)或者(反斜線)。

不要把_(底線)作為變數名的第一個字元。它有時用來表示私人變數,但實際上JavaScript並沒提供私人變數的功能。如果私人變數很重要, 那麼使用私人成員的形式。應避免使用這種容易讓人誤解的命名習慣。

大多數的變數名和方法命應以小寫字母開頭。

必須與 new共同使用的建構函式名應以大寫字母開頭。當new被省略時JavaScript不會有任何編譯錯誤或運行錯誤拋出。忘記加 new時會讓不好的事情發生(比如被當成一般的函數),所以大寫建構函式名是我們來盡量避免這種情況發生的唯一辦法。

全域變數應該全部大寫。(JavaScript沒有宏或者常量,所以不會因此造成誤會)

語句簡單語句

每一行最多隻包含一條語句。把;(分號)放到每條簡單語句的結尾處。注意一個函數賦值或對象指派陳述式也是指派陳述式,應該以分號結尾。

JavaScript可以把任何錶達式當作一條語句。這很容易隱藏一些錯誤,特別是誤加分號的錯誤。只有在賦值和調用時,運算式才應被當作一條單獨的語句。

複合陳述式

複合陳述式是被包含在{ }(大括弧)的語句序列。

• * 被括起的語句必須多縮排四個空格。
• * {(左大括弧)應在複合陳述式其實行的結尾處。
• * }(右大括弧)應與{(左大括弧)的那一行的開頭對齊
• * 大括弧應該在所有複合陳述式中使用,即使只有一條語句,當它們是控制結構的一部分時, 比如一個if或者for語句。這樣做可以避免以後添加語句時造成的錯誤。

標示

語句標示是可選的,只有以下語句必須被標示:while, do,for,switch。

return 語句

一條有傳回值的return語句不要使用( )(括弧)來括住傳回值。如果返回運算式,則運算式應與return 關鍵字在同一行,以避免誤加分號錯誤。

if 語句

if語句應如以下格式:

  if (condition){    statements;  }    if (condition) {    statements;  } else {    statements;  }    if (condition) {    statements;  } else if (condition) {    statements;  } else {    statements;  }

for 語句

for語句應如以下格式:

  for (initialization;condition ; update) {    statements;  }  for (variable in object)if (filter) {    statements;  }

第一種形式的迴圈用於已經知道相關參數的數組迴圈。

第二種形式應用於對象中。object原型中的成員將會被包含在迭代器中。通過預先定義hasOwnProperty方法來區分真正的 object成員是個不錯方法:

  for (variablein object) if (object.hasOwnProperty(variable )){    statements;  }

while 語句

while語句應如以下格式:

  while (condition){    statements;  }

do 語句

do語句應如以下格式:

  do {    statements;  } while (condition);

不像別的複合陳述式,do語句總是以;(分號)結尾。

switch 語句

switch語句應如以下格式:

  switch (expression){  case expression:    statements;  default:    statements;  }

每個 case與switch對齊。這可避免過分縮排。

每一組statements(除了default應以 break,return,或者throw結尾。不要讓它順次往下執行。

try 語句

try語句應如以下格式:

  try {    statements;  } catch (variable){    statements;  }  try {    statements;  } catch (variable){    statements;  } finally {    statements;  }

continue 語句

避免使用continue語句。它很容易使得程式的邏輯過程晦澀難懂。

with 語句

不要使用with語句。

空白

用空行來將邏輯相關的代碼塊分割開可以提高程式的可讀性。

空格應在以下情況時使用:

• * 跟在((左括弧)後面的關鍵字應被一個空格隔開。while (true) {
• * 函數參數與((左括弧)之間不應該有空格。這能協助區分關鍵字和函數調用。
• * 所有的二元操作符,除了.(點) 和((左括弧)和 [(左方括弧)應用空格將其與運算元隔開。
• * 一元操作符與其運算元之間不應有空格,除非操作符是個單詞,比如typeof。
• * 每個在控制部分,比如for 語句中的; (分號)後須跟一個空格。
• * 每個,(逗號)後應跟一個空格。

另外的建議{} 和[]

使用{}代替new Object()。使用[]代替new Array()。

當成員名是一組有序的數字時使用數組來儲存資料。當成員名是無規律的字串或其他時使用對象來儲存資料。

,(逗號)操作符

避免使用逗號操作符,除非在特定的for 語句的控制部分。(這不包括那些被用在對象定義,數組定義,var語句,和參數列表中的逗號分隔字元。)

範圍

在JavaScript中塊沒有域。只有函數有域。不要使用塊,除非在複合陳述式中。

賦值運算式

避免在if和while語句的條件部分進行賦值。

  if (a = b) {

是一條正確語句?或者

  if (a == b) {

才是對的?避免這種不容易判斷對錯的結構。

===和!==操作符。

使用===和!==操作符會相對好點。==和!=操作符會進行類型強制轉換。 特別是, 不要將==用於與錯值比較( false,null,undefined,“”, 0,NaN)。

令人迷惑的加號和減號

小心在+後緊跟+或++。這種形式很容易仍人迷惑。應插入括弧以便於理解。

  total = subtotal + +myInput.value;

最好能寫成

  total = subtotal + (+myInput.value);

這樣+ +不會被誤認為是++。

eval 是惡魔

eval是JavaScript中最容易被濫用的方法。避免使用它。

eval有別名。不要使用Function構造器。不要給setTimeout或者 setInterval傳遞字串參數。