如何編寫高效的jQuery代碼

JQuery的編寫原則： 

本文轉載自飛 凡 人 生 路

一、不要過度使用jQuery

　　1. jQuery速度再快，也無法與原生的javascript方法相比，而且建立的jQuery對象包含的資訊量很龐大。是以有原生方法可以使用的場合，盡量避免使用jQuery。

　　例如：

$("a").click(function(){
    alert($(this).attr("id"));
});      

　　改良後↓

$("a").click(function(){
    alert(this.id);
});      

 　　2. 許多jQuery方法都有兩個版本，一個是供jQuery對象使用的版本，另一個是供jQuery函數使用的版本。由于後者不通過jQuery對象操作，是以相對開銷較小，速度比較快。

　　例如：

var $text = $("#text");
var $ts = $text.text();      

　　改良後↓

var $text = $("#text");
var $ts = $.text($text);      

這裡是用了“$.text()”的内置函數，其他類似的還有“$.data()”等。

二、緩存jQuery對象

　　查找DOM元素實際上有不小的記憶體開銷，使用選擇器的次數應該越少越好，并且盡可能緩存選中的結果，便于以後反複使用。記住，永遠不要讓相同的選擇器出現多次。

 　　例如：

$("#top").find("p.classA");
$("#top").find("p.classB");      

　　改良後↓

var cached = $("#top");
cached.find("p.classA");
cached.find("p.classB");      

三、少改動DOM結構

　　如果要多次改動DOM結構，就先把要改動的部分先取出來，改動完成後再放回去。這裡的基本思想是在記憶體中建立你确實想要的東西，最後做一次最有效的更新DOM操作。

　　例如：

var top_100_list = [...], // 這裡是100個字元串的數組  
$mylist = $("#mylist"); 
for (var i=0, l=top_100_list.length; i<l; i++){
    $mylist.append("<li>" + top_100_list[i] + "</li>"); // 100次DOM操作
}       

　　改良後↓

var top_100_list = [...],
$mylist = $("#mylist"),
top_100_li = ""; // 這個變量用來存儲變化的字元串
for (var i=0, l=top_100_list.length; i<l; i++){
    top_100_li += "<li>" + top_100_list[i] + "</li>";
} 
$mylist.html(top_100_li);// DOM操作隻有這麼一次       

　

四、命名規範

　　jQuery代碼中不免夾雜有JS代碼，如何讓jQuery代碼看起來嚴謹有序，規範自己的命名規則能更好的提高代碼的閱讀性。

　　1. 函數名：function getResultByUserId(){..}，遵循駱駝命名法，首字母小寫，單詞首字母大寫，盡量短而且明确表達方法的用意。

　　還可以這樣定義：

$.flushCartItemList = function() {
    isAjaxDate = true;
}      

　　2. 參數名：function method(recordIdx, recordVal){..}, 同函數名，參數盡量用縮寫。

命名就是要有意義，一些屬性的縮寫也很有講究，例如：索引：idx；值：val；長度：len；名稱：nm；等...

　　

　　3. 變量名：var user_id; var user_list_tab; var user_list_tr_1;，一般以下劃線為單詞分割，按照“命名_元素_索引”的規則。

jQuery對象的變量名要加上“$”的字首以區分javascript對象。

jQuery編寫技巧：

一、選擇器擇優

　　選擇器是jQuery的基礎，如何選擇效率最高的選擇器，先要了解各種選擇器的性能差異。

　　①ID選擇器和标簽元素選擇器：$("#ID"); $("Tag");

jQuery内部會自動調用浏覽器的原生方法（getElementById();，getElementByTagName();），是以執行速度快。

　　②類選擇器：$(".Class");

jQuery會周遊所有DOM節點查找class=Class的DOM對象，是以執行速度較慢。

　　③僞類選擇器和屬性選擇器：$(":Type"); $("[Attribute='Value']");

因為浏覽器沒有針對它們的原生方法，這兩種選擇器執行速度是最慢的。不過，不排除一些第三方浏覽器增加了querySelector()和querySelectorAll()方法，是以會使這類選擇器的性能有大幅提高。

二、鍊式寫法

　　$("div").find("h3").eq(2).html("Hello");

采用鍊式寫法時，jQuery會自動緩存每一步的結果，比非鍊式寫法（手動緩存）要快。

三、高效循環

　　循環總是一種比較耗時的操作，javascript原生循環方法for和while，要比jQuery的“.each()”快。并且關于for循環，以下這種寫法效率最高。

for (var i = 0, len = array.length; i < len; i++) {
  // alert(i);
}      

先聲明變量，再進行循環操作，效率遠比周遊數組“

for

(

var

i 

in

arr)”

高得多，也比循環取得數組長度“

for

(

var

i = 0; i < arr.length; i++)

”的效率高！

四、字元串拼接

　　字元串的拼接在開發中會經常遇到，用“+=”的方式來拼接字元串的效率非常的低，我們可以利用數組的“.join()”方法。

var array = [];

for(var i = 0; i < 10000; i++){
    array[i] = "<input type='button' value='a'>";
}

document.getElementById("one").innerHTML = array.join("");      

以前我很喜歡用數組的原生的方法“.push()”，其實直接用arr[i]或者arr[arr.length]的方式要快一點，但是差别不是很大。

五、頁面加載

　　盡管$(function(){}); 确實很有用， 它是在所有DOM元素加載完成。如果你發現你的頁面一直是載入中的狀态，很有可能就是這個函數引起的。你可以通過将jQuery函數綁定到$(window).load 事件的方法來減少頁面載入時的cpu使用率。

$(window).load(function(){
    // 頁面完全載入(包括所有的DOM元素和JS代碼)後才初始化的jQuery函數. 
});      

一些特效的功能，例如拖放，視覺特效和動畫，預載入隐藏圖像等等，都是适合這種技術的場合。

★不是每一次努力都會有收獲，但是每一次收獲都必須努力，這是一個不公平的不可逆轉的命題★