pushStack是jQuery內(nèi)核中一個(gè)非常重要的函數(shù)，它是如此重要，以至于許多jQuery內(nèi)部函數(shù)中都頻繁用到它。平常情況下，雖然很少用到它, 但是掌握這個(gè)函數(shù)，不僅有利于理解jQuery的運(yùn)行原理，還方便我們做更加高級(jí)的jQuery操作。

顧名思義，pushStack是入棧, 棧作為一種數(shù)據(jù)結(jié)構(gòu)，是一種只能在一端進(jìn)行插入和刪除操作的特殊線性表。數(shù)據(jù)入棧時(shí)，類似與我們進(jìn)電梯，后進(jìn)而先出, 如下圖:

jQuery中的棧其實(shí)并不是真正的棧，而是給jQuery對(duì)象附加一個(gè)屬性，指向當(dāng)前對(duì)象的上一個(gè)對(duì)象, 通過(guò)end方法就能返回上一個(gè)元素。如下:

<span>1</span>
<span>2</span>
<span>3</span>
<script>
$('span').eq(0).css('fontSize','20px').end().fadeOut(2000);
</script>

上面的代碼會(huì)使第一個(gè)span的字體大小為20px，并讓所有span在2秒鐘之內(nèi)fadaout。

pushStack屬于jQuery的實(shí)例方法，通過(guò)jQuery對(duì)象調(diào)用，如通過(guò)$().pushStack(document.getElementsByTagName(‘div')).css(‘background','blue')把所有div的背景都設(shè)置為藍(lán)色。那么pushStack的原理是什么，為什么傳入的DOM對(duì)象可以用css方法操作呢？先來(lái)看一下jQuery中pushStack的源碼:

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;
}
//jQuery.merge
merge: function( first, second ) {
 var l = second.length,
 i = first.length,
 j = 0;
 if ( typeof l === "number" ) {
 for ( ; j < l; j++ ) {
  first[ i++ ] = second[ j ];
 }
 } else {
 while ( second[j] !== undefined ) {
  first[ i++ ] = second[ j++ ];
 }
 }
 first.length = i;
 return first;
}

pushStack的實(shí)現(xiàn)比較簡(jiǎn)單，主要涉及到j(luò)Query的靜態(tài)方法merge, 這個(gè)方法用來(lái)合并對(duì)象, 設(shè)計(jì)思路是在第一個(gè)對(duì)象的基礎(chǔ)上，把第二個(gè)對(duì)象的屬性(0至n)附加上去, 理解這一點(diǎn)很重要。再回到pushStack這個(gè)函數(shù)，首先定義一個(gè)局部變量ret存儲(chǔ)合并對(duì)象，然后給這個(gè)對(duì)象存儲(chǔ)prevObject和context屬性，最后返回合并之后的ret對(duì)象。這里有幾點(diǎn)需要注意:
1, this.constructor 就是jQuery的構(gòu)造函數(shù)init，所以this.constructor()返回一個(gè)jQuery對(duì)象.
2, 由于jQuery merge函數(shù)返回的對(duì)象是第二個(gè)函數(shù)附加到第一個(gè)上面，所以ret也是一個(gè)jQuery對(duì)象，這里可以解釋為什么pushStack出入的DOM對(duì)象也可以用CSS方法進(jìn)行操作。
3, 返回的對(duì)象的prevObject屬性指向上一個(gè)對(duì)象，所以可以通過(guò)這個(gè)屬性找到棧的上一個(gè)對(duì)象.

最新評(píng)論