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