Understanding and Analysis of jQuery's overall architecture

Source: Internet
Author: User

The overall structure of the jQuery script is as follows: Copy codeThe Code is as follows: (function (window, undefined ){
// Define a local copy of jQueryvar jQuery = function (selector, context
) {// The jQuery object is
Actually just the init constructor
'Enabled' return new
JQuery. fn. init (selector, context );},
// Expose jQuery to the global objectwindow. jQuery =
Window. $ = jQuery;
}) (Window );

I am not very familiar with such a structure, nor have I made any further research. I only know

Technorati labels: JQuery, Javascript, Web Front-end

The concept of js closures is related. I checked some information today and got some basic understanding.
Actually, a global function is defined. The first bracket is an anonymous function, followed by a function call. It can be understood as follows:Copy codeCode: var fun = function (window, undefined ){
......
}
Fun (window );

The entire script is an anonymous function (called mainFn for the time being). When the function is loaded, it is executed. mainFn can receive two parameters and pass only one parameter window during execution.

1. explain the meaning of this writing:
2. window is passed in when the window function is executed. The input window is of a global object (usually Window ).
3. An attribute with window = this, and when passed into the mainFn function as its parameter, it will be stored in
4. In the mainFn call object, the policy for finding variables in the prototype chain is (non-nested function): first look for the call
5. object, and then search for the global object, which makes the search efficiency more efficient when using the window in mainFn.
6. undefined because the second parameter is not passed during execution, the value of the variable undefined is undefined.
7. The Global object in the browser may not have the undefined attribute, so you cannot use it directly.
8. The problem is written as window. undefined = window. undefined.

At last, let jQuery, the most important object in the jQuery library, become an attribute of the window object, which can be abbreviated as "$ ".

Other supplementary materials:
JQuery is an excellent javascript library. Recently I used it to write javascript and read the source code.
First, from the overall and global perspective, jQuery's source code is almost all in the following code:Copy codeThe Code is as follows: (function (){

//......

})();

The first bracket contains an anonymous function, and the second bracket indicates that the code in the first bracket is executed immediately.
First of all, there is no namespace in javascript. To ensure that your javascript Functions and objects do not conflict with others, we use a javascript technique: all your javascript Functions and objects are defined in an anonymous function, ensuring the effective range of the defined functions and objects and playing a role in the namespace. How can someone else use this anonymous function? Let's take a look at the following code:

Var jQuery = window. jQuery = function (selector, context ){
//......
};

This makes jQuery, the most important object in the jQuery library, a property of the window object, so that jQuery can be used in other places like document (document is also an attribute of window. A friend who has used jQuery may be surprised-I have never used jQuery objects and have always used $. That is, jQuery's object with the same name:

Window. $ = jQuery;

Now you understand.

The structure of this database is as follows:Copy codeThe Code is as follows: 1. (function (window, undefined ){
2. var document = Invalid invalid Doc ument;
3. var jQuery =...
4 ....
5 ....
6.}) (window );

(Function (window, undefined) {var document = variable Doc ument; var jQuery = ......}) (window );

The entire script is an anonymous function (called mainFn for the time being). When the function is loaded, it is executed. mainFn can receive two parameters and pass only one parameter window during execution.
1. explain the meaning of this writing:
2. window is passed in when the window function is executed. The input window is of a global object (usually Window ).
3. An attribute with window = this, and when passed into the mainFn function as its parameter, it will be stored in
4. In the mainFn call object, the policy for finding variables in the prototype chain is (non-nested function): first look for the call
5. object, and then search for the global object, which makes the search efficiency more efficient when using the window in mainFn.
6. undefined because the second parameter is not passed during execution, the value of the variable undefined is undefined.
7. The Global object in the browser may not have the undefined attribute, so you cannot use it directly.
8. The problem is written as window. undefined = window. undefined.

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.