jquery source code reading one of--jquery general structure and jquery constructors

Source: Internet
Author: User

First, the overall structure of jquery

As a powerful JS library, jquery is composed of the following modules:

(function (window,undefined) {varjquery=function (selector,context) {//...    }; //Tool Method Utilities//callback function Callbacks//Asynchronous Queue defered Object//Browser function test support//Data Cache//Queues Queue//Property Manipulation Attributes//Event System Events//selector Sizzle//DOM traversal traversing//DOM Operation Manipulation//Style manipulation CSS//Asynchronous Request Ajax//Animation Animation//coordinate offset, size Dimensionswindow.jquery=window.$=jQuery;}}) (window);

For the above code, it is explained as follows:

The overall code of 1.jQuery is wrapped in an immediate self-invoking anonymous function, so as to minimize interference with other third-party libraries;

2, at the end of the code above, add the jquery object to the global window and set the variable $ for it so that jquery can be accessed outside the world;

3, for the self-invocation of the anonymous function to set the parameters window, and passed the parameter window, on the one hand can shorten the scope chain, can access to window as soon as possible, on the other hand, convenient code compression;

4, in order to automatically set the parameter undefined with anonymous function, on the one hand can shorten the scope chain to find undefined, on the other hand can prevent undefined from being modified in the outside world.

Ii. Constructing jquery objects

The jquery object is a class array object that contains a continuous integer property, a length property, a context property, The Selector property (set in JQuery.fn.init), Preobject property (set in Pushstack), and also contains non-inherited properties and a large number of jquery methods.

The jquery constructor has 7 usages depending on the parameters passed in, and in the lightweight jquery that you are trying to implement, it is not considered in the case of incoming complex selector expressions and HTML code.

The overall code structure of the jquery constructor is as follows:

(function (window,undefined) {    var  rootjquery,        jQuery=function (selector, Context) {        return  jQuery.fn.init (selector,context,rootjquery);    };    Jquery.fn=jquery.prototype={        constructor:jquery,        init:function (selector,context,rootjquery ){            //...         }    };    JQuery.fn.init.prototype=jquery.prototype;    Rootjquery=jQuery (document);    Window.jquery=window.$=jQuery;}}) (window);

For the above code, the explanation is as follows:

1) in the jquery constructor, use new to create and return an instance of another constructor, so that when you create a jquery object, omit the operator new and write jquery directly; An instance of Jquery.fn.init is returned in the constructor to ensure that the prototype methods and properties of JQuery () can be accessed on an instance of JQuery.fn.init (), so that jquery.fn.init.prototype= Jquery.prototype.

jquery source code reading one of--jquery general structure and jquery constructors

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.