This image is made up of jQuery source code at 1.1.
Now I will explain the jQuery framework based on this image.
I. 16 ~ Row 3 shows that the outermost layer is a self-called function. When jQuery initializes, all js Code contained in this self-called function will be executed.
2. The jQuery variable declared in Row 22 finally accepts the internally created jQuery constructor function.
This variable is assigned the window. jQuery attribute in row 9284. jQuery can be accessed by the outside world and has an alias $.
Iii. 97 ~ Line 3: rewrite the jQuery prototype. Because re-prototype will inevitably lead to a change in the default orientation of constructor,
Therefore, row 98 re-sets the constructor attribute.
On line 99, the prototype method jQuery. fn. init () is defined. It resolves the selector and context parameters and performs corresponding searches;
On line 27, we can see that when we call jQuery, the return instance is jQuert. fn. init,
A lot of attributes and methods are defined after init,
For example, selector, length, size (), toArray (), get ()... is not shown in the figure.
4. It is strange to see from row 322 that the prototype of jQuery overwrites the prototype object of the jQueryfn. init () method (constructor.
25 ~ 28 rows. When we call the jQuery method, the internal call is jQuery. fn. init (), that is, what we access should be
The attributes and methods in the jQuery. fn. init () prototype, but why can we still access the attributes and methods of the jQuery prototype.
For example, $ ("div"). length; you can find the answer from jQuery. fn. init. prototype = jQuery. fn.
Row 5 defines jQuery. extend () and jQuery. fn. extend (), which are used to merge the attributes of two or more objects to the first object,
388 ~ Row 3 executes jQuery. extend () and defines a bunch of static attributes in jQuery constructor,
For example: noConflict (), isReady, readyWait, holdReady ()
6. Anyone who has used jQuery knows that we only need to write $ ("# guo") or jQuery ("# guo") to obtain a jQuery object ").
However, in js, the constructor is usually used to instantiate an object: new Fun ().
Why don't we use the new keyword to retrieve jQuery objects? From 25 ~ The answer can be found in 28 rows, because jQuery creates an answer using new in the constructor.
This greatly simplifies the amount of code when using jQuery.
7. From row 322, we can see that jQuery. prototype And jQuery. fn use the same reference.
One advantage of this is that jQuery. fn can be used directly when the jQuery prototype is used, which is 7 characters less than jQuery. prototype,
This is also in line with the "write less, do more" idea.
8. 22 ~ Row 983 is an self-executed function, and the returned result is an internal jQuery variable,
Why don't we remove 25 rows of functions without using 25 rows of code.
Write the following code in the row 981: return new jQuery. fn. init (.....).
In this case, the coupling degree of each jQuery module is increased ~ Many local variables are defined in row 97,
These functions only need to be used when constructing jQuery objects. Therefore, jQuery's approach is a design idea of High Cohesion and low coupling.
9. Why rewrite the jQuery prototype? The attributes and methods defined on the prototype object will be inherited by all jQuery objects,
This can effectively reduce the memory required for each jQuery object. Therefore, you do not have to worry about jQuery having too many attributes and methods, but worry about occupying too much memory.