jQuery 2.0.3 源碼分析 回溯魔法 end()和pushStack()

瞭解了jQuery對DOM進行遍歷背後的工做機制，能夠在編寫代碼時有意識地避免一些沒必要要的重複操做，從而提高代碼的性能

從這章開始慢慢插入jQuery內部一系列工具方法的實現

關於jQuery對象的包裝

var $aaron = $("aaron");

經過對sizzle的分析呢，jQuery選擇器，反正最終都是經過dom接口實現取值的, 可是經過jQuery處理後返回的不只僅只有dom對象，而是一個包裝容器

返回的jQuery對象：$aaron

jQuery對象,其中有個prevObject這個是幹嗎用的呢？

 

---

jQuery對象棧

jQuery內部維護着一個jQuery對象棧。每一個遍歷方法都會找到一組新元素（一個jQuery對象），而後jQuery會把這組元素推入到棧中。

而每一個jQuery對象都有三個屬性：context、selector和prevObject，其中的prevObject屬性就指向這個對象棧中的前一個對象，而經過這個屬性能夠回溯到最初的DOM元素集。

 

---

簡單的測試demo

父元素ul,嵌套了li節點， 咱們現給li綁定一個事件

<ul id="aaron">
    parent
    <li>child</li>
</ul>

這個很簡單找到ul下面的li,綁定便可

var aaron = $("#aaron");
    aaron.find('li').click(function(){
        alert(1)     //1
    })

 

此時我又想給父元素綁定一個事件，咱們是否是又要在aaron上綁定事件？

經過find處理後,此時的上下文是每個li了,因此必需要從新引用aaron父元素

aaron.click(function(){
      alert(2)     //1
 })

 

全部jQuery引入一個機制，能夠回溯到以前的dom元素集合

經過end()方法

aaron.find('li').click(function(){
        alert(1)
    }).end().click(function(){
        alert(2)
    })

 

---

jQuery爲咱們操做這個內部對象棧提供了兩個很是有用的方法：

• .end()
• .andBack()

調用第一個方法只是簡單地彈出一個對象（結果就是回到前一個jQuery對象）。第二個方法更有意思，調用它會在棧中回溯一個位置，而後把兩個位置上的元素集組合起來，並把這個新的、組合以後的元素集推入棧的上方。

利用這個DOM元素棧能夠減小重複的查詢和遍歷的操做，而減小重複操做也正是優化jQuery代碼性能的關鍵所在。

 

.end() 方法

大多數 jQueryDOM遍歷 方法來操做 jQuery 對象實例，並建立一個新的對象，匹配一個不一樣的 DOM 元素集合。當發生這種狀況時，其實是新的元素集合被壓入到對象內部維護的棧中。每次過濾方法都會被壓入棧中。當咱們須要返回到前一個狀態時，咱們可使用end() 進行出棧操做，來返回棧中的前一個狀態。

假設頁面上有幾個短的列表

<ul class="first">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>
<ul class="second">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>

end() 方法主要用於 jQuery 的鏈式屬性中。當沒有使用鏈式用法時，咱們一般只是調用變量名上的前一個對象，因此咱們不須要操做棧。使用 end() 時，咱們能夠一次性調用全部須要的方法：

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

 

鏈式的原理就是要返回當前操做的上下文

錯誤的：

跟上面的demo同樣，上下文被切換了，因此下面find(‘bar’)出錯了

$('ul.first').find('.foo').css('background-color', 'red').find('.bar').css('background-color', 'green');

 

正確的：

首先在鏈式用法中只在第一個列表中查找樣式爲 foo 的項目，並將其背景色變成紅色。而後 end()返回調用 find() 以前的狀態。所以，第二次 find() 將只會查找 <ul class="first"> 中的 '.bar'，而不是繼續在<li class="foo"> 中進行查找，結果是將匹配到的元素的背景色變成綠色。上述代碼的最終結果是，第一個列表中的第 1 和第 3 個列表項的背景色有顏色，而第二個列表中的任何項目都沒有背景色。

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

總的來講end方法就是回溯到上一個dom合集,所以對於鏈式操做與優化，這個方法仍是頗有意義的

 

---

源碼實現

既然是回溯到上一個dom合集，那麼確定end方法中返回的就是一個jQuery對象了，因此咱們看源碼

其實就是返回prevObject對象了

end: function() {
            return this.prevObject || this.constructor(null);
        },

 

prevObject在什麼狀況下會產生？

在構建jQuery對象的時候，經過pushStack方法構建

jQuery.fn.extend({
        find: function( selector ) {

            ...........................省略................................

             //經過sizzle選擇器，返回結果集
             jQuery.find( selector, self[ i ], ret );

            // Needed because $( selector, context ) becomes $( context ).find( selector )
            ret = this.pushStack( len > 1 ? jQuery.unique( ret ) : ret );
            ret.selector = this.selector ? this.selector + " " + selector : selector;
            return ret;
        }

 

pushStack：將一個DOM元素集合加入到jQuery棧。

pushStack: function( elems ) {

            // Build a new jQuery matched element set
            var ret = jQuery.merge( this.constructor(), elems );

            // Add the old object onto the stack (as a reference)
            ret.prevObject = this;
            ret.context = this.context;

            // Return the newly-formed element set
            return ret;
        },

流程解析：

1. 構建一個新的jQuery對象，無參 this.constructor()，只是返回引用this

2. jQuery.merge 把elems節點，合併到新的jQuery對象

3. 給返回的新jQuery對象添加屬性prevObject ，因此咱們看到prevObject 其實仍是當前jQuery的一個引用罷了

因此也就是爲何經過prevObject能取到上一個合集的引用了

 

---

總結：

• pushStack()方法在jQuery的DOM操做中被頻繁的使用, 如在parent(), find(), filter()中, 固然還有其餘許多相似的方法, 它們每每須要返回一個jQuery封裝過的DOM結果集.但在咱們本身寫jQuery代碼的時候,卻不多關注或使用過pushStack()
• 在jQuery內部,pushStack()方法經過改變一個jQuery對象的prevObject屬性來"跟蹤"鏈式調用中前一個方法返回的DOM結果集(被jQuery封裝過,也是個jQuery對象,說是"跟蹤",是由於實際存儲的是個引用). 當咱們再鏈式調用end()方法後, 內部就返回當前jQuery對象的prevObject.