Analysis of jQuery's chain call-based each function

Back then, although jQuery has brought more and more front-end technologies to be learned (I just happened to have a basic jQuery tutorial in the school library (II) and started to learn the front-end technology in depth ), jQuery's blog posts are even more than javascript, which greatly lowers the programming threshold, but it hides too many details, such as $ ('# id '). append ('<p> xxx </p> 'privacy .clone().appendto(x).end().css (...)................ in this mode, it is difficult to find the shadow of conventional javascript. The differences between browsers seem to disappear. I don't think most of them can go back to thinking about how javascript works in different browsers in this comfortable environment, it's hard to say that happiness is a curse.
Let's get down to the truth...
Because the $ () function returns an object that contains the native dom object array, and the extended functions on this object prototype are all used to operate the native dom object, the circular traversal operation is indispensable, anyone familiar with the jquery library knows that there is a jQuery. the each () function is used by most functions involving jquery objects. A simple implementation is like this:
(I reiterate that it is only a simple implementation principle and does not consider specific functional issues)
Copy codeThe Code is as follows:
If (! Window ['$'])
Window ['$'] = window ['jquery '];
/* The above area is the content in the closure of the previous article.
* Defines jQuery. each to perform operations based on input objects.
* @ Param {Object} obj
* @ Param {Object} func
* For simplicity, I only considered arrays and jQuery objects. Like in the previous article, the principle should be consistent.
*/
Window ['jquery '] ['Each'] = function (obj, func ){
If (obj. constructor = Array ){
For (var I = 0; I <obj. length; I ++ ){
Func. call (obj [I], I, obj [I]); // you can see that the input func should be in the form of function (I, item) I, which indicates the subscript to be traversed, item indicates the objects traversed in the array.
}
} Else if (obj. elements & obj. elements. constructor = Array) {// The legendary duck rule is used here, instead of determining whether it is a jQuery instance. As long as you have Array-type elements, I will operate on you.
For (var I = 0; I <obj. elements. length; I ++ ){
Func. call (obj. elements [I], I, obj. elements [I]); // you can see that the passed func is like function (I, item) I, which indicates the subscript to be traversed, and item indicates the object to be traversed in the array.
}
} Else {
Return null;
}
}

Based on this function, you can start to expand the _ jQuery prototype. First, you need to write a method each that can be directly called by the wrapper object: (this is not repeated ), then, you can call this each function to traverse the object array,
For example:
Copy codeThe Code is as follows:
// Write in the closure. Note that the name of the jQuery constructor conflicting with the name of yesterday is changed to _ jQuery.
_ JQuery. prototype = {
Each: function (func ){
JQuery. each (this, func );
Return this;
},
Attr: function (key, value ){
// The example defines the operation attribute function of this set and get.
If (arguments. length = 0 ){
Return null;
}
Else
If (arguments. length = 1 ){
Return this. elements [0]. getAttribute (key );
}
Else if (arguments. length = 2 ){
This. each (function (I, item ){
// Here we can see the benefits of redefining the each method 1: simplified code, 2: In the internal function, this still points to the called wrapper object rather than the window
Item. setAttribute (key, value );
})
}
}
/*
* Other methods can be introduced here.
*/
}

Next we will do a few simple tests :(Or the previous test html)

　　Input:

　　　　　Var k = $ ('# header ');
Using LES. write (k. attr ('title', 'test title! '). Attr ('title'); // chained call

　Output:

Test title!

The each method can be used to effectively expand the package.

There are three main points that affect jQuery's chain call. after the fact, it is not that simple, and the maintenance of jQuery's internal code is not as good as some libraries, although it is very easy to use at least in terms of operations (of course, it is only for some small operations, big projects cannot be reached at the moment, it is not easy to follow a lot of people and clouds ). however, even from the perspective of the traversal operation, we can also see that this library can only rely on the refined plug-in, and the expansion will only look bloated.

Note:Anyone who has carefully analyzed the jquery source code will surely sneer at the so-called poor implementation, I have read just a few good books, such as javascript dom advanced programming and javascript advanced programming design patterns, and I have been touched by them, which may be quite different from the implementation of jquery, if yes, I hope I can correct it.