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

前言

最近一直重構項目的前端代碼，也參考了各種前端代碼的最佳實務，目的是讓前端的HTML,CSS,JavaScript代碼更符合標準，有更好的效能，更好的可維護性，嘗到了重構後的甜頭，也萌生了寫這個系列部落格的念頭。前端代碼有其固有的靈活性，這就導致了目前前端代碼非常混亂的局面，本系列文章希望能起到拋磚引玉的作用，讓更多的人重視前端代碼的品質，編寫更標準的前端代碼。

本系列文章共有三篇，分別討論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，命名：禁止使用各種縮寫，命名應該描述其意義，而不是描述其類型，禁止使用標識類型的首碼

不推薦

getWinfunction doSomething(str,  integer) {     ... ...}function doSomething(strMessage,  intLength) {     ...  ...}

正確命名

getWindowfunction 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 1for (var counter = 0; counter < 10000; counter++) {    try {       doSomething();    } catch (e) {    alert('Failure: ' + e);        break;    }}// example 2for (var counter = 0;counter < document.getElementsByTagName('div').length;counter++) {    doSomething();}// example 3for (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 2var target = document.getElementsByTagName('div').length;for (var counter = 0;counter < target ;counter++) {    doSomething();}// example 3var 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，減少內容相關的定義尋找。