JQuery discussion (1)

I have always wanted to make an in-depth and comprehensive analysis on the jQuery framework. Unfortunately, I have never done it. Just in this idle time, so I have to do it quickly, saving my worries.

JQuery, I believe everyone is familiar with it. I will not talk about it any more. I just want to explain some of my understanding of jQuery. In my opinion, although jQuery has a wide range of applications, it is more used for development of small and medium websites or intended for use by designers. Compared with large libraries such as YUI and Ext-JS, jquery is more like a personal masterpiece. For libraries like YUI and Ext-JS, their application is more focused on enterprise-level development. This is alsoDifferences between libraries and frameworks.

Even so, jQuery still has a lot of highlights worth learning, which is why I decided to perform in-depth and meticulous analysis on jQuery. Of course, many people have done in-depth research on jQuery on the Internet, and my analysis will certainly have a lot of duplicates with others. Don't be surprised, I just want to write down what I think. If you don't talk about it, we will start to analyze it.

Note: The article for the jQuery-1.8.3.js, that is, the latest version, if you need to download, please click: http://code.jquery.com/jquery-1.8.3.js

JQuery is a self-executed anonymous function. The so-calledSelf-executed anonymous FunctionsIs the function that is directly executed without the definition of the function name. There are usually two formats:

(function () {   /* code */ } ()); (function () {   /* code */ })(); 

 

JQuery uses the second format:

(function( window, undefined ) {   /*code*/})( window );

You may find that this anonymous function has two parameters: window and undefined, but there is only one real parameter: window. Why should we pass the existing window value in JavaScript that belongs to the "super global variable" to the function? This involves the scope chain knowledge. If you are interested, you can refer to this article:Deep understanding of JavaScript series (14): Scope Chain)

　　Using window as a real parameter can reduce the length of the scope chain, which is conducive to performance optimization. When undefined is used as the form parameter without passing the real parameter, it is because undefined does not belong to the future keyword of the keyword in the third edition of ecmascript (the Javascript keyword cannot be used as the variable name or function name, using the Javascript keyword as the variable name or function name will cause compilation errors in Javascript during loading. Therefore, you can assign values to undefined:

/* Undefined not assigned a value */var A = undefined; console. Log (a); // undefined/* assigned a value to undefined */var undefined = 'Hello! '; Var A = undefined; console. Log (a); // "Hello! "

Fortunately, modern browsers (Firefox, ie9 +, opera, Safari, and chrome) have corrected this error. In these browsers, even if undefined is assigned a value, the browser still assigns undefined to the variable:

Jquery adopts this method to avoid contamination of undefined in jquery. When an anonymous function is executed, only one window parameter is passed without undefined. The undefined local variable value in the function body is just undefined.

Next, a lot of variables and methods are defined in jquery:

(Function (window, undefined) {var/* a bunch of local variables */
JQuery = function (selector, context) {/* This method is The foundation of jQuery * // the jQuery object is actually just The init constructor 'enabled' return new jQuery. fn. init (selector, context, rootjQuery);}, jQuery. fn = jQuery. prototype = {
/* Code */};}) (window );

JQuery puts most of the variables at the top of the list internally, which facilitates Variable Search in the scope chain (for details about the scope chain, refer:Deep understanding of JavaScript series (14): Scope Chain)), But I think this method is understandable here, but it is not a good programming habit when we write JavaScript code. I recommend that you define variables so that the written code is clearer. Performance Loss is negligible. Of course, in large-scale development, we have a clear understanding of the survival of various variables. At this time, we put all the variables in the header and add appropriate annotations, the code structure is clearer.

JQuery. fn. init (selector, context, rootjQuery) is the core of jQuery. HD'). This method provides all the functions of the jQuery selector. As for the specific implementation of this method, I will try again tomorrow.

In addition, I found that there are rich and comprehensive annotations in jQuery, which is a great help for us to understand jquery source code. We also need to develop such good habits at work.

This article is just a simple analysis of jQuery, which will be more comprehensive in the future. At the same time, some of my opinions and comments will be added, as well as relevant materials for reference. The purpose of my writing these articles is to thoroughly and carefully analyze jQuery. Some of the points may be incorrect. I forget to forgive you. After all, I have not learned jQuery for a long time.