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