Jen

jQuery the Right Way

http://eng.wealthfront.com/2010/10/jquery-right-way.html

在今天這篇文章主要是來看看jQuery的「選取器」(selector)以及如何有效地來運用它。

第1部分:搜尋
jQuery的核心就像他的名字Query一樣,主要為搜尋所設計的query engine。在寫jQuery Selector 的時候就要像你在寫SQL Query一樣小心它的效能,這篇文章主要就是在講一些有關jQuery Selector的基本但又常被忽視的觀念。

好的「Query」歸納為主要3點觀念。

1.使用正確的選取器。
2.縮小搜尋範圍。
3.快取。(這個部分蠻不錯的)


Select Query從快到慢的排名如下:
1.ID selectors ("#ID")
2.element selectors("form","input", etc.)
3.Class selectors (".className")
4.Pseudo & Attribute selectors(":visible, :hidden,[attribute=value]");

最快的 ID selectors 及element selectors 主要是靠著原生的 DOM 操作,就是getElementById() 及 getElementsByTagName()。
而Class Selector及Psudo & Attribute Selectors在Query的部分,假設今天你要Query :hidden 這個屬性的Dom 物件,jQuery (1.4.2版本) 的原始碼如下所示:

jQuery.expr.filters.hidden = function (elem) {
    var width = elem.offsetWidth,
    height = elem.offsetHeight,
    skip = elem.nodeName.toLowerCase() === "tr";
    return width === 0 && height === 0 &&
    !skip ? true : width > 0 && height > 0 &&
    !skip ? false : jQuery.curCSS(elem, "display") === "none";
};


所以盡量利用ID Selector 及 element selectors 縮小搜尋範圍。
第2部分:DOM並非資料庫
第3部分:事件的注意事項
a.避免在function裏面自行的觸發事件,例如在function裏面去寫Button.click().
b.如果你發現把一個event hanlder 指給很多物件,應該使用jQuery的delegates

JavaScript 及jQuery 效能議題是非常重要且深奧,這些都都只是冰山一角,從高中寫Java Script到現在,現在幾乎也都在用jQuery,用到的都是皮毛。
(持續新增)

0 意見: