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

看見就非常 2012-08-31

展開全文

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

前言

最近一直重構(gòu)項目的前端代碼，也參考了各種前端代碼的最佳實踐，目的是讓前端的HTML,CSS,JavaScript代碼更符合標準，有更好的性能，更好的可維護性，嘗到了重構(gòu)后的甜頭，也萌生了寫這個系列博客的念頭。前端代碼有其固有的靈活性，這就導致了目前前端代碼非?；靵y的局面，本系列文章希望能起到拋磚引玉的作用，讓更多的人重視前端代碼的質(zhì)量，編寫更標準的前端代碼。

本系列文章共有三篇，分別討論HTML,CSS,Javascript，本篇將討論Javascript。

javascript是靈活性非常高的一種腳本語言，使得用其實現(xiàn)的同樣功能有多種多樣的寫法，那么在項目中如果沒有統(tǒng)一的規(guī)范，就會造成javascript代碼難以維護，隨著項目的深入，性能j也越來越差，文件也越來越大。所以盡早制定統(tǒng)一的編碼規(guī)范是非常必要的，下面是整理的一些javascript規(guī)范供大家參考。

（1）編碼格式

好的編碼格式，不同人有不同的看法，但是在同一個項目中一定要有統(tǒng)一的格式。下面是常用的編碼格式：

1，縮進：不使用tab（\0x09）縮進，以4個空格作為邏輯的縮進。

2，左花括號應(yīng)該在行的結(jié)束，而不應(yīng)該單獨一行。應(yīng)該一直使用花括號括起邏輯塊，即使邏輯只有一行，應(yīng)該也用花括號括起來，這樣提高了代碼的可讀性。例如：

for (var i=0; i<100; i++) {
     doSomething(i); 
}
if (statement) {
    doSomeThing;
} else {
    doSomeThing;
}

3，用單引號定義字符串。javascript中可以用單引號或者雙引號定義字符串，但是因為習慣于在html中elements的屬性值的定義使用雙引號，而javascript中又經(jīng)常包含html代碼，所以字符串定義使用單引號也是方便于在字符串內(nèi)部包含含有雙引號的html代碼。

1	`var` `content =` `'<span id="spanid">…';`

4，注釋：如果注釋不是占有多行，建議使用//，不推薦使用/**/，注釋應(yīng)該單獨占用一行，而不是寫在和代碼相同一行的右邊。

5，空格：空格的作用是提高代碼的可讀性，在函數(shù)參數(shù)的逗號后面使用一個空格，在操作符前后使用一個空格，

1 2	`doSomething(myChar, 0, 1);` `while` `(x === y)`

6，分號：語句結(jié)束一定要使用分號，使用分號是為了在壓縮js代碼時不至于出現(xiàn)js的編譯錯誤，因為壓縮的時候是刪除了所有的空格和回車符的。

（2）命名規(guī)則

遵循規(guī)范的命名規(guī)則，提高了代碼的可讀性，好的命名本身就是好的注釋。

1，大小寫：現(xiàn)在較流行javascript的面向?qū)ο缶幊?，那么就會有公有或私有的概念，原則是公有接口的命名首字母大寫，私有接口的命名首字母小寫。

2，命名：禁止使用各種縮寫，命名應(yīng)該描述其意義，而不是描述其類型，禁止使用標識類型的前綴

不推薦

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

正確命名

getWindow
function doSomething(message, length) {
    ...  ...
}

（3）編程規(guī)范

javascript的編程規(guī)范關(guān)乎代碼的性能，代碼的簡潔。

1，變量定義

變量定義使用關(guān)鍵字var。非必需，不要使用全局變量，這樣可以減少不必要的變量定義查詢。變量應(yīng)該有個初始化的值，或者設(shè)置為null。避免使用關(guān)鍵字with，with的性能差。集中定義變量，減少代碼量。

1	`var` `counter = 0, empty =` `null;`

2，函數(shù)定義

函數(shù)定義應(yīng)該在其使用之前。函數(shù)內(nèi)部的函數(shù)應(yīng)該定義在變量之后。減少定義全局函數(shù)。函數(shù)定義為立即執(zhí)行，應(yīng)該用括號包含函數(shù)定義體，這樣可讀性好。

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，函數(shù)多次調(diào)用，應(yīng)該使用函數(shù)別名。比如在循環(huán)中多次調(diào)用某個函數(shù)，應(yīng)該定義一個函數(shù)別名，減少調(diào)用范圍鏈的跳轉(zhuǎn)，提高性能。

function doSomething() {
    var get = getDataByIndex;
 
     for (var counter = 0; counter < 10000; counter++) {
        var current = get(counter);
 
        // ...
    }
}

4，值比較盡量使用嚴格比較操作符，減少類型的轉(zhuǎn)換操作。

1	`if` `(x === 5 && y !== 4)`

5，循環(huán)與遞歸：盡量把性能差的操作放在循環(huán)外部。預(yù)先計算在循環(huán)中要使用的值。在上下文中有多個循環(huán)時，定義一個統(tǒng)一的循環(huán)變量，避免變量無意義的多次定義。

錯誤編碼

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