A brief analysis of each function of jQuery's chain call

A brief analysis of each function of jQuery's chain call_jquery

WBOY

Release： 2016-05-16 18:14:44

Original

1119 people have browsed it

Having said that, although jQuery has made more and more people learn front-end technology (I wanted to learn front-end technology in depth because I accidentally encountered a jQuery basic tutorial (2) in the school library), blog posts about jQuery even More than JavaScript, it greatly lowers the threshold for programming, but it hides too many details, such as $('#id').append('

xxx

').clone( ).appendTo(x).end().css(...)............This mode of operation has made it difficult to find the shadow of conventional javascript. The differences between browsers seem to disappear as soon as they are gone. I don't think most of them can return to thinking about how JavaScript can behave consistently in different browsers in this comfortable environment. It is really hard to say whether it is a blessing or a curse.
Let’s get back to the point... Let’s be serious
Since the $() function returns an object that wraps an array of native DOM objects, and the functions extended on the prototype of this object are all for operating native dom object, so loop traversal operations are indispensable. People who are familiar with the jquery library know that there is a jQuery.each() function. Most functions involving jquery objects will use this function: A simple implementation should look like this:
(Again, it’s just a simple implementation principle, don’t consider specific functional issues)

Copy the code The code is as follows:

 
if (!window['$']) 
window['$'] = window['jQuery']; 
/*The above area here is the closure of the previous article Contents in the package 
* Define jQuery.each to perform operations based on the incoming object 
* @param {Object} obj 
* @param {Object} func 
* For simplicity, I only considered arrays and jQuery objects, the same as the previous article, the principle should be the same 
*/ 
window['jQuery']['each']=function(obj,func){ 
if( obj.constructor==Array){ 
for(var i=0;ifunc.call(obj[i],i,obj[i]);//Yes You can see that the incoming func should be in the form of function(i,item) i represents the traversed subscript, and item represents the object 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 an instance of jQuery. 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 incoming func should be in the form of function(i , item) i represents the subscript traversed, item represents the object traversed in the array 
} 
}else{ 
return null; 
} 
} 

On the basis of this function, you can start to expand the prototype of _jQuery; first, write a method each: that the wrapper object can directly call: (this is not a repetition), and then complete it by calling this each function Traversing the object array,
for example:

Copy code The code is as follows:

 
/ /Write inside the closure. Note that the name of the jQuery constructor that had a naming conflict yesterday was changed to _jQuery 
_jQuery.prototype = { 
each: function(func){ 
jQuery.each(this, func) ; 
return this; 
}, 
attr: function(key, value){ 
//Example defines this function that combines set and get to operate attributes 
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 you can see the benefit of redefining the each method: streamlining the code, Two: In the internal function this still points to the calling wrapper object instead of window 
item.setAttribute(key, value); 
}) 
} 
} 
/* 
* Here you can start introducing other methods 
*/ 
} 

Let’s do a few simple tests: (Still the test html from the previous article)

　Input:

　　　　 var k= $('#header');
var k= $('#header'); )); //Chain call

Output:

test title!

And so on, relying on each method can effectively expand the wrapper method.

There are three key points that affect jQuery's chain calls mentioned before. In fact, it is not that simple when I think about it afterwards. The maintenance of jQuery's internal code is not better than that of some libraries, although at least it is very easy to use in terms of operation ( Of course, it is only for some small operations, and it is not accessible to large projects for a while, and it is not easy to follow the opinions of some adults). However, even if we only look at the traversal operation, we can see that this library can only rely on refined plug-ins. Expanding it will only make it bloated.

Note: If anyone has carefully analyzed the jquery source code, they will definitely sneer at my poor so-called implementation. I have indeed only read a few books such as javascript dom advanced programming and javascript advanced programming. The design pattern is just based on my inspiration after reading a good book. It may be quite different from the specific implementation of jquery. I hope you can correct me if possible.