PushStack-Implementierungsprinzipien und Anwendungsbeispiele in jQuery_jquery

pushStack ist eine sehr wichtige Funktion im jQuery-Kernel. Sie ist so wichtig, dass sie häufig in vielen internen jQuery-Funktionen verwendet wird. Unter normalen Umständen ist die Beherrschung dieser Funktion, obwohl sie selten verwendet wird, nicht nur hilfreich für das Verständnis der Funktionsprinzipien von jQuery, sondern erleichtert uns auch die Durchführung komplexerer jQuery-Operationen.

Wie der Name schon sagt, ist pushStack ein Push-Stack. Als Datenstruktur ist der Stack eine spezielle lineare Tabelle, die nur an einem Ende Einfüge- und Löschvorgänge ausführen kann. Wenn Daten in den Stapel geschoben werden, ist es ähnlich wie beim Betreten des Aufzugs: „Wer zuerst reinkommt, mahlt zuerst“, wie unten gezeigt:

Der Stapel in jQuery ist eigentlich kein echter Stapel, sondern fügt dem jQuery-Objekt ein Attribut hinzu, das auf das vorherige Objekt des aktuellen Objekts zeigt, und das vorherige Element kann über die End-Methode zurückgegeben werden. Wie folgt:

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

Der obige Code sorgt dafür, dass die Schriftgröße des ersten Bereichs 20 Pixel beträgt und alle Bereiche innerhalb von 2 Sekunden ausgeblendet werden.

pushStack ist eine Instanzmethode von jQuery und wird über das jQuery-Objekt aufgerufen, z. B. das Festlegen des Hintergrunds aller Divs über $().pushStack(document.getElementsByTagName('div')).css('background',' blau') ist blau. Was ist also das Prinzip von pushStack und warum kann das eingehende DOM-Objekt mit CSS-Methoden manipuliert werden? Werfen wir zunächst einen Blick auf den Quellcode von pushStack in 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;
}
//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;
}

Die Implementierung von pushStack ist relativ einfach und umfasst hauptsächlich die statische Methode merge von jQuery. Die Entwurfsidee besteht darin, die Attribute (0 bis n) des zweiten Objekts anzufügen . Gehen Sie nach oben, es ist wichtig, das zu verstehen. Zurück zur PushStack-Funktion: Definieren Sie zunächst eine lokale Variable ret, um das zusammengeführte Objekt zu speichern, speichern Sie dann die Attribute prevObject und context für dieses Objekt und geben Sie schließlich das zusammengeführte ret-Objekt zurück. Hier sind ein paar Dinge zu beachten:
1. this.constructor ist der Konstruktor-Init von jQuery, daher gibt this.constructor() ein jQuery-Objekt zurück.
2. Da das von der jQuery-Merge-Funktion zurückgegebene Objekt die zweite an die erste angehängte Funktion ist, ist ret auch ein jQuery-Objekt. Dies kann erklären, warum die DOM-Objekte in und aus pushStack auch mit CSS-Methoden bedient werden können.
3. Die prevObject-Eigenschaft des zurückgegebenen Objekts zeigt auf das vorherige Objekt, sodass Sie über diese Eigenschaft das vorherige Objekt auf dem Stapel finden können.