Three. jquery source code Analysis of jquery framework diagram

Source: Internet
Author: User

This picture is for the jquery source code, 1.1 points to spell out. The
now makes a description of the jquery framework based on this image.
I. 16~9404 you can see that the outermost layer is a self-calling function. When jquery is initialized, all the JS code that the self-invoking function contains is executed.
Two. The jquery variable declared in line 22 ultimately accepts the jquery constructor function created internally.
This variable is assigned to the Window.jquery property in 9284 rows. Now jquery can be accessed by the outside world, and also has an alias of $.
Three. 97~319, the prototype of jquery was rewritten. Because a re-prototype inevitably leads to a change in the default point of constructor,
98 rows re-set the constructor property.
On line 99, we define the method JQuery.fn.init () on the prototype, which is responsible for parsing the types of the parameters selector and the context and performing the corresponding lookups; The
can be seen on line 27, when we call jquery, the return is an instance of JQuert.fn.init (), and
after Init () defines a whole bunch of properties and methods,
such as Selector,length,size () , ToArray (), get () .... It doesn't show up in the picture.
Four. From 322 lines can be seen very strange imagination. The prototype of jquery covers the prototype object of the Jqueryfn.init () method (constructor). The
25~28 line. When we call the JQuery method, we call the JQuery.fn.init () internally, which means that we should be accessing the properties in the
JQuery.fn.init () prototype, method, But why do we still have access to the properties and methods of the jquery prototype.
For example $ ("div"). Length; This is the time to find the answer from Jquery.fn.init.prototype=jquery.fn.
Five. 324 rows define Jquery.extend () and JQuery.fn.extend () to merge properties of two or more objects to the first object,
388~918 row Execution Jquery.extend () A bunch of static properties are defined in jquery constructor three,
such as: Noconflict (), Isready,readywait,holdready ()

Six. People who have used jquery know that we want to get to a jquery object, just write it like this: $ ("#guo") or jquery ("#guo").
But in JS we instantiate an object through a constructor, which is usually the case: new Fun ().
Why don't I need to use the New keyword to get a jquery object? You can find the answer from the 25~28 line. Because jquery creates an
object using new inside the constructor, and returns it back, this greatly simplifies the amount of code used when using jquery.
Seven. As seen from the 322 lines, Jquery.prototype and Jquery.fn use the same reference. The benefit of
is that when using a jquery prototype, you can use Jquery.fn directly, which is 7 fewer characters than Jquery.prototype, and
that fits the "write Less,do more" idea.
Eight. The 22~983 line is a self-executing function, the return result is the internal jquery variable,
Why not directly remove 25 rows of the function, 22 lines of code to use the effect of 25 rows.
981 lines write this: return new JQuery.fn.init (...).
If this is written, it increases the coupling of each of the jquery modules. In the 25~97 line, many local variables are defined,
and these functions only need to be used when constructing a jquery object. So jquery's approach is a high-cohesion low-coupling design idea.
Nine. Why rewrite the prototype of jquery. The properties and methods defined on the prototype object are inherited by all jquery objects, and the
effectively reduces the memory required for each jquery object. So don't worry about jquery having too many properties and methods to worry about consuming too much memory.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.