SoFunction
Updated on 2025-03-10

jQuery source code analysis notes

The purpose of jQuery is Write Less, Do More. Its development style for JavaScript is not as invasive as YUI, and of course it is not as huge as Dojo and YUI. It greatly simplifies the daily development of JavaScript, mainly the operation of DOM elements (as can be seen from the name Query). Another major task is the browser compatibility that every front-end developer needs to face. jQuery is compatible with most versions of all mainstream browsers, starting from the evil IE6 to modern browsers such as Firefox and Chrome. Except for a small part of the code that occupies the core, the remaining jQuery is loose functions and has strong scalability. There are thousands of jQuery plug-ins on it, and almost all the corresponding jQuery plug-ins you need, and there are more than one.
The header of the jQuery code is the License declaration. It adopts GPLv2 and MIT dual protocols. And under jQuery declaration is another project's statement: Sizzle. This is another open source project by jQuery authors, released under MIT, BSD and GPL. It is an independent selector implementation (pure-JavaScript CSS selector engine) that can be used independently. Its compressed version is only a little more than 3KB, and it is known as the most efficient selector implementation. jQuery has used Sizzle instead of the original selector implementation since 1.3.
There are a lot of () and {} in JS code, and Vim is used here to read because the % command can quickly find matching brackets.
Overall code structure and variables
The jQuery code is an anonymous function call as a whole:
Copy the codeThe code is as follows:

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

This is to avoid polluting global objects, and also to facilitate management of execution context. This trick is often seen in JS code and is also very common in jQuery code. For example, when jQuery and other JS libraries are used simultaneously, the $ symbol may have been used. To still use the $ symbol:
Copy the codeThe code is as follows:

(function ($) {
// $("...")... Use $ as usual
})(jQuery);

Here is the real jQuery object.
Let’s enter the real implementation part, first of all, is $, that is, the declaration of the jQuery object, and the two most basic members are also listed:
Copy the codeThe code is as follows:

var jQuery = (function() {
var jQuery = function(selector, context) {
// Real initialization function
return new (selector, context, rootjQuery);
},
// A lot of variable declarations
// fn is the main function implementation point and the starting point of the jQuery plug-in. Actually it's JS prototype
= = {
};
// A function used to extend an object can dynamically add members to the object. In the future, adding members to jQuery will be done using the extend function.
= = function() {
};
// ...
return jQuery;
})();

jQuery objects are core objects, and all $(...) are obtained are jQuery objects. Except for a small number of Utility functions directly implemented in jQuery, most functions are added to jQuery objects using the extend method.