jQuery_jquery での PushStack の実装原則と応用例

pushStack は jQuery カーネルの非常に重要な関数であり、多くの jQuery 内部関数で頻繁に使用されます。通常、使用されることはほとんどありませんが、この関数を使いこなすことは、jQuery の動作原理を理解するのに役立つだけでなく、より高度な jQuery 操作を実行することも容易になります。

名前が示すように、pushStack はプッシュ スタックであり、データ構造としては、一方の端でのみ挿入と削除の操作を実行できる特殊な線形テーブルです。データがスタックにプッシュされるときは、以下に示すように、後入れ先出しでエレベーターに入るときと似ています。

jQuery のスタックは実際には実際のスタックではなく、現在のオブジェクトの前のオブジェクトを指す属性を jQuery オブジェクトに付加し、end メソッドを通じて前の要素を返すことができます。以下のように:

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

上記のコードは、最初のスパンのフォント サイズを 20 ピクセルにし、すべてのスパンを 2 秒以内にフェードアウトします。

pushStack は jQuery のインスタンス メソッドであり、$().pushStack(document.getElementsByTagName('div')).css('background',' を通じてすべての div の背景を設定するなど、jQuery オブジェクトを通じて呼び出されます。ブルー」）は青です。それでは、pushStack の原理は何でしょうか。また、なぜ受信 DOM オブジェクトを CSS メソッドで操作できるのでしょうか?まず、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 の実装は比較的単純で、主に jQuery の静的メソッド merge を使用します。このメソッドは、最初のオブジェクトに基づいて 2 番目のオブジェクトの属性 (0 から n) を追加するために使用されます。上に進みます。これを理解することが重要です。 PushStack 関数に戻ると、まずマージされたオブジェクトを格納するローカル変数 ret を定義し、次にこのオブジェクトの prevObject 属性と context 属性を格納し、最後にマージされた ret オブジェクトを返します。注意すべき点がいくつかあります:
1. this.constructor は jQuery のコンストラクター init であるため、this.constructor() は jQuery オブジェクトを返します。
2. jQuery マージ関数によって返されるオブジェクトは、最初の関数に追加された 2 番目の関数であるため、ret も jQuery オブジェクトです。これは、pushStack 内外の DOM オブジェクトが CSS メソッドでも操作できる理由を説明できます。
3. 返されたオブジェクトの prevObject プロパティは前のオブジェクトを指すため、このプロパティを通じてスタック上の前のオブジェクトを見つけることができます。