|
昨天臨下班時，在CodeProject上看到了這篇文章的英文版，覺得不錯。然后，昨晚就加把勁把它翻譯出來。初次翻譯，水平有限，難免出錯，敬請指正。 介紹我發(fā)現(xiàn)，jQuery真是一個偉大的框架，它可以非常容易而輕松地?cái)U(kuò)展了我們可以做的客戶端代碼程序。在這篇文章中，我將重點(diǎn)介紹一些使用jQuery的技巧，給你開一個高效使用jQuery框架的好頭。即使你已經(jīng)對jQuery比較熟悉，但是其中的一些技巧依然可以幫助你更有效而恰當(dāng)?shù)厥褂胘Query。 第一條：使用最新版的jQueryjQuery庫的每個穩(wěn)定發(fā)布版都會引入性能優(yōu)化，同時修復(fù)一下Bug。大多數(shù)情況下，升級僅僅涉及到腳本版本標(biāo)記的修改。提升網(wǎng)站性能最簡單的方式莫過于使用最新版的jQuery。你可以使用Google CDN服務(wù)提供的jQuery，Google服務(wù)器上托管了很多JavaScript庫。使用方式如下：
<script src="http://ajax./ajax/libs/jquery/1.6.1/jquery.min.js"> </script>
<script type="text/javascript" src="http://ajax./ajax/libs/jquery/1.6/jquery.min.js"> </script> 下面的例子將默認(rèn)使用1.6分支的最新版。不過，需要指出的是，據(jù)Css-Tricks的介紹，使用分支最新版的方式只能緩存幾個小時，所以最好不要在生產(chǎn)環(huán)境中使用。 第二條：使用簡單的選擇器早期的jQuery獲取DOM元素，使用的是getElementById(), getElementsByTagName() 和 getElementsByClassName()等方法。目前，所有主流瀏覽器都支持querySelectorAll()方法，這個方法可以使用CSS選擇器。不過，你還是應(yīng)該優(yōu)化獲取元素的方式。 $('li[data-selected="true"] a') // Looks good, but slow
$('li.selected a') // Better
$('#ElementID) // Best
使用ID獲取元素最快！ 第三條：緩存查詢元素的結(jié)果如果你沒有別的選擇，只能使用DOM選擇器時，應(yīng)該將查詢結(jié)果緩存起來。例如： var selectedListItem = $('li[data-selected="true"]a')
現(xiàn)在，這個結(jié)果被緩存到了變量"selectedListItem"，這個變量可以被多次使用，而且不會對性能有任何影響。 第四條：使用jQuery擴(kuò)展的選擇器jQuery為了便于使用，給出了很多擴(kuò)展的選擇器，例如 :visible, :hidden, :animated等等，這些選擇器還不符合CSS3規(guī)范。這樣導(dǎo)致的結(jié)果是，如果你使用這些選擇器，jQuery庫將不能使用querySelectorAll()方法。為了補(bǔ)救這個損失，你可以首先使用規(guī)范的選擇器獲取想匹配的元素，然后使用這些擴(kuò)展的選擇器篩選出想要的元素。例如： $('a.button:hidden'); //Does not use querySelectorAll()
$('a.button').filter(':hidden'); //Uses it
上面的結(jié)果是一樣的，但是第二行的例子會更快。 第五條：jQuery對象可以當(dāng)成數(shù)組來使用選擇器運(yùn)行后獲得的結(jié)果就是jQuery對象。然后，jQuery庫使得jQuery對象可以當(dāng)成數(shù)組來使用，你可以使用下標(biāo)來獲取元素，還可以獲取數(shù)組長度。 var buttons = $('#navigation a.button'); //Selecting all the navigation b //Selecting all the navigation buttons
// We can loop though the collection:
for(var i=0;i<buttons.length;i++) {
console.log(buttons[i]); // A DOM element, not a jQuery object
}
如果你追求的是性能，你可以使用簡單數(shù)組代替$.each()，這樣可以使你的代碼運(yùn)行得更快。 第六條：檢查元素是否存在檢查元素長度是確定你獲取的元素是否存在或元素集合是否包含元素的唯一方法。 If (buttons.length) { // True only if buttons contains elements
// Do something
}
第七條：創(chuàng)建jQuery空對象創(chuàng)建一個新的jQuery對象可能涉及重大的開銷。有時，你可能需要創(chuàng)建一個空的對象，然后使用add()方法填充這個空對象。 var container = $([]); container.add(another_element); 第八條：檢查頁面大小瀏覽器渲染包含大量DOM元素或者大量文本的頁面時，需要消耗大量的時間。為了查看網(wǎng)頁中DOM元素的數(shù)量，你可以在控制臺中執(zhí)行如下代碼： console.log($('*').length);
如果這個數(shù)字很小的話，網(wǎng)頁的渲染會很快。否則，你可以通過刪除多余的標(biāo)簽和不必要的包裝元素來優(yōu)化網(wǎng)頁性能。 第九條：將diamond封裝成jQuery插件如果你寫了一些jQuery代碼，你可以將這些代碼封裝成jQuery插件。這樣可以提高代碼重用性，同時減少依賴，更容易組織代碼。創(chuàng)建jQuery插件其實(shí)很簡單。如下： function($) {
$.fn.yourPluginName = function() {
// Your code goes here
return this;
};
})(jQuery);
第十條：本地存儲（Local Storage）本地存儲（Local storage）是一組為了在客戶端存儲信息而定義的API。如果你向增加數(shù)據(jù)，你只需要向全局對象localStorage中增加一個屬性即可。例如： localStorage.someData = "This data is going to persist across page refreshes and browser restarts"; 不爽的是，舊瀏覽器不支持這個對象。在這種情況下，可以使用一些jQuery的插件達(dá)到這個目的。如果localStorage不可用的話，這些插件會有不同的反饋，但是卻可以保證客戶端存儲在任何瀏覽器中正常工作。下面是一個插件的例子： // Check if "key" exists in the storage.
var value = $.jStorage.get("key");
if(!value) {
// if not - load the data from the server
value = load_data_from_server();
// and save it
$.jStorage.set("key",value);
}
第十一條：使用事件委托為任何匹配的元素添加事件處理程序，即使對于在頁面初始化后新添加的元素依然生效。 $('button.yourClassName').live('click', yourFunctionName);
這樣即使你使用Ajax加載元素或者使用JavaScript添加元素，事件處理程序依然可以自動生效。 同樣，關(guān)閉事件處理如下： $('button.yourClassName').die('click', yourFunctionName);
事件委托相比常規(guī)事件處理（事件綁定）有一定的限制，但是在大多數(shù)情況下還是可以正常工作的。值得注意的是，jQuery 1.3以后才開始支持事件委托。 D瓜哥以前寫過一篇文章，專門分析事件委托和事件綁定的區(qū)別。請移步： “實(shí)例分析JavaScript中的事件委托和事件綁定”。 第十二條：對象克隆使用jQuery的.clone()方法可以克隆任意DOM對象。 // Clone the DIV
var cloned = $('#yourdivID').clone();
jQuery的.clone()方法不能克隆任意JavaScript對象。如果想克隆JavaScript對象，可以使用如下代碼： // Shallow copy
var newObject = jQuery.extend({}, oldObject);
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);
第十三條：測試隱藏對象我們可以使用jQuery中的.hide()、 .show() 方法來改變元素的可見狀態(tài)。使用如下代碼來測試元素是否可見： if($(element).is(":visible") == "true") {
//The element is Visible
}
第十四條：查找最近的父級DIV標(biāo)簽如果你想查找DIV包裝對象（無論該對象是否有ID屬性），可以jQuery提供的選擇器。代碼如下： $("#yourControl").closest("div");
原文作者：S.Kaur（阿三的雌性程序猿，果然不同凡響?。。? |
|
|
