A talk on jquery core architecture design _jquery

jquery is no stranger to all of us, so what it is and what it does, I don't have much to say here, and the purpose of this article is to discuss the core architectural design of jquery through a simple analysis of the source code, as well as jquery Is the use of advanced features in JavaScript to build such a great JavaScript library.

1 early jquery

From a core function, jquery does just one simple and mundane thing: query. Its syntax is so concise that many people already use jquery when they don't know what JavaScript is, using one word to describe it as: Boulevard to Jane. From a design perspective, we can divide the jquery delivery method into two broad categories: static methods and instance methods. Static methods are directly through the $ access method, which generally does not operate on DOM elements, but provides some commonly used tools, such as AJAX requests, as well as some common operations on strings, in addition, jquery provides its own extension mechanism, You can use the Extend method to write the components you need. The instance method is not the same as the static method, which is used to manipulate the DOM elements of the jquery query, and jquery executes $ () to build a JQuery object that stores all the DOM elements of the query as an array of methods, Then we implement a method for these DOM operations on the prototype chain of this object, such as the each () method is used to traverse each DOM element. You might notice that I just said this object is "stored as an array," which means that the object that jquery builds is not an array, so what exactly is this object? In fact, this object is the core of jquery, also known as the "jquery object." Therefore, the focus of this paper is to analyze and discuss jquery objects.

2 jquery objects

In general, we will use jquery in this way:

$ (' div '). each (function (index) {
  //this ...
});

$ (' div ') returns a JQuery object after execution, each () method is to iterate over the DOM elements in this object, we first look at the execution of the $ (' div ') (the source code excerpt from jquery 3.0):

JQuery = function (selector, context) {return to
 
 new JQuery.fn.init (selector, context);

}

This method is the entry method of $ (' div '), which is the shorthand for jquery, which is equivalent to jquery (' div '), and it can be seen that this method only does one thing, that is to return the instance object of the JQuery.fn.init () function, that jQuery.fn.init Again, let's look at the following code:

init = JQuery.fn.init = function (selector, context, root) {
 //... 
 return this;
}
Init.prototype = Jquery.fn;

JQuery.fn.init and Init refer to the same method, which queries a conditional DOM element according to selector, and returns, but you will find that this is the one that is returned, what is this one? We'll analyze this later and look at the following sentence first:

Init.prototype = Jquery.fn;
What is the meaning of this sentence, this sentence is to let the Init method of prototype object to point to Jquery.fn object, that Jquery.fn is what ghost? Let's keep looking at the code:

Jquery.fn = Jquery.prototype = {

 //The current version of JQuery being used
 jquery:version,

 constructor:jqu ery,

 //The default length of a JQuery object is 0
 length:0,

 //Execute a callback for every element in the M atched set.
 Each:function (callback) {return
  Jquery.each (this, callback);
 },
  
 splice:arr.splice
};

To save space, I omitted some of the code, and from here I can see that Jquery.fn is actually a jQuery prototype object that defines some ways to manipulate this object. Here, you are not feeling a little bit around, don't worry, let's comb the idea: jquery first defines an Init method, and then defines a series of action methods on the prototype object prototype of Init. Finally, the instance object of the Init method is returned. So the above process can be simplified as follows (pseudo code representation):

var init = function (selector,context,root) {
 //...
 return this;
}

Init.prototype = {
 length:0,
 each:function (callback) {
  //...
 },
 Splice:[].splice
}

jQuery = function (selector,context,root) {return

 new init (selector,context,root);
}

So the question is, why isn't the method in Jquery.fn directly defined on the prototype of Init, but on the prototype object of JQuery?

In fact, the purpose of this is to improve the query efficiency of jquery, if directly defined on the prototype object of Init, then every time a query executes, it creates such a large prototype object in memory, And if you define this object on the prototype of jquery, and when the jquery loads, the object is initialized and always in memory, and each time you execute $ (), just point the prototype in Init to the object. Instead of creating the same object every time.

Let's take a look at what this is returning in the Init function, as I said in my previous blog, this in the function always points to the caller of the runtime, and who is the caller of Init? The caller is not likely to be found in the code above, and then we need to understand the operation of the new operator in depth, and by borrowing the description of the new operator in my blog, we decompose the execution of New Init () as follows:

New init (Selector,context,root) = {

 var obj = {};

 obj.__proto__ = Init.prototype;

 Init.call (obj,selector,context,root);

 Return typeof result = = ' obj '? result:obj;

}

If you do not understand the operation of New, please refer to Bowen: The operating mechanism of JavaScript new

As can be seen from the above decomposition process, when JavaScript creates an instance object through new, it first creates a normal object obj, and then __proto__ the internal attribute of obj to the prototype object of Init, so that the prototype chain of obj is changed. The 3rd step invokes Init () using the call method, so this in init refers to the Obj object here.

When Init () executes, all of the DOM objects that are matched are stored as an array in the This object and returned, that is, the Obj object is returned, and the new operator will eventually return the Obj object to act as a fresh instance object. So this instance object returned by the new operator has two characteristics: first, it contains the result set of DOM query, the second is that its prototype chain inherits the prototype of Init, and the prototype of Init points to the Jquery.fn object, so the instance object also has these methods of operation.

jquery creates a jquery object every time the query executes, and in the same application all jquery objects share the same jquery prototype object. Therefore, the JQuery object not only contains the DOM query result set, but also inherits the method of operation on the jquery prototype object. This way, you can invoke the method directly after the query to manipulate the DOM elements. This is the core architecture of jquery design, simple, convenient, practical!

If you do not understand the above explanation, do not worry, I follow the design of jquery to write a complete small project jdate, you can compare to understand! JDate Project has been uploaded to GitHub, you can click here to view the complete code: JDate, if there are different views, welcome to discuss!

3 The flaws of JQuery

By analyzing the core architecture of jquery, we find that jquery will build a complex jquery object in memory every time we execute a query, although each jquery object shares the same jquery prototype, but the jquery query process is far more complex than you might think. It takes into account a variety of matching identities while at the same time considering the compatibility of different browsers. So if you're just doing some simple work on the DOM, it's recommended to use the native method queryselector instead of jQuery, but when using native methods, you might want to do some compatibility for different scenarios, you have to learn to choose, not to rely too much on jquery!

The above is the entire content of this article, I hope to learn about jquery have some inspiration.