Read jQuery Part 4 (Elegant Iteration)_jquery

The operation of jQuery is often divided into two steps
1, obtain the element collection (selector)
2, operate the element collection
and the main method of operating the element collection in the second step is jQuery.each. Looking at the source code, we found that jQuery.each and this.each were called 27 times and 31 times respectively. This shows how important it is.
This article will analyze the jQuery.each and this.each methods. Take a look at how they extend the jQuery library with jQuery.extend. Finally, I will add each method to zChain.js.
Part of the source code is as follows

Copy the code The code is as follows:

jQuery.fn = jQuery. prototype = {
...
// Execute a callback for every element in the matched set.
// (You can seed the arguments with an array of args, but this is
// only used internally.)
each: function( callback, args ) {
return jQuery.each( this, callback, args );
},
...
}
jQuery.extend({
...
// args is for internal usage only
each: function( object, callback, args ) {
var name, i = 0,
length = object.length,
isObj = length === undefined || jQuery.isFunction( object );
if ( args ) {
if ( isObj ) {
for ( name in object ) {
if ( callback.apply( object[ name ], args ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.apply( object[ i ], args ) === false ) {
break;
}
}
}
// A special , fast, case for the most common use of each
} else {
if ( isObj ) {
for ( name in object ) {
if ( callback.call( object[ name ], name , object[ name ] ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback .call( object[ i ], i, object[ i ] ) === false ) {
break;
}
}
}
}
return object;
},
...
});

As can be seen from the above,
1, jQuery().each is directly linked to jQuery.prototype (jQuery.fn ), so every jQuery object contains the each method.
2. jQuery.each is extended through jQuery.extend({}). As mentioned before, the method extended in this way will be hung on function jQuery, which is a static method of the jQuery class.
3. There is only one sentence in the jQuery().each method: return jQuery.each( this, callback, args ). That is, the implementation of each method of jQuery object is actually to call jQuery's static jQuery.each. So jQuery.each is the key.
The following is a detailed analysis of jQuery.each, which has three parameters object, callback, and args.
1, object can be an array (Array), object (Object), or even a function type (Functoin);
2, callback is a callback function, type is function;
3, args is the jQuery library itself If used, users will not use this parameter. This parameter will not be discussed here.

The first sentence in the function defines the necessary variables

Copy the code The code is as follows:

var name, i = 0,
length = object.length,
isObj = length === undefined || jQuery.isFunction( object );

length=object.length is easy to understand. There are three situations where length is not undefined.
1. When object is an array type (Array), the array has the length attribute;
2. object is a function type (Functoin). When , length is the number of parameters defined by the function. If the function does not define parameters, length is 0;
3, object pseudo-array with length attribute (such as: arguments, HTMLCollection, NodeList, etc.).

The variable isObj is used to determine whether it is an object type. There are two cases where it is true:
1. The variable length is equal to undefined, that is, the passed object has no length attribute.
2. The parameter object is a function type

It is emphasized here that object is a jQuery object. That is, when it occurs in $(xx).each, this will be passed to $.each. For example: return jQuery.each(this, callback, args). The first parameter this here is the jQuery object, and each jQuery object has a length attribute.

There are the following two branches in each
1. If isObj is true, use the for in statement to traverse the object. If each iterated object is seen in the form of key-value pairs. This in callback is the value object[name], the first parameter of callback is the key name, and the second parameter is the value object[name].
2. If isObj is false, use a for loop to traverse the array (array-like). This in callback is the value of a single element in the array. The first parameter of callback is the index i of the array, and the second parameter is the value of a single element of the array.
If the return value after the callback is called is false, it will stop iteration and jump out of the loop. Strict "===" is used here to determine whether it is equal to false. By the way, if a function does not have an explicit return, it returns undefined by default.

To summarize:
1. Each of $(xx).each is a method of jQuery object, which calls static jQuery.each. It is only used to iterate jQuery objects. The jQuery object can be regarded as a pseudo array (with a length attribute and accessed by index).
2. Each of $.each is a static method of function jQuery (i.e. jQuery.each), which can iterate objects, arrays, pseudo-arrays, and functions.
zChain-04.rar