jQuery回溯處理的設計

關於

jquery

物件的包裝

var $aaron = $("aaron");

通過對sizzle的分析，我們可以得知query選擇器最終都是通過dom介面實現取值的, 但是通過jquery處理後返回的不僅僅只有dom物件，而是乙個包裝容器，返回jquery物件：$aaron。

我們來看一下**：

在jquery物件中有個prevobject物件，這個是幹嘛用的呢？

如果你想知道prevobject是做什麼的，咱們首先得先來了解一下jquery物件棧，jquery內部維護著乙個jquery物件棧。每個遍歷方法都會找到一組新元素（乙個jquery物件），然後jquery會把這組元素推入到棧中。

而每個jquery物件都有三個屬性：context、selector和prevobject，其中的prevobject屬性就指向這個物件棧中的前乙個物件，而通過這個屬性可以回溯到最初的dom元素集中。

為了方便理解，我們做幾個簡單的測試：

下面有乙個父元素ul,巢狀了乙個li節點：

我們現給li繫結乙個事件，這個很簡單，找到ul下面的li，繫結即可：

var aaron = $("#aaron");
aaron.find('li').click(function())

此時我又想給父元素繫結乙個事件，我們是不是又要在aaron上繫結一次事件呢？是的，上面**通過find處理後，此時的上下文是指向每乙個li了,所以必須要重新引用aaron元素（li的父元素），然後再繫結click事件：

aaron.click(function())

這樣會不會很麻煩，所以jquery引入乙個簡單的內部定址的機制，可以回溯到之前的dom元素集合，通過end()方法可以實現：

aaron.find('li').click(function() ).end().click(function() )

jquery為我們操作這個內部物件棧提供個非常有用的2個方法

.end()

.addback()

這裡需要指出來可能有些api上是andself，因為就query的api是這樣寫的，andself現在是.addback()的乙個別名。在jquery1.8和更高版本中應使用.addback()

原始碼其實也是這樣的

jquery.fn.andself = jquery.fn.addback;

呼叫第乙個方法只是簡單地彈出乙個物件（結果就是回到前乙個jquery物件）。第二個方法更有意思，呼叫它會在棧中回溯乙個位置，然後把兩個位置上的元素集組合起來，並把這個新的、組合之後的元素集推入棧的上方。

利用這個dom元素棧可以減少重複的查詢和遍歷的操作，而減少重複操作也正是優化jquery**效能的關鍵所在。