編寫高效jQuery代碼的4個原則和5個技巧
jQuery的編寫原則：
一、不要過度使用jQuery
1. jQuery速度再快，也無法與原生的javascript方法相比，而且建立的jQuery對象包含的信息量很龐大。所以有原生方法可以使用的場合，盡量避免使用jQuery。
$("a").click(function(){
alert($(this).attr("id"));
});
//改良后↓
$("a").click(function(){
alert(this.id);
});
2. 許多jQuery方法都有兩個版本，一個是供jQuery對象使用的版本，另一個是供jQuery函數(shù)使用的版本。由于后者不通過jQuery對象操作，所以相對開銷較小，速度比較快。
var $text = $("#text");
var $ts = $text.text();
//改良后↓
var $text = $("#text");
var $ts = $.text($text);
這里是用了“$.text()”的內(nèi)置函數(shù)，其他類似的還有“$.data()”等。
二、緩存jQuery對象
查找DOM元素實(shí)際上有不小的內(nèi)存開銷，使用選擇器的次數(shù)應(yīng)該越少越好，并且盡可能緩存選中的結(jié)果，便于以后反復(fù)使用。記住，永遠(yuǎn)不要讓相同的選擇器出現(xiàn)多次。
例如：
$("#top").find("p.classA");
$("#top").find("p.classB");
改良后↓
var cached = $("#top");
cached.find("p.classA");
cached.find("p.classB");
三、少改動DOM結(jié)構(gòu)
如果要多次改動DOM結(jié)構(gòu)，就先把要改動的部分先取出來，改動完成后再放回去。這里的基本思想是在內(nèi)存中建立你確實(shí)想要的東西，最后做一次最有效的更新DOM操作。
例如：
var top_100_list = [...], // 這里是100個字符串的數(shù)組
$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操作只有這么一次
四、命名規(guī)范
jQuery代碼中不免夾雜有JS代碼，如何讓jQuery代碼看起來嚴(yán)謹(jǐn)有序，規(guī)范自己的命名規(guī)則能更好的提高代碼的閱讀性。
1. 函數(shù)名：function getResultByUserId(){..}，遵循駱駝命名法，首字母小寫，單詞首字母大寫，盡量短而且明確表達(dá)方法的用意。
還可以這樣定義：
$.flushCartItemList = function() {
isAjaxDate = true;
}
2. 參數(shù)名：function method(recordIdx, recordVal){..}, 同函數(shù)名，參數(shù)盡量用縮寫。
命名就是要有意義，一些屬性的縮寫也很有講究，例如：索引：idx；值：val；長度：len；名稱：nm；等...
3. 變量名：var user_id; var user_list_tab; var user_list_tr_1;，一般以下劃線為單詞分割，按照“命名_元素_索引”的規(guī)則。
jQuery對象的變量名要加上“$”的前綴以區(qū)分javascript對象。
jQuery編寫技巧：
一、選擇器擇優(yōu)
選擇器是jQuery的基礎(chǔ)，如何選擇效率最高的選擇器，先要了解各種選擇器的性能差異。
①ID選擇器和標(biāo)簽元素選擇器：$("#ID"); $("Tag");
jQuery內(nèi)部會自動調(diào)用瀏覽器的原生方法（getElementById();，getElementByTagName();），所以執(zhí)行速度快。
②類選擇器：$(".Class");
jQuery會遍歷所有DOM節(jié)點(diǎn)查找class=Class的DOM對象，所以執(zhí)行速度較慢。
③偽類選擇器和屬性選擇器：$(":Type"); $("[Attribute='Value']");
因?yàn)闉g覽器沒有針對它們的原生方法，這兩種選擇器執(zhí)行速度是最慢的。不過，不排除一些第三方瀏覽器增加了querySelector()和querySelectorAll()方法，因此會使這類選擇器的性能有大幅提高。
二、鏈?zhǔn)綄懛?/STRONG>
采用鏈?zhǔn)綄懛〞r，jQuery會自動緩存每一步的結(jié)果，比非鏈?zhǔn)綄懛ǎㄊ謩泳彺妫┮臁?/P>
三、高效循環(huán)
循環(huán)總是一種比較耗時的操作，javascript原生循環(huán)方法for和while，要比jQuery的“.each()”快。并且關(guān)于for循環(huán)，以下這種寫法效率最高。
for (var i = 0, len = array.length; i < len; i++) {
// alert(i);
}
先聲明變量，再進(jìn)行循環(huán)操作，效率遠(yuǎn)比遍歷數(shù)組“for (var i in arr)”高得多，也比循環(huán)取得數(shù)組長度“for (var i = 0; i < arr.length; i++)”的效率高！
四、字符串拼接
字符串的拼接在開發(fā)中會經(jīng)常遇到，用“+=”的方式來拼接字符串的效率非常的低，我們可以利用數(shù)組的“.join()”方法。
var array = [];
for(var i = 0; i < 10000; i++){
array[i] = "<input type='button' value='a'>";
}
document.getElementById("one").innerHTML = array.join("");
以前我很喜歡用數(shù)組的原生的方法“.push()”，其實(shí)直接用arr[i]或者arr[arr.length]的方式要快一點(diǎn)，但是差別不是很大。
五、頁面加載
盡管$(function(){}); 確實(shí)很有用， 它是在所有DOM元素加載完成。如果你發(fā)現(xiàn)你的頁面一直是載入中的狀態(tài)，很有可能就是這個函數(shù)引起的。你可以通過將jQuery函數(shù)綁定到$(window).load 事件的方法來減少頁面載入時的cpu使用率。
$(window).load(function(){
// 頁面完全載入(包括所有的DOM元素和JS代碼)后才初始化的jQuery函數(shù).
});
一些特效的功能，例如拖放，視覺特效和動畫，預(yù)載入隱藏圖像等等，都是適合這種技術(shù)的場合。
相關(guān)文章
jquery實(shí)現(xiàn)表格奇數(shù)偶數(shù)行不同樣式(有圖為證及實(shí)現(xiàn)代碼)
表格奇數(shù)偶數(shù)行不同樣式,相信很多網(wǎng)友都想試試手吧，由于經(jīng)驗(yàn)上千所以只能半途而廢，為了響應(yīng)網(wǎng)友的心聲，本文整理了一些操作技巧，有圖為證，感興趣的朋友可以了解下哦2013-01-01
jQuery實(shí)現(xiàn)字符串按指定長度加入特定內(nèi)容的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)字符串按指定長度加入特定內(nèi)容的方法,實(shí)例分析了jQuery操作字符串的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)購物車數(shù)字加減效果
基于jQuery中ajax的相關(guān)方法匯總(必看篇)
jQuery實(shí)現(xiàn)帶動畫效果的多級下拉菜單代碼
Jquery左右滑動插件之實(shí)現(xiàn)超級炫酷動畫效果附源碼下載
