軟件的長期價(jià)值直接源于其編碼質(zhì)量。在它的整個(gè)生命周期里,一個(gè)程序可能會(huì)被許多人閱讀或修改。如果一個(gè)程序可以清晰的展現(xiàn)出它的結(jié)構(gòu)和特征,那就能減少在以后對(duì)其進(jìn)行修改時(shí)出錯(cuò)的可能性。編程規(guī)范可以幫助程序員們增加程序的健壯性。

所有的JavaScript代碼都是暴露給公眾的。所以我們更應(yīng)該保證其質(zhì)量。保持整潔很重要。

JavaScript文件

JavaScript程序應(yīng)獨(dú)立保存在后綴名為.js的文件中。

JavaScript代碼不應(yīng)該被包含在HTML文件中,除非這是段特定只屬于此部分的代碼。在HTML中的JavaScript代碼會(huì)明顯增加文件大小,而且也不能對(duì)其進(jìn)行緩存和壓縮。

filename.js 應(yīng)盡量放到body的后面。這樣可以減少因?yàn)檩d入script而造成其他頁面內(nèi)容載入也被延遲的問題。也沒有必要使用 language或者type屬性。MIME類型是由服務(wù)器而非scripttag來決定的。

縮進(jìn)

縮進(jìn)的單位為四個(gè)空格。避免使用Tab鍵來縮進(jìn)(即使現(xiàn)在已經(jīng)是21世紀(jì)了),也始終沒有個(gè)統(tǒng)一的Tab長短標(biāo)準(zhǔn)。雖然使用空格會(huì)增加文件的大小,但在局域網(wǎng)中幾乎可以忽略,且在 最小化過程中也可被消除掉。

每行長度

避免每行超過80個(gè)字符。當(dāng)一條語句一行寫不下時(shí),請考慮折行。在運(yùn)算符號(hào),最好是逗號(hào)后換行。在運(yùn)算符后換行可以減少因?yàn)閺?fù)制粘貼產(chǎn)生的錯(cuò)誤被分號(hào)掩蓋的幾率。下一行應(yīng)該縮進(jìn)8個(gè)空格。

注釋

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

及時(shí)地更新注釋也很重要。錯(cuò)誤的注釋會(huì)讓程序更加難以閱讀和理解。

讓注釋有意義。重點(diǎn)在解釋那些不容易立即明白的邏輯上。不要把讀者的時(shí)間浪費(fèi)在閱讀類似于:

  i = 0; //讓i等于0

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

變量聲明

所有的變量必須在使用前進(jìn)行聲明。JavaScript并不強(qiáng)制必須這么做,但是這么做可以讓程序易于閱讀,且也容易發(fā)現(xiàn)那些沒聲明的變量(它們會(huì)被編譯成全局變量)。

將var語句放在函數(shù)的首部

最好把每個(gè)變量的聲明語句單獨(dú)放到一行,并加上注釋說明。所有變量按照字母排序。

  var currentEntry; // 當(dāng)前選擇項(xiàng)    var level;    // 縮進(jìn)程度    var size;     // 表格大小

JavaScript沒有塊范圍,所以在塊里面定義變量很容易引起C/C++/Java程序員們的誤解。在函數(shù)的首部定義所有的變量。

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

函數(shù)聲明

所有的函數(shù)在使用前進(jìn)行聲明。 內(nèi)函數(shù)的聲明跟在var語句的后面。這樣可以幫助判斷哪些變量是在函數(shù)范圍內(nèi)的。

函數(shù)名與((左括號(hào))之間不應(yīng)該有空格。) (右括號(hào))與 開始程序體的{(左大括號(hào))之間應(yīng)插入一個(gè)空格。函數(shù)程序體應(yīng)縮進(jìn)四個(gè)空格。 }(右大括號(hào))與聲明函數(shù)的那一行代碼頭部對(duì)齊。

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

下面這種書寫方式可以在JavaScript中正常使用,因?yàn)樵贘avaScript中,函數(shù)和對(duì)象的聲明可以放到任何表達(dá)式允許的地方。且它讓內(nèi)聯(lián)函數(shù)和混合結(jié)構(gòu)具有最好的可讀性。

  function getElementsByClassName(className) {    var results = [];    walkTheDOM(document.body, function (node) {      var a;         // 類名數(shù)組      var c = node.className; // 節(jié)點(diǎn)的類名      var i;         // 循環(huán)計(jì)數(shù)器// 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;  }

如果函數(shù)是匿名函數(shù),則在function和((左括號(hào))之間應(yīng)有一個(gè)空格。如果省略了空格,否則會(huì)讓人感覺函數(shù)名叫作 function。

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

盡量不使用全局函數(shù)。

命名

變量名應(yīng)由26個(gè)大小寫字母(A..Z,a..z),10個(gè)數(shù)字( 0..9),和_(下劃線)組成。避免使用國際化字符(如中文),因?yàn)樗鼈儾皇窃谌魏蔚胤蕉伎梢员环奖愕拈喿x和理解。不要在命名中使用 $(美元符號(hào))或者(反斜杠)。

不要把_(下劃線)作為變量名的第一個(gè)字符。它有時(shí)用來表示私有變量,但實(shí)際上JavaScript并沒提供私有變量的功能。如果私有變量很重要, 那么使用私有成員的形式。應(yīng)避免使用這種容易讓人誤解的命名習(xí)慣。

大多數(shù)的變量名和方法命應(yīng)以小寫字母開頭。

必須與 new共同使用的構(gòu)造函數(shù)名應(yīng)以大寫字母開頭。當(dāng)new被省略時(shí)JavaScript不會(huì)有任何編譯錯(cuò)誤或運(yùn)行錯(cuò)誤拋出。忘記加 new時(shí)會(huì)讓不好的事情發(fā)生(比如被當(dāng)成一般的函數(shù)),所以大寫構(gòu)造函數(shù)名是我們來盡量避免這種情況發(fā)生的唯一辦法。

全局變量應(yīng)該全部大寫。(JavaScript沒有宏或者常量,所以不會(huì)因此造成誤會(huì))

語句

簡單語句

每一行最多只包含一條語句。把;(分號(hào))放到每條簡單語句的結(jié)尾處。注意一個(gè)函數(shù)賦值或?qū)ο筚x值語句也是賦值語句,應(yīng)該以分號(hào)結(jié)尾。

JavaScript可以把任何表達(dá)式當(dāng)作一條語句。這很容易隱藏一些錯(cuò)誤,特別是誤加分號(hào)的錯(cuò)誤。只有在賦值和調(diào)用時(shí),表達(dá)式才應(yīng)被當(dāng)作一條單獨(dú)的語句。

復(fù)合語句

復(fù)合語句是被包含在{ }(大括號(hào))的語句序列。

• * 被括起的語句必須多縮進(jìn)四個(gè)空格。
• * {(左大括號(hào))應(yīng)在復(fù)合語句其實(shí)行的結(jié)尾處。
• * }(右大括號(hào))應(yīng)與{(左大括號(hào))的那一行的開頭對(duì)齊
• * 大括號(hào)應(yīng)該在所有復(fù)合語句中使用,即使只有一條語句,當(dāng)它們是控制結(jié)構(gòu)的一部分時(shí), 比如一個(gè)if或者for語句。這樣做可以避免以后添加語句時(shí)造成的錯(cuò)誤。

標(biāo)示

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

return 語句

一條有返回值的return語句不要使用( )(括號(hào))來括住返回值。如果返回表達(dá)式,則表達(dá)式應(yīng)與return 關(guān)鍵字在同一行,以避免誤加分號(hào)錯(cuò)誤。

if 語句

if語句應(yīng)如以下格式:

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

for 語句

for語句應(yīng)如以下格式:

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

第一種形式的循環(huán)用于已經(jīng)知道相關(guān)參數(shù)的數(shù)組循環(huán)。

第二種形式應(yīng)用于對(duì)象中。object原型中的成員將會(huì)被包含在迭代器中。通過預(yù)先定義hasOwnProperty方法來區(qū)分真正的 object成員是個(gè)不錯(cuò)方法:

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

while 語句

while語句應(yīng)如以下格式:

  while (condition){    statements;  }

do 語句

do語句應(yīng)如以下格式:

  do {    statements;  } while (condition);

不像別的復(fù)合語句,do語句總是以;(分號(hào))結(jié)尾。

switch 語句

switch語句應(yīng)如以下格式:

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

每個(gè) case與switch對(duì)齊。這可避免過分縮進(jìn)。

每一組statements(除了default應(yīng)以 break,return,或者throw結(jié)尾。不要讓它順次往下執(zhí)行。

try 語句

try語句應(yīng)如以下格式:

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

continue 語句

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

with 語句

不要使用with語句。

空白

用空行來將邏輯相關(guān)的代碼塊分割開可以提高程序的可讀性。

空格應(yīng)在以下情況時(shí)使用:

• * 跟在((左括號(hào))后面的關(guān)鍵字應(yīng)被一個(gè)空格隔開。while (true) {
• * 函數(shù)參數(shù)與((左括號(hào))之間不應(yīng)該有空格。這能幫助區(qū)分關(guān)鍵字和函數(shù)調(diào)用。
• * 所有的二元操作符,除了.(點(diǎn)) 和((左括號(hào))和 [(左方括號(hào))應(yīng)用空格將其與操作數(shù)隔開。
• * 一元操作符與其操作數(shù)之間不應(yīng)有空格,除非操作符是個(gè)單詞,比如typeof。
• * 每個(gè)在控制部分,比如for 語句中的; (分號(hào))后須跟一個(gè)空格。
• * 每個(gè),(逗號(hào))后應(yīng)跟一個(gè)空格。

另外的建議

{} 和[]

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

當(dāng)成員名是一組有序的數(shù)字時(shí)使用數(shù)組來保存數(shù)據(jù)。當(dāng)成員名是無規(guī)律的字符串或其他時(shí)使用對(duì)象來保存數(shù)據(jù)。

,(逗號(hào))操作符

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

作用域

在JavaScript中塊沒有域。只有函數(shù)有域。不要使用塊,除非在復(fù)合語句中。

賦值表達(dá)式

避免在if和while語句的條件部分進(jìn)行賦值。

  if (a = b) {

是一條正確語句?或者

  if (a == b) {

才是對(duì)的?避免這種不容易判斷對(duì)錯(cuò)的結(jié)構(gòu)。

===和!==操作符。

使用===和!==操作符會(huì)相對(duì)好點(diǎn)。==和!=操作符會(huì)進(jìn)行類型強(qiáng)制轉(zhuǎn)換。 特別是, 不要將==用于與錯(cuò)值比較( false,null,undefined,“”, 0,NaN)。

令人迷惑的加號(hào)和減號(hào)

小心在+后緊跟+或++。這種形式很容易仍人迷惑。應(yīng)插入括號(hào)以便于理解。

  total = subtotal + +myInput.value;

最好能寫成

  total = subtotal + (+myInput.value);

這樣+ +不會(huì)被誤認(rèn)為是++。

eval 是惡魔

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

eval有別名。不要使用Function構(gòu)造器。不要給setTimeout或者 setInterval傳遞字符串參數(shù)。

最新評(píng)論