jQuery source code analysis notes_PHP tutorial-PHP Tutorial-php.cn

jQuery source code analysis notes_PHP tutorial

WBOY

Release： 2016-07-21 15:28:59

Original

680 people have browsed it

The purpose of jQuery is Write Less, Do More. It's not as intrusive a JavaScript development style as YUI, and certainly not as massive as Dojo and YUI. It greatly simplifies the daily development work of JavaScript, mainly the operation of DOM elements (as can be seen from the name Query). Another major task that every front-end developer needs to face is browser compatibility. jQuery is compatible with most versions of all major browsers, starting from the evil IE6 to modern browsers such as Firefox and Chrome. Except for a small part of the core code, the rest of jQuery are loose functions and are highly extensible. There are thousands of jQuery plug-ins on http://plugins.jquery.com. Almost all the functions you need have corresponding jQuery plug-ins, and there is more than one.
The head of the jQuery code is the License statement. It adopts GPLv2 and MIT dual agreements. And under the jQuery declaration is the declaration of another project: Sizzle. This is another open source project from the author of jQuery, released under MIT, BSD and GPL. It is an independent selector implementation (pure-JavaScript CSS selector engine) and can be used independently. Its compressed version is only a little over 3KB and is known as the most efficient selector implementation. jQuery uses Sizzle instead of the original selector implementation starting from 1.3.
There are a lot of () and {} in the JS code. Vim is used to read it here, because the % command can quickly find matching brackets.
The overall code structure and variables
The jQuery code as a whole is an anonymous function call:

Copy the code The code is as follows:

 
(function (window, undefined) { 
// ... 
})(window); 

This is to avoid polluting the global object and is also convenient The management execution context. This technique is often seen in JS code and is also common in jQuery code. For example, when jQuery is used with other JS libraries, the $ symbol may have been used. To still use the $ sign:

Copy the code The code is as follows:

 
(function ($) { 
// $ ("...")... As usual use $ 
})(jQuery); 

Pass in the real jQuery object here.
Let’s enter the real implementation part. The first is $, which is the declaration of the jQuery object. The two most basic members are also listed:

Copy code The code is as follows:

 
var jQuery = (function() { 
var jQuery = function(selector, context) { 
// The real initialization function 
return new jQuery.fn.init(selector, context, rootjQuery); 
}, 
// A lot of variable declarations 
// fn is the main function implementation point and the starting point of the jQuery plug-in. JS prototype 
jQuery.fn = jQuery.prototype = { 
}; 
// A function used to extend an object, which can dynamically add members to the object. In the future, extend will be used to add members to jQuery. Function completed. 
jQuery.extend = jQuery.fn.extend = function() { 
}; 
// ... 
return jQuery; 
})(); 

The jQuery object is the core object. All $(...) obtains are jQuery objects. Except for a small number of Utility functions directly implemented under jQuery, most functions are added using the extend method. into the jQuery object.