PushStack implementation principles and application examples in jQuery_jquery

pushStack is a very important function in the jQuery kernel. It is so important that it is frequently used in many jQuery internal functions. Under normal circumstances, although it is rarely used, mastering this function is not only helpful for understanding the operating principles of jQuery, but also facilitates us to do more advanced jQuery operations.

As the name suggests, pushStack is a push stack. As a data structure, the stack is a special linear table that can only perform insertion and deletion operations at one end. When data is pushed into the stack, it is similar to when we enter the elevator, last in, first out, as shown below:

The stack in jQuery is not actually a real stack. Instead, it attaches an attribute to the jQuery object, pointing to the previous object of the current object, and the previous element can be returned through the end method. As follows:

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

The above code will make the font size of the first span 20px and make all spans fadaout within 2 seconds.

pushStack is an instance method of jQuery and is called through the jQuery object, such as setting the background of all divs through $().pushStack(document.getElementsByTagName('div')).css('background','blue') is blue. So what is the principle of pushStack, and why can the incoming DOM object be manipulated with css methods? Let’s first take a look at the source code of 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;
}

The implementation of pushStack is relatively simple, mainly involving jQuery's static method merge. This method is used to merge objects. The design idea is to append the attributes (0 to n) of the second object on the basis of the first object. Go up, it's important to understand this. Returning to the pushStack function, first define a local variable ret to store the merged object, then store the prevObject and context attributes for this object, and finally return the merged ret object. Here are a few things to note:
1. this.constructor is jQuery’s constructor init, so this.constructor() returns a jQuery object.
2. Since the object returned by the jQuery merge function is the second function appended to the first one, ret is also a jQuery object. This can explain why the DOM objects in and out of pushStack can also be operated with CSS methods.
3. The prevObject property of the returned object points to the previous object, so you can find the previous object on the stack through this property.