前端代碼標(biāo)準(zhǔn)最佳實(shí)踐：javascript篇

看見就非常 2012-08-31

展開全文

前端代碼標(biāo)準(zhǔn)最佳實(shí)踐：javascript篇

前言

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

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

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

（1）編碼格式

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

1，縮進(jìn)：不使用tab（\0x09）縮進(jìn)，以4個(gè)空格作為邏輯的縮進(jìn)。

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

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

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

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

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

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

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

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

（2）命名規(guī)則

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

1，大小寫：現(xiàn)在較流行javascript的面向?qū)ο缶幊蹋敲淳蜁?huì)有公有或私有的概念，原則是公有接口的命名首字母大寫，私有接口的命名首字母小寫。

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

不推薦

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)該有個(gè)初始化的值，或者設(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)該用括號(hào)包含函數(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)用某個(gè)函數(shù)，應(yīng)該定義一個(gè)函數(shù)別名，減少調(diào)用范圍鏈的跳轉(zhuǎn)，提高性能。

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

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

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

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

錯(cuò)誤編碼

// 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樹的更新次數(shù)，盡量合并Dom樹的更新操作，提高性能。減少賦值給innerHTML的次數(shù)。避免給Dom objects上的expando屬性賦值，減少可能的內(nèi)存泄漏。

7，使用全局的變量和方法：避免使用eval，eval非常耗性能。如果要使用全局的變量或方法，應(yīng)該加上window，減少上下文的定義查找。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：看見就非常 > 《協(xié)議標(biāo)準(zhǔn)》

舉報(bào)/認(rèn)領(lǐng)