Principes de mise en œuvre de PushStack et exemples d'application dans jQuery_jquery

pushStack est une fonction très importante du noyau jQuery. Elle est si importante qu'elle est fréquemment utilisée dans de nombreuses fonctions internes de jQuery. Dans des circonstances normales, bien qu'elle soit rarement utilisée, la maîtrise de cette fonction est non seulement utile pour comprendre les principes de fonctionnement de jQuery, mais nous permet également d'effectuer des opérations jQuery plus avancées.

Comme son nom l'indique, pushStack est une pile push. En tant que structure de données, la pile est une table linéaire spéciale qui ne peut effectuer des opérations d'insertion et de suppression qu'à une extrémité. Lorsque les données sont placées dans la pile, cela ressemble à lorsque nous entrons dans l'ascenseur, dernier entré, premier sorti, comme indiqué ci-dessous :

La pile dans jQuery n'est pas réellement une vraie pile. Au lieu de cela, elle attache un attribut à l'objet jQuery, pointant vers l'objet précédent de l'objet actuel, et l'élément précédent peut être renvoyé via la méthode end. Comme suit :

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

Le code ci-dessus fera en sorte que la taille de la police de la première travée soit de 20 pixels et que toutes les travées disparaissent en 2 secondes.

pushStack est une méthode d'instance de jQuery et est appelée via l'objet jQuery, par exemple en définissant l'arrière-plan de tous les div via $().pushStack(document.getElementsByTagName('div')).css('background',' bleu') est bleu. Alors, quel est le principe de pushStack, et pourquoi l'objet DOM entrant peut-il être manipulé avec des méthodes CSS ? Jetons d'abord un coup d'œil au code source de pushStack dans 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;
}

L'implémentation de pushStack est relativement simple, impliquant principalement la méthode statique de fusion de jQuery. Cette méthode est utilisée pour fusionner des objets. L'idée de conception est d'ajouter les attributs (0 à n) du deuxième objet sur la base du premier objet. . Montez, c'est important de comprendre ça. En revenant à la fonction pushStack, définissez d'abord une variable locale ret pour stocker l'objet fusionné, puis stockez les attributs prevObject et context pour cet objet, et enfin renvoyez l'objet ret fusionné. Voici quelques points à noter :
1. this.constructor est l'initialisation du constructeur de jQuery, donc this.constructor() renvoie un objet jQuery.
2. Puisque l'objet renvoyé par la fonction de fusion jQuery est la deuxième fonction ajoutée à la première, ret est également un objet jQuery. Cela peut expliquer pourquoi les objets DOM entrant et sortant de pushStack peuvent également être utilisés avec des méthodes CSS.
3. La propriété prevObject de l'objet renvoyé pointe vers l'objet précédent, vous pouvez donc trouver l'objet précédent sur la pile via cette propriété.