優秀的Stoyan Stefanov在他的新書中（《Javascript Patterns》）介紹了很多編寫高質量代碼的技巧，比如避免使用全局變量，使用單一的var關鍵字，循環式預存長度等等。

　　這篇文章不僅僅從代碼本身來考慮如何優化編碼，也從代碼的設計階段來考慮，包括書寫API文檔，同事的review，使用JSLint。這些習慣都能幫助你編寫更加高質量的、更易于理解的、可維護的代碼（讓你的代碼在多年之后仍使你引以為傲）。

　　編寫可維護的代碼

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

• 重新學習和理解問題
• 理解代碼是如何解決問題的

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

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

• 還有BUG沒有解決
• 添加了新的功能
• 程序需要在新的環境中運行（比如一個新上市的瀏覽器）
• 代碼有問題
• 代碼需要重寫因為修改了架構甚至要使用另一個語言

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

　　可維護的代碼包括：

• 可讀性
• 連續性
• 預見性
• 看起來是一個人寫的
• 有文檔

　　最少化全局變量

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

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

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

　　全局變量的問題

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

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

• 第三方的JS庫
• 廣告伙伴的腳本
• 第三方的用戶行為分析或者統計腳本
• 不同的組件、按鈕等等

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

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

　　因為javascript的兩個特性，創建一個全局變量非常的簡單。第一，你可以使用一個甚至沒有聲明的變量，第二，在javascript中，所有未聲明的變量都會成為全局對象的一個屬性（就像一個聲明了的全局變量一樣）。看看這個例子：

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

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

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

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

　　兩外一個不好的習慣就是在聲明變量的時候使用鏈式的方法來賦值，這時候，a是局部變量，但是b就成為了全局變量。

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

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

var a = (b=0);

　　如果你已經聲明變量，那么這種鏈式的賦值沒有問題：

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

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

　　忘記var的影響

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

　　使用var聲明創建的全局變量不能被刪除

　　沒有使用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的嚴格模式下，給一個為聲明的變量賦值會報錯。

　　讀取全局對象

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

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

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

　　單個var模式

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

• 對于所有需要的變量，在一個地方就可以全部看到
• 避免使用一個未定義的變量
• 幫助你記憶聲明的變量，減少全局變量
• 更精簡的代碼

　　書寫很簡單：

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

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

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

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

　　濫用了的var

　　JavaScript允許你在函數內部有多個var語句，但是卻都表現的如同在函數的頂部聲明一樣。這個特性在你使用一個變量然后在后面又聲明了這個變量時會導致一些奇怪的邏輯問題。對于JavaScript來說，只要變量在同一個作用域，那么就認為是聲明了的，就算是在var語句之前使用也一樣。看看這個例子：

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

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

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

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

　　for循環

　　在for循環中你會去迭代一些數組元素或者一些HTML元素。for循環常常如此：

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

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

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

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

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

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

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

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

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

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

　　這個函數還有兩個點可以優化的：

• 可以少一個變量（不需要max）
• 遞減到0，一個數字與0比較比這個數字與另外一個數字比較更快

　　所以就可以寫為：

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

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

　　for-in循環

　　for-in循環用來迭代非數組的對象。使用for-in循環通常也成為枚舉。

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

　　在循環對象的過程中，使用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對象的時候出現clone方法，你需要使用hasOwnProperty方法來區別。如果沒有區別來自原型鏈的方法，那么就會有一些意想不到的事情發生：

// 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方法導致的沖突。如果不想寫這么長的一串，你也可以這樣：

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

　　嚴格意義上講，不適用hasOwnProperty也不是什么錯誤。根據任務的難度和你對代碼的自信程度，你也可以不用這個直接循環。但是當你不確定的時候，最好還是使用這個方法檢測一下。

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

// 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]);
}

　　不要擴展內建的原型

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

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

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

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

• 你確定在將來根據ECMAScript規范，瀏覽器會添加相應的原型方法，那么是可以的，你只不過是提前實現了這個功能。
• 你確定的你要實現的方法不存在–或許有時候在代碼的其他的地方實現了，或者有的瀏覽器支持，這都是不行的。
• 有非常清晰的文檔，并且與團隊成員溝通過

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

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

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

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

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

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

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

(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
 }());

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

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

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

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

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

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

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

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

// 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;
 }

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

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

　　還有其他幾種表示私有成員的規范：

• 在末尾使用下劃線，比如name_以及getElements_
• 使用一個下劃線表示保護成員_protected，兩個下劃線表示私有成員__private
• 在firefox中，有些不是語言原生的變量，以兩個下劃線開始，兩個下劃線結束__proto__以及__parent__

　　寫注釋

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

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

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