jQuery的編寫原則

jQuery的編寫原則：

1、不要過分使用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()」等。

2、緩存jQuery對象

查找DOM元素實際上有不小的內存開銷，使用選擇器的次數應該越少越好，而且儘量緩存選中的結果，便於之後反覆使用。記住，永遠不要讓相同的選擇器出現屢次。

例如：

$("#top").find("p.classA");
$("#top").find("p.classB");
改良後↓
var cached = $("#top");
cached.find("p.classA");
cached.find("p.classB");

3、少改動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操做只有這麼一次

4、命名規範

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編寫技巧：

1、選擇器擇優

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

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

jQuery內部會自動調用瀏覽器的原生方法（getElementById();，getElementByTagName();），因此執行速度快。

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

jQuery會遍歷全部DOM節點查找class=Class的DOM對象，因此執行速度較慢。

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

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

2、鏈式寫法

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

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

3、高效循環

　　循環老是一種比較耗時的操做，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++)」的效率高！

4、字符串拼接

　字符串的拼接在開發中會常常遇到，用「+=」的方式來拼接字符串的效率很是的低，咱們能夠利用數組的「.join()」方法。

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

直接用arr[i]或者arr[arr.length]的方式要快一點，可是差異不是很大。

5、頁面加載

　儘管$(function(){}); 確實頗有用， 它是在全部DOM元素加載完成。若是你發現你的頁面一直是載入中的狀態，頗有可能就是這個函數引發的。你能夠經過將jQuery函數綁定到$(window).load 事件的方法來減小頁面載入時的cpu使用率。

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

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