編寫高效jQuery程式碼的4個原則和5個技巧

編寫高效jQuery程式碼的4個原則和5個技巧_jquery

WBOY

發布： 2016-05-16 16:51:19

原創

950 人瀏覽過

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 = [list ], // 這裡是100個字串的陣列  
$mylist = $("#mylist"); 
for (var i=0, l=top_100_list.length; i    $mylist.append("" top_100_list[i] "
"); // 100次DOM操作
}
改良後↓
var top_100_list = [... ],
$mylist = $("#mylist"),
top_100_li = ""; // 這個變數用來儲存變化的字串
for (var i=0, l=top_100_list.length ; i    top_100_li = "" top_100_list[i] "
";
} 
$mylist.html(top_100_li);// DOM作業只有如此一次

四、命名規範

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

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

也可以這樣定義：

複製程式碼程式碼如下:

$. 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()方法，因此會使這類選擇器的效能大幅提升。

二、鍊式寫法

複製程式碼程式碼如下:

$("divh3").find("h3")。 (2).html("Hello");

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

三、高效循環

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

複製程式碼程式碼如下:

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

先宣告變量，再進行循環操作，效率遠比遍歷數組「for (var i in arr)」高得多，也比迴圈取得數組長度「for (var i = 0; i

四、字串拼接

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

複製程式碼程式碼如下:

var array = [];

var array = [];
for(var i = 0; i array[i] = "";}

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

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

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

複製程式碼

程式碼如下:$(window).load(function(){ // 頁面完全載入(包含所有的DOM元素和JS程式碼)後才初始化的jQuery函數. }); 一些特效的功能，例如拖放，視覺特效和動畫，預先載入隱藏影像等等，都是適合這種技術的場合。