Read jQuery 4 (elegant iteration)

JQuery operations are usually divided into two steps.
1. Obtain the Element Set (selector)
2. Set of operation elements
The main method for operating element sets in step 2 is jQuery. each. Looking at the source code, we found that jQuery. each And this. each were called 27 times and 31 times respectively. We can see how important it is.
This article analyzes jQuery. each And this. each methods. Let's see how they expand the jQuery library with jQuery. extend. Finally, I will add the each method to zChain. js.
Some source code is as follows: Copy codeThe 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 you can see above,
1. jQuery (). each is directly attached to jQuery. prototype (jQuery. fn). Therefore, each jQuery object contains the each method.
2. jQuery. each is extended through jQuery. extend. As mentioned above, the extension method will be attached to function jQuery, that is, the 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 to say, the implementation of the each method of the jQuery object is actually calling the jQuery. each static method of jQuery. Therefore, jQuery. each is the key.
The following is a detailed analysis of jQuery. each, which has three parameters: object, callback, and args.
1. objects can be arrays, objects, or function types );
2. callback is a callback function and its type is function;
3. args is used by the jQuery library and is not used by the user. This parameter is not discussed here.

The first sentence in the function defines the necessary variablesCopy codeThe Code is as follows: var name, I = 0,
Length = object. length,
IsObj = length = undefined | jQuery. isFunction (object );

Length = object. length is easy to understand. In three cases, length is not undefined.
1. When the object is an Array type (Array), the Array has the length attribute;
2. When the object is a function type (Functoin), length is the number of parameters defined by the function. If no parameter is defined for the function, length is 0;
3. A pseudo array of objects with the length attribute (such as arguments, HTMLCollection, and NodeList ).

The isObj variable is used to determine whether it is an object type. The following two conditions are true:
1. The variable length is equal to undefined, that is, the transmitted object does not have the length attribute.
2. The parameter object is of the function type.

Here we emphasize that the object is a jQuery object. That is, when $ (xx). each occurs, this will be uploaded to $. each. For example, return jQuery. each (this, callback, args ). Here, the first parameter "this" is the jQuery object, and each jQuery object has the length attribute.

Each has the following two branches:
1. If isObj is true, use the for in statement to traverse the object. If the object of each iteration is seen as a key-value pair. In callback, this is the value of object [name], the first parameter of callback is the key name, and the second parameter is the value of object [name].
2. If isObj is false, use the for loop to traverse the Array (class array ). In callback, this is the value of an independent element in the array. The first parameter of callback is the index I of the array, and the second parameter is the value of an independent element in the array.
If the return value is false after the callback call, the iteration is stopped and the loop jumps out. Here we use strict "=" to determine whether it is equal to false. By the way, if no return is displayed for a function, undefined is returned by default.

Summary:
1, $ (xx). each's each is the jQuery object method, which calls static jQuery. each. It is only used to iterate jQuery objects. jQuery objects can be viewed as pseudo arrays (with the length attribute, accessed using indexes ).
2. $. each's each is a function jQuery static method (I .e. jQuery. each) that can iterate objects, arrays, pseudo arrays, and functions.
ZChain-04.rar