A brief analysis of jQuery’s internal principles and implementation methods_jquery

I have been studying the jQuery source code during this period. Thanks to the growing development of jQuery, there are more and more experts studying jQuery. The learning materials are also easier to find than the previous two years. There are many very good resources, such as Gao Yun jQuery1.6.1 source code analysis series. These tutorials analyze the internal principles and implementation methods of jQuery in great detail, which are very helpful for learning and understanding jQuery. However, I personally think that many tutorials do not fully understand the overall results of jQuery. I try to explain the internal implementation of jQuery as a whole.

As we all know, there are two ways to call jQuery. One is a high-level implementation, which implements DOM selection by passing a parameter, such as selecting all h1 elements through $("h1"), and the second is a relatively low-level implementation. , if the ajax operation is implemented through $.ajax. So, what is the difference between these two methods? Use the typeof function to detect $('h1') and $.ajax. The types are object and function respectively. Anyone who has learned jQuery a little knows or has heard of it. The former returns a jQuery object. So what is a jQuery object and what is it and What is the relationship between jQuery and jQuery? Let’s first print the properties and corresponding values ​​of the jQuery object through for(var i in $(”)) document.write(i ” :::” $(“”)[i] ””); you can see It has more than 100 properties. By entering $("*") in the console, you can see that most of the properties are properties inherited from the jQuery prototype. The jQuery object is actually such an object:

So let’s speculate that the implementation of jQuery may be similar to this:

function jQuery(){
 this[0]="Some DOM Element";
 this[1]="Some DOM Element";
 this[2]="Some DOM Element";
 this.length=3;
 this.prevObject="Some Object";
 this.context="Some Object";
 this.selector="Some selector";
}
jQuery.prototype={
get:function(){},
each:function(){},
......
}

These codes can create a jQuery object with the above properties through the new operator, but in fact we do not use the new operator when we call jQuery to create a jQuery object. How is this achieved? Let’s look at the implementation of jQuery:

var jQuery = function( selector, context ) {
 // The jQuery object is actually just the init constructor 'enhanced'
 return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn=jQuery.prototype={
 jquery: core_version,
 init:function(selector,context){
 //some code
 return this;
 }
 //some code there
 //......
}
jQuery.fn.init.prototype=jQuery.fn;

There are several very clever things here. The first point is to create objects through the init method of the jQuery prototype attribute to achieve the purpose of creating objects without using new. The second point is to handle the this pointer in the init method. We know that by calling init to return a jQuery instance, then this instance must inherit the properties of jQuery.prototype, then this in init will inherit the properties of jQuery.prototype. However, this in init is subject to scope restrictions and cannot access other properties of jQuery.prototype. jQuery points its prototype to jQuery.fn through the sentence 'jQuery.fn.init.prototype=jQuery.fn', so that , the jQuery object generated by init has the properties of jQuery.fn.

At this point, a basic prototype of jQuery has surfaced. There are two objects here, one is the jQuery constructor, and the other is the object generated by this constructor (we call it a jQuery object, which is no different from an ordinary object), as shown in the following relationship diagram:

You can see that the jQuery constructor and jQuery.prototype have their own properties and methods. The calling methods of the two objects are different. Both objects have an extend method, which is used to extend their own properties and methods. , within jQuery, the implementation of extend actually relies on the same code, which will be analyzed in detail in the subsequent source code analysis.