如何編寫高質(zhì)量的JavaScript代碼

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何編寫高質(zhì)量的JavaScript代碼，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

編寫可維護的代碼

軟件的BUG修復(fù)需要花費大量的精力。尤其當(dāng)代碼已經(jīng)發(fā)布之后，隨著時間的增長，維護的成本愈發(fā)的高。當(dāng)你一發(fā)現(xiàn)BUG的時候，就立即去修復(fù)，這時候你的代碼還是熱乎的，你也不需要回憶，因為就是剛剛寫好的。但是當(dāng)你做了其他任務(wù)，幾乎完全忘記了這份代碼，這時候就需要：

◆重新學(xué)習(xí)和理解問題

◆理解代碼是如何解決問題的

另外一個問題是，在大項目或者大公司里面，經(jīng)常是解決BUG的人不是產(chǎn)生BUG的人，而且也不是發(fā)現(xiàn)BUG的人。所以減少理解代碼的時間就是最重要的問題，無論這個代碼是你自己以前寫的還是團隊中的其他成員寫的，因為我們都想去搞搞新的有意思的東西，而不是去維護那些個陳舊的代碼。

還有一個開發(fā)中的普遍問題就是，往往讀代碼的時間比寫代碼的時間還要多。有時候你鉆研一個問題，可以花整整一個下午的時間來考慮代碼的編寫。這個代碼當(dāng)時是可以工作的，但是隨著開發(fā)的進行，其他東西發(fā)生了很大的變化，這時候也就需要你自己來重新審查修改編寫代碼。比如：

◆還有BUG沒有解決

◆添加了新的功能

◆程序需要在新的環(huán)境中運行(比如一個新上市的瀏覽器)

◆代碼有問題

◆代碼需要重寫因為修改了架構(gòu)甚至要使用另一個語言

因為這些原因，也許你當(dāng)時一個下午寫好的代碼，后面需要花費幾周的時間來閱讀。所以編寫可維護的代碼對于軟件的成功至關(guān)重要。

可維護的代碼包括：

◆可讀性

◆連續(xù)性

◆預(yù)見性

◆看起來是一個人寫的

◆有文檔

最少化全局變量

Javascript使用函數(shù)來約定作用域。一個在函數(shù)內(nèi)部聲明的變量在外部是不可見的。所以，全局變量也就是聲明在任何函數(shù)之外的或者沒有被聲明的變量。

Javascript中，在任何函數(shù)之外有個可訪問的全局對象，每一個你創(chuàng)建的全局變量都是這個對象的一個屬性。在瀏覽器中，為了方便，通常用window來指代這個全局變量。下面的代碼就是說明如何創(chuàng)建一個全局變量：

myglobal = "hello"; // antipattern  console.log(myglobal); // "hello"  console.log(window.myglobal); // "hello"  console.log(window["myglobal"]); // "hello"  console.log(this.myglobal); // "hello

全局變量的問題

全局變量的問題在于，他在你的所有代碼或者一個頁面中都共享。他們在同一個命名空間下面，這通常會造成變量名沖突–兩個同名的變量，但是確實不同的用處。

通常在一些頁面中需要引入一些其他人的代碼，比如：

◆第三方的JS庫

◆廣告伙伴的腳本

◆第三方的用戶行為分析或者統(tǒng)計腳本

◆不同的組件、按鈕等等

加入其中一個第三方組件定義了一個全局變量：result。然后在你的程序中，也定義了一個全局變量result。***的這個result會覆蓋點之前的result，這樣第三方的腳本就會停止工作。

所以，為了對其他的腳本友好，在一個頁面中使用越少的全局變量越好。在后面會有一些方法來告訴你如何減少全局變量，比如使用命名空間，或者自執(zhí)行的匿名函數(shù)，但是***的避免全局變量的方法就是使用var關(guān)鍵字來聲明變量。

因為javascript的兩個特性，創(chuàng)建一個全局變量非常的簡單。***，你可以使用一個甚至沒有聲明的變量，第二，在javascript中，所有未聲明的變量都會成為全局對象的一個屬性(就像一個聲明了的全局變量一樣)?？纯催@個例子：

function sum(x,y){       result = x + y;       return result;  }

在這個代碼中，result在沒有被聲明的情況下就被使用了，這個代碼也能很好的工作，但是在調(diào)用了這個函數(shù)之后，就會多一個名為result的全局變量，這是所有問題的根源了。

解決這個問題的辦法就是使用var：

function sum(x,y){       var result  = x + y;       return result;  }

兩外一個不好的習(xí)慣就是在聲明變量的時候使用鏈?zhǔn)降姆椒▉碣x值，這時候，a是局部變量，但是b就成為了全局變量。

function foo(){       var a=b=0;       ....  }

這是因為，b = 0這個表達(dá)式先執(zhí)行，執(zhí)行的時候b并沒有被聲明，所以b就成為了全局變量，然后返回這個表達(dá)式的值0，給聲明了的變量a，換句話說，就好像你輸入的是：

var a = (b=0);

如果你已經(jīng)聲明變量，那么這種鏈?zhǔn)降馁x值沒有問題：

function foo(){       var a,b;       ...  }

另外一個避免使用全局變量的原因是考慮到程序的可移植性。如果你想讓你的代碼在不同的環(huán)境中都可以工作，那么使用全局變量就很可能會與新的系統(tǒng)中的全局變量沖突(或許在之前的系統(tǒng)中沒有問題)。

忘記var的影響

使用var聲明的全局變量和沒有使用var生成的全局變量還有一個區(qū)別在于刪除：

使用var聲明創(chuàng)建的全局變量不能被刪除

沒有使用var聲明的全局變量可以被刪除

這說明沒有使用var聲明生成的全局變量不是真正的變量，他們只是全局對象的屬性。屬性可以通過delete刪除，但是變量不行：

// define three globals  var global_var = 1;  global_novar = 2; // antipattern  (function () {     global_fromfunc = 3; // antipattern  }());      // attempt to delete  delete global_var; // false  delete global_novar; // true  delete global_fromfunc; // true      // test the deletion  typeof global_var; // "number"  typeof global_novar; // "undefined"  typeof global_fromfunc; // "undefined"

在ES5的嚴(yán)格模式下，給一個為聲明的變量賦值會報錯。

讀取全局對象

在瀏覽器中，你可以通過window變量來讀取全局對象(除非你在函數(shù)內(nèi)部重新定義了window對象)。但在有的環(huán)境中，可能不叫window，那么你可以使用下面的代碼來獲取全局對象：

var global = (function(){       return this;  })();

這樣可以獲取到全局對象的原因是在function的內(nèi)部，this指向全局對象。但是這在ES5的嚴(yán)格模式下會不起作用，你需要適配一些其他模式。當(dāng)你開發(fā)自己的庫的時候，你可以把你的代碼封裝在一個立即函數(shù)中，然后將this作為一個參數(shù)傳進來。

單個var模式

在你的代碼的頂部只是用一個var關(guān)鍵字，會有以下的好處：

◆對于所有需要的變量，在一個地方就可以全部看到

◆避免使用一個未定義的變量

◆幫助你記憶聲明的變量，減少全局變量

◆更精簡的代碼

書寫很簡單：

function func() {     var a = 1,         b = 2,         sum = a + b,         myobject = {},         i,         j;     // function body...  }

通過一個var和逗號來聲明多個變量。在聲明的時候給變量賦默認(rèn)值也是不錯的做法，可以避免一些邏輯錯誤，提高代碼的可讀性。而后你閱讀的代碼的時候也可以根據(jù)變量的默認(rèn)值來方便的猜測變量的用途。

你也可以在聲明變量的時候做一些實際的工作，比如sum = a + b;另外，在操作DOM元素的時候，你也可以把DOM元素的引用保存在一個變量中：

function updateElement() {     var el = document.getElementById("result"),         style = el.style;     // do something with el and style...  }

濫用了的var

JavaScript允許你在函數(shù)內(nèi)部有多個var語句，但是卻都表現(xiàn)的如同在函數(shù)的頂部聲明一樣。這個特性在你使用一個變量然后在后面又聲明了這個變量時會導(dǎo)致一些奇怪的邏輯問題。對于JavaScript來說，只要變量在同一個作用域，那么就認(rèn)為是聲明了的，就算是在var語句之前使用也一樣?？纯催@個例子：

myname = "global"; // global variable  function func() {      alert(myname); // "undefined"      var myname = "local";      alert(myname); // "local"  }  func();

在這個例子中，或許你期望***次會彈出global，第二次彈出local。因為***次的時候沒有還沒有使用var聲明myname，這是應(yīng)該是全局變量的myname，第二次聲明了，然后alert之后應(yīng)該是local的值。而事實上不是這樣的，只要你在函數(shù)中出現(xiàn)了var myname，那么js就認(rèn)為你在這個函數(shù)中聲明了這個變量，但是在讀取這個變量的值的時候，因為var語句還沒有執(zhí)行，所以是undefined，很奇怪的邏輯吧。上面的代碼相當(dāng)于：

myname = "global"; // global variable  function func() {     var myname; // same as -> var myname = undefined;     alert(myname); // "undefined"     myname = "local";     alert(myname); // "local"  }  func();

我們來解釋一下這個現(xiàn)象，在代碼的解析中，分兩個步驟，***步先處理變量函數(shù)的聲明，這一步處理整個代碼的上下文。第二步就是代碼的運行時，創(chuàng)建函數(shù)表達(dá)式以及未定義的變量。實際上，我們只是假設(shè)了這個概念，這并不在ECMAScript的規(guī)范中，但是這個行為常常就是這樣解釋的。

for循環(huán)

在for循環(huán)中你會去迭代一些數(shù)組元素或者一些HTML元素。for循環(huán)常常如此：

for (var i = 0; i < myarray.length; i++) {     // do something with myarray[i]  }

這樣寫的問題在于，每一次迭代的時候都會計算數(shù)組的長度，尤其在這個參數(shù)不是一個數(shù)組而是一組HTML元素的時候會降低你的程序的性能。

HTML元素的集合在頁面上，這樣每次都會去再頁面上查找相應(yīng)的元素，這是非常耗時的。所以對于for循環(huán)，你需要預(yù)先保存數(shù)組的長度，這樣寫：

for (var i = 0, max = myarray.length; i < max; i++) {     // do something with myarray[i]  }

這樣緩存了參數(shù)的長度，在每次迭代的時候就不用再去查找計算了。

在查找HTML元素集合的時候，緩存參數(shù)長度可以帶來可觀的性能提升，Safari下面提高兩倍的速度，在IE7下面提高190倍的速度。

需要注意的是，當(dāng)你需要操作修改DOM元素的數(shù)量的時候，你肯定希望這個值是隨時更新的而不是一個常量。

使用下面的單一var模式，你也可以把var提到循環(huán)之外：

function looper() {     var i = 0,          max,          myarray = [];     // ...     for (i = 0, max = myarray.length; i < max; i++) {        // do something with myarray[i]     }  }

這個模式可以增強整個代碼的連續(xù)性，但是不好的一點是當(dāng)你重構(gòu)代碼的時候復(fù)制粘貼就沒那么容易了。例如：如果你想在其他函數(shù)中也使用這個循環(huán)，那你需要確定在新的函數(shù)中處理好了i和max(或許還需要刪掉這個)。

這個函數(shù)還有兩個點可以優(yōu)化的：

◆可以少一個變量(不需要max)

◆遞減到0，一個數(shù)字與0比較比這個數(shù)字與另外一個數(shù)字比較更快

所以就可以寫為：

var i, myarray = [];  for (i = myarray.length; i--;) {     // do something with myarray[i]  }

針對第二點：

var myarray = [],      i = myarray.length;  while (i--) {     // do something with myarray[i]  }

這是兩個比較微小的點的優(yōu)化。另外，JSLint可能對于i–會有意見。

for-in循環(huán)

for-in循環(huán)用來迭代非數(shù)組的對象。使用for-in循環(huán)通常也成為枚舉。

從技術(shù)上來說，你也可以用for-in來循環(huán)數(shù)組，因為數(shù)組也是對象，但是不推薦。如果數(shù)組有一些自定義的擴展函數(shù)，那么就會出錯。另外，對象屬性的順序在for-in循環(huán)中也是不確定的。所以***還是用普通的循環(huán)來循環(huán)數(shù)組用for-in來循環(huán)對象。

在循環(huán)對象的過程中，使用hasOwnProperty()方法來檢驗是對象本身的屬性還是原型鏈上的屬性很重要。

看看下面的這個例子。

// the object  var man = {     hands: 2,     legs: 2,     heads: 1  };      // somewhere else in the code  // a method was added to all objects  if (typeof Object.prototype.clone === "undefined") {     Object.prototype.clone = function () {};  }

在這個例子中，我們有一個簡單的稱作man的對象字面量。在其他man定義之前或之后的地方，對象原型有一個很有用的clone()方法。因為原型鏈的原因，所有的對象都自動獲得了這個方法。為了在枚舉man對象的時候出現(xiàn)clone方法，你需要使用hasOwnProperty方法來區(qū)別。如果沒有區(qū)別來自原型鏈的方法，那么就會有一些意想不到的事情發(fā)生：

// 1.  // for-in loop  for (var i in man) {     if (man.hasOwnProperty(i)) { // filter        console.log(i, ":", man[i]);     }  }  /* result in the console  hands : 2  legs : 2  heads : 1  */ // 2.  // antipattern:  // for-in loop without checking hasOwnProperty()  for (var i in man) {     console.log(i, ":", man[i]);  }  /*  result in the console  hands : 2  legs : 2  heads : 1  clone: function()  */

另外一種使用方法如下：

for (var i in man) {     if (Object.prototype.hasOwnProperty.call(man, i)) { // filter        console.log(i, ":", man[i]);     }  }

這樣寫的好處是可以防止man重新定義了hasOwnProperty方法導(dǎo)致的沖突。如果不想寫這么長的一串，你也可以這樣：

var i, hasOwn = Object.prototype.hasOwnProperty;  for (i in man) {      if (hasOwn.call(man, i)) { // filter          console.log(i, ":", man[i]);      }  }

嚴(yán)格意義上講，不適用hasOwnProperty也不是什么錯誤。根據(jù)任務(wù)的難度和你對代碼的自信程度，你也可以不用這個直接循環(huán)。但是當(dāng)你不確定的時候，***還是使用這個方法檢測一下。

另外一種格式上的改變(不會通過jsLint的檢查)，去掉for的大括號，然后把if放在同一行。這樣做的好處可以讓循環(huán)體更加突出，縮進也就少一些：

// Warning: doesn't pass JSLint  var i, hasOwn = Object.prototype.hasOwnProperty;  for (i in man) if (hasOwn.call(man, i)) { // filter      console.log(i, ":", man[i]);  }

不要擴展內(nèi)建的原型

擴展原型的構(gòu)造函數(shù)，可以提供一些很強大的功能，但是有時候他太強大了。

有時候你會去擴展Object(),Array(),Fucntion()的原型方法，這樣會導(dǎo)致可維護性的問題，因為這會讓你的代碼的移植性變差。其他的開發(fā)人員使用你的代碼的時候，可能只需要原生的方法，并不需要額外的功能。

另外，你添加進去的方法，如果在循環(huán)的時候沒有使用hasOwnProperty方法就會被遍歷出來，這會讓人很迷惑。

所以，***還是不要擴展基本的對象。除非是下面的情況：

◆你確定在將來根據(jù)ECMAScript規(guī)范，瀏覽器會添加相應(yīng)的原型方法，那么是可以的，你只不過是提前實現(xiàn)了這個功能。

◆你確定的你要實現(xiàn)的方法不存在–或許有時候在代碼的其他的地方實現(xiàn)了，或者有的瀏覽器支持，這都是不行的。

◆有非常清晰的文檔，并且與團隊成員溝通過

如果在這些情況之下，那么你就可以添加，***是下面這種形式：

if (typeof Object.prototype.myMethod !== "function") {     Object.prototype.myMethod = function () {        // implementation...     };  }

switch模式

按照下面的風(fēng)格寫switch的話，可以提高你的代碼可讀性和健壯性：

var inspect_me = 0,      result = '';  switch (inspect_me) {  case 0:     result = "zero";     break;  case 1:     result = "one";     break;  default:     result = "unknown";  }

需要注意下面幾個方面：

◆將case和switch對齊。

◆case的內(nèi)容縮進

◆每一個case之后都有一個清晰的break

◆避免順序往下執(zhí)行case，非要如此的話，文檔一定要寫清楚

◆***使用default，保證在沒有命中case的情況下也有反饋

避免隱藏的類型轉(zhuǎn)換

Javascript在你比較兩個變量的時候會進行類型的轉(zhuǎn)換，這就是為什么 false == 0或者”" == 0會返回true。

為了避免這種隱藏的類型轉(zhuǎn)換帶來的迷惑，***使用===或者!==操作符來比較：

var zero = 0;  if (zero === false) {     // not executing because zero is 0, not false  }      // antipattern  if (zero == false) {     // this block is executed...  }

還有另外一種流派持這樣的觀點：當(dāng)==夠用時使用===就是多余的。比如，當(dāng)你使用typeof的時候你知道會返回string，所以沒必要使用嚴(yán)格的檢驗。然而，JSLint要求嚴(yán)格檢驗;他最大程度使代碼在閱讀的時候減少歧義，(“這個==是故意呢還是疏漏?”)。

避免使用eval()

如果你在你的代碼中使用eval()，那么要記住”eval() is evil”。這個方法會將傳入的字符串當(dāng)做js代碼來執(zhí)行。如果代碼是在運行前就確定的，那么沒有必要使用eval()。如果代碼是在運行時動態(tài)確定的，那么也有其他更安全的辦法。例如使用方括號形式訪問元素的屬性：

// antipattern  var property = "name";  alert(eval("obj." + property));       // preferred  var property = "name";  alert(obj[property]);

使用eval()還有安全問題，比如你運行網(wǎng)絡(luò)上的一段代碼，而這段代碼又被別人篡改了。在處理Ajax請求返回的JSON數(shù)據(jù)的時候，***還是使用瀏覽器內(nèi)建的處理方法，如果對于低端的瀏覽器不支持的，可以從JSON.org上下載對應(yīng)的處理庫。

另外還要記住使用setTimeout、setInterval以及Function的構(gòu)造函數(shù)的是，傳入的字符串的參數(shù)，js的處理方法跟eval()類似，所以也要注意。因為，js會把你傳入的字符串解析執(zhí)行：

// antipatterns  setTimeout("myFunc()", 1000);  setTimeout("myFunc(1, 2, 3)", 1000);       // preferred  setTimeout(myFunc, 1000);  setTimeout(function () {     myFunc(1, 2, 3);  }, 1000);

使用Function的構(gòu)造函數(shù)，跟eval()差不多，也要注意。這是個非常有用的功能，但是常常被錯用。如果你必須使用eval()，那么可以考慮new一個Function來替代。另外的一個好處就是，使用Function的構(gòu)造函數(shù)，函數(shù)的作用域在本方法內(nèi)，這樣你使用var聲明的變量就不會變成全局的。另外一個防止eval()生成全局變量的辦法就是使用匿名函數(shù)。

看看下面這個例子，只有un變量最終是全局的：

console.log(typeof un); // "undefined"  console.log(typeof deux); // "undefined"  console.log(typeof trois); // "undefined"       var jsstring = "var un = 1; console.log(un);";  eval(jsstring); // logs "1"       jsstring = "var deux = 2; console.log(deux);";  new Function(jsstring)(); // logs "2"        jsstring = "var trois = 3; console.log(trois);";   (function () {      eval(jsstring);   }()); // logs "3"        console.log(typeof un); // number   console.log(typeof deux); // undefined   console.log(typeof trois); // undefined

eval()和Function構(gòu)造函數(shù)的另一個區(qū)別就是eval()會影響到作用域，而Function則相當(dāng)于一個沙盒。例如：

(function () {     var local = 1;     eval("local = 3; console.log(local)"); // logs 3     console.log(local); // logs 3  }());       (function () {     var local = 1;     Function("console.log(typeof local);")(); // logs undefined   }());

使用parseInt()轉(zhuǎn)換處理數(shù)字

使用parseInt()你可以將字符串轉(zhuǎn)為數(shù)字。這個方法支持第二個表示進制的參數(shù)，常常被忽略。問題常常在處理一段以0開始的字符串的時候。在ECMAS3標(biāo)準(zhǔn)中，以0開始表示八進制，但是在ES5中又改了，所以為了避免麻煩，***還是標(biāo)明第二個參數(shù)。

var month = "06",      year = "09";  month = parseInt(month, 10);  year = parseInt(year, 10);

在這個例子中，如果你使用parseInt(year)，就會返回0，因為09被認(rèn)為是8進制數(shù)字，然而9是非法的八進制字符，所以返回0。

其他的可以把字符串轉(zhuǎn)為數(shù)字的方法有：

+"08" // result is 8  umber("08") // 8

這些通常都比parseInt()快一些，因為parseInt并不只是簡單的轉(zhuǎn)換。但是如果你的輸入是”08 hello”這樣的，那么parseInt()也會返回8，但是其他的方法就只能返回NaN。

編碼規(guī)范

編碼的時候遵循一定的規(guī)范，可以讓你的代碼增強可移植性，并且更加便于閱讀和理解。加入團隊的新人，在閱讀了代碼規(guī)范之后，可以更加快速的溶入團隊，并理解其他人員開發(fā)的代碼。

在一些討論會議上，規(guī)范往往都是爭論的焦點(比如縮進的形式)。所以如果你打算為你團隊的編碼規(guī)范提一些建議，那就準(zhǔn)備好一場激烈的辯論和反對意見。要記住，建立和實施規(guī)范是非常重要的。

縮進

代碼如果沒有縮進，那基本上沒法閱讀了。比這更糟的是不規(guī)范的縮進，看著好像縮進了，但是亂七八糟摸不著頭腦。所以縮進的使用必須規(guī)范。

有些開發(fā)人員喜歡使用tab鍵來縮進，因為在每一個編輯器里面都可以自己設(shè)置想要的tab值。有的人喜歡四個空格。如果團隊遵循統(tǒng)一的規(guī)范，這也不是什么問題。比如本文就是四個空格，這也是JSLint推薦的。

那么什么該縮進呢?很簡單，大括號。這樣就是說包括函數(shù)體，循環(huán)，ifs，switch，以及對象字面量的屬性?？纯催@個例子：

function outer(a, b) {      var c = 1,          d = 2,          inner;      if (a > b) {          inner = function () {              return {                  r: c - d              };           };       } else {           inner = function () {               return {                   r: c + d               };           };       }       return inner;   }

大括號

應(yīng)該使用大括號，尤其在那些可用可不用的地方，如果你的if語句或者for循環(huán)只有一句話，那么大括號不是必須的，但是這種時候***用大括號。這可以讓代碼保持一致，并且便于升級。

假設(shè)你的for循環(huán)只有一句。你可以不用大括號，也不會有什么錯誤。

// bad practice  for (var i = 0; i < 10; i += 1)     alert(i);

但是假如你以后要在這個循環(huán)里面添加其他東西呢?

// bad practice  for (var i = 0; i < 10; i += 1)     alert(i);     alert(i + " is " + (i % 2 ? "odd" : "even"));

這時候，雖然第二個alert有縮進，但他還是在循環(huán)之外的。所以，無論何時，都應(yīng)該是用大括號。if語句一樣：

// bad  if (true)     alert(1);  else    alert(2);       // better  if (true) {     alert(1);   } else {      alert(2);   }

大括號位置

開發(fā)人員也經(jīng)常爭論大括號的位置，放在同一行還是下一行呢?

在具體的例子中，這是個見仁見智的問題。但也有例外，假如程序根據(jù)不同的位置做不同的解析呢?這是因為插入分號機制，js對此并不挑剔，他會在你沒有添加分號的行之后幫你添加。這在函數(shù)返回一個對象字面量然后大括號寫在下一行的時候出問題：

// warning: unexpected return value  function func() {     return   // 下面的讀取不到     {        name : "Batman"    }  }

如果你想讓這個函數(shù)返回一個有name屬性的對象字面量，這個函數(shù)是做不到的，因為插入的分號，返回的應(yīng)該是一個undefied值。

所以，***的結(jié)論是，必須使用大括號，并且寫在同一行。

function func() {     return {        name : "Batman"    };  }

關(guān)于分號：跟大括號一樣，必須寫。這不只是推行嚴(yán)格的寫程序的規(guī)范，更是在必要的時候解決一些不清楚的地方，比如前面的例子。

空格

正確的使用空格也可以增加程序的可讀性和連貫性。寫句子的時候你會在逗號和句號之后有一些停頓。在js中可以模仿這樣的邏輯。

應(yīng)該使用空格地方有：

◆循環(huán)中的分號之后

◆循環(huán)中的變量初始化for (var i = 0, max = 10; i < max; i += 1) {…}

◆數(shù)組中的逗號分隔符之后var a = [1, 2, 3];

◆對象字面量中的逗號var o = {a: 1, b: 2}

◆函數(shù)參數(shù)間myFunc(a, b, c)

◆在函數(shù)聲明時候的大括號前面function myFunc() {}

◆匿名函數(shù)var myFunc = function () {};

另外一些使用空格比較好的地方就是在那些操作符的兩邊，比如+, -, *, =, <,>, <=,>=, ===, !==, &&, ||, +=,等等。

// generous and consistent spacing  // makes the code easier to read  // allowing it to "breathe"  var d = 0,      a = b + 1;  if (a && b && c) {      d = a % c;      a += d;  }        // antipattern   // missing or inconsistent spaces   // make the code confusing   var d = 0,       a = b + 1;   if (a && b && c) {       d = a % c;       a += d;   }

***一個關(guān)于空格要注意的，大括號前面的空格。***使用空格：

◆在函數(shù)定義，id-else，case，循環(huán)以及對象字面量的大括號前面使用空格

◆在大括號}與else、while之間使用空格

反對增加空格的一個說法是增加文件體積，但是在壓縮之后并不存在這個問題。提高代碼可讀性經(jīng)常被忽視的一個方面就是垂直的空格，你可以使用空行來分開代碼，就好像寫文章時候的段落一樣。

命名規(guī)范

可以提高代碼移植性和可維護性的一個方面是命名規(guī)范。也就是說，在取變量名的時候總是采取一貫的做法。

無論采用什么樣的命名規(guī)范，其實都不是很重要，重要的是確定下來這個規(guī)范，然后遵守它。

構(gòu)造函數(shù)首字母大寫

javascript中沒有類，但是可以使用new來達(dá)到同樣的目的。

因為構(gòu)造函數(shù)也是函數(shù)，如果能從名字上就能區(qū)別它是構(gòu)造函數(shù)還是普通函數(shù)，對于開發(fā)者是非常有用的。所以將構(gòu)造函數(shù)的首字母大寫，普通函數(shù)的首字母小寫作為提示。這樣一眼就能區(qū)別。

單詞的分隔

當(dāng)你的變量名或者函數(shù)名是由好幾個單詞構(gòu)成的時候，如果能順利區(qū)分變量名由那幾個單詞構(gòu)成，也是非常不錯的體驗。這種命名規(guī)范成為駝峰式。所謂駝峰式就是以小寫字母開始，后面的每個單詞***個字母大寫。

對于構(gòu)造函數(shù)***個字母大寫，MyConstructor()，對于普通的函數(shù)，就采用駝峰式myFunction(), calculateArea()。

那么變量怎么辦呢，有的人使用駝峰式，但是更好的辦法是使用下劃線來區(qū)分。first_name,favorite_bands, 以及 old_company_name。這也可以讓你一眼就能區(qū)分函數(shù)和變量。

其他命名規(guī)范

有時候，開發(fā)人員也會使用命名規(guī)范來替代和彌補一些語言的特性。

例如，在javascript中，并沒有提供定義常量的辦法(雖然有Number.MAX_VALUE)，所以開發(fā)人員使用全大寫的名稱來表示不可更改的常量。var PI = 3.14, MAX_WIDTH = 800。

另外一種規(guī)范是使用全局變量名的首字母。這樣做可以強化開發(fā)者使全局變量最少，并且容易辨認(rèn)。

另外一種規(guī)范是在函數(shù)中模擬私有成員。雖然可以在javascript中實現(xiàn)私有變量，但是開發(fā)人員為了更加容易區(qū)別，所以給他加一個下劃線的前綴。例如：

var person = {      getName: function () {          return this._getFirst() + ' ' + this._getLast();      },           _getFirst: function () {          // ...      },      _getLast: function () {           // ...       }   };

在這個例子中，getName是一個公有函數(shù)，是API的一部分，_getFirst，_getLast本意是私有的。雖然仍然是公有函數(shù)，但hi加上了這個前綴，表示在以后的版本中不保證能運行，所以不應(yīng)該被直接使用。注意在JSLint中不推薦這樣做，除非你設(shè)置nomen選項為false。

還有其他幾種表示私有成員的規(guī)范：

◆在末尾使用下劃線，比如name_以及getElements_

◆使用一個下劃線表示保護成員_protected，兩個下劃線表示私有成員__private

◆在firefox中，有些不是語言原生的變量，以兩個下劃線開始，兩個下劃線結(jié)束__proto__以及__parent__

寫注釋

必須給你的代碼寫注釋，就算它看起來不會被別人接手。有時候，你研究完一個問題，然后你看著代碼覺得那是顯而易見的，但是過一兩周之后回頭再看，你也會摸不著頭腦的。

當(dāng)然，也不能過分的注釋：每個變量每一行代碼都注釋。但是通常都需要對函數(shù)的功能，參數(shù)，返回值寫文檔，以及一些其他的復(fù)雜的邏輯和算法。想想，你的代碼的閱讀者，只需要讀注釋就能大體上了解你的代碼在做什么需要什么，這比直接讀代碼理解要快的多。當(dāng)你有五六行的代碼是做一個具體的任務(wù)，那么閱讀者就可以通過一行代碼了解你的目的，然后跳過這些代碼。關(guān)于注釋，沒有硬性的比例說是多少代碼需要多少注釋。有時候，有些代碼(比如正則表達(dá)式)注釋的內(nèi)容肯定比代碼本身多。

寫注釋是必須遵守的規(guī)范，而且要保持注釋的更新，一個過時的注釋帶給人的迷惑還不如不寫注釋。

上述就是小編為大家分享的如何編寫高質(zhì)量的JavaScript代碼了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。