前端代碼標準最佳實務：javascript篇

前言
最近一直重構項目的前端代碼，也參考了各種前端代碼的最佳實務，目的是讓前端的HTML,CSS,Javacript代碼更符合標準，有更好的效能，更好的可維護性，嘗到了重構後的甜頭，也萌生了寫這個系列部落格的念頭。前端代碼有其固有的靈活性，這就導致了目前前端代碼非常混亂的局面，本系列文章希望能起到拋磚引玉的作用，讓更多的人重視前端代碼的品質，編寫更標準的前端代碼。
本系列文章共有三篇，分別討論HTML,CSS,Javascript，本篇將討論Javascript。
javascript是靈活性非常高的一種指令碼語言，使得用其實現的同樣功能有多種多樣的寫法，那麼在項目中如果沒有統一的規範，就會造成javascript代碼難以維護，隨著項目的深入，效能j也越來越差，檔案也越來越大。所以儘早制定統一的編碼規範是非常必要的，下面是整理的一些javascript規範供大家參考。
（1）編碼格式
好的編碼格式，不同人有不同的看法，但是在同一個項目中一定要有統一的格式。下面是常用的編碼格式：
1，縮排： 不使用tab（\0x09）縮排，以4個空格作為邏輯的縮排。
2，左花括弧應該在行的結束，而不應該單獨一行。應該一直使用花括弧括起邏輯塊，即使邏輯只有一行，應該也用花括弧括起來，這樣提高了代碼的可讀性。例如：
 
for (var i=0; i<100; i++) {
     doSomething(i); 
}
if (statement) {
    doSomeThing;
} else {
    doSomeThing;
}
3，用單引號定義字串。javascript中可以用單引號或者雙引號定義字串，但是因為習慣於在html中elements的屬性值的定義使用雙引號，而javascript中又經常包含html代碼，所以字串定義使用單引號也是方便於在字串內部包含含有雙引號的html代碼。
 
var content = '<span id="spanid">…';
4，注釋：如果注釋不是佔有多行，建議使用//，不推薦使用/**/，注釋應該單獨佔用一行，而不是寫在和代碼相同一行的右邊。
5，空格：空格的作用是提高代碼的可讀性，在函數參數的逗號後面使用一個空格，在操作符前後使用一個空格，
 
doSomething(myChar, 0, 1); while (x === y)
6，分號：語句結束一定要使用分號，使用分號是為了在壓縮js代碼時不至於出現js的編譯錯誤，因為壓縮的時候是刪除了所有的空格和斷行符號符的。
（2）命名規則
遵循規範的命名規則，提高了代碼的可讀性，好的命名本身就是好的注釋。
1，大小寫：現在較流行javascript的物件導向編程，那麼就會有公有或私人的概念，原則是公有介面的命名首字母大寫，私人介面的命名首字母小寫。
2，命名：禁止使用各種縮寫，命名應該描述其意義，而不是描述其類型，禁止使用標識類型的首碼
不推薦
 
getWin
function doSomething(str,  integer) {
     ... ...
}
function doSomething(strMessage,  intLength) { 
    ...  ...
}
正確命名
 
getWindow function doSomething(message, length) { ... ... }
（3）編程規範
javascript的編程規範關乎代碼的效能，代碼的簡潔。
1，變數定義
變數定義使用關鍵字var。非必需，不要使用全域變數，這樣可以減少不必要的變數定義查詢。變數應該有個初始化的值，或者設定為null。避免使用關鍵字with，with的效能差。集中定義變數，減少代碼量。
 
var counter = 0, empty = null;
2，函數定義
函數定義應該在其使用之前。函數內部的函數應該定義在變數之後。減少定義全域函數。函數定義為立即執行，應該用括弧包含函數定義體，這樣可讀性好。
 
var statement.
function outer(c, d) {
    var e = c * d;
 
    function inner(a, b) {
        return (e * a) + b;
    }
 
    return inner(0, 1);
}
 
var collection = (function () {
    var keys = [], values = [];
 
    return {
        get: function () {
            ......
        }
    };
}());
3，函數多次調用，應該使用函數別名。比如在迴圈中多次調用某個函數，應該定義一個函數別名，減少調用範圍鏈的跳轉，提高效能。
 
function doSomething() {
    var get = getDataByIndex;
 
     for (var counter = 0; counter < 10000; counter++) {
        var current = get(counter);
 
        // ...
    }
}
4，值比較盡量使用嚴格比較操作符，減少類型的轉換操作。
 
if (x === 5 && y !== 4)
5，迴圈與遞迴：盡量把效能差的操作放在迴圈外部。預先計算在迴圈中要使用的值。在上下文中有多個迴圈時，定義一個統一的迴圈變數，避免變數無意義的多次定義。
錯誤編碼
 
// example 1
for (var counter = 0; counter < 10000; counter++) {
    try {
       doSomething();
    } catch (e) {
    alert('Failure: ' + e);
        break;
    }
}
 
// example 2
for (var counter = 0;
counter < document.getElementsByTagName('div').length;
counter++) {
    doSomething();
}
 
// example 3
for (var counter = 0; counter < 10; counter++) {
    doSomething1();
};
 
for (var counter = 0; counter < 10; counter++) {
    doSomething2();
};
正確編碼
 
// example 1
 try {
    for (var counter = 0; counter < 10000; counter++) {
         doSomething();
     }
} catch (e) {
    alert('Failure: ' + e);
}
 
 
// example 2
var target = document.getElementsByTagName('div').length;
for (var counter = 0;counter < target ;counter++) {
    doSomething();
}
 
// example 3
var counter = 0;
for (counter = 0; counter < 10; counter++) {
    doSomething1();
};
for (counter = 0; counter < 10; counter++) {
    doSomething2();
};
6，Dom操作：減少Dom樹的更新次數，盡量合并Dom樹的更新操作，提高效能。減少賦值給innerHTML的次數。避免給Dom objects上的expando屬性賦值，減少可能的記憶體流失。
7，使用全域的變數和方法：避免使用eval，eval非常耗效能。如果要使用全域的變數或方法，應該加上window，減少內容相關的定義尋找。