jquery source code learning
This series of notes is based on the wonderful flavor of classroom resolve jquery source video and high clouds Gangster book jquery technical summary from inside the main learning objects or jquery2.0.3, those complicated compatibility issues really do not want to face. The former is the jquery version is 2.0.3, which is version 1.7.1, although now jquery to 3.4.1 has been released, but did not find the newer study materials, only in accordance with these antiques to learn, hope after learning the ability to write some of their own things out, it is best to write a jquery source interpreted according to the latest version. Targets have been set up, hoping he can do .
A general framework of
jquery modules can be divided into three parts: entry module, the underlying support modules and function modules (high chiefs of the 1.7 version of the cloud classification, 2.0 still apply) entry module is constructed jquery object, function module mainly attribute manipulation, event system, dom operation and the operation pattern, the underlying support module is mainly Sizzle selector, data buffer, and queues. In the video teacher jquery source is divided:
( Function () { ( 21 is, 94) defines a number of variables and functions the jQuery = function () {}; ( 96, 283 ) to JQ objects, add methods and attributes ( 285, 347 ) Extend: JQ inherited methods ( 349, 817 ) jQuery.extend (): extend some utility methods ( 877, 2856 ) Sizzle: implement complex selectors ( 2880, 3042 ) callbacks: callback object: unified management functions ( 3043, 3183 ) the Deferred: lingering objects : asynchronous unified management ( 3184, 3295 ) Support: detection function ( 3308, 3652 ) data (): data cache ( 3653, 3797 ) queue (): queue method: execution order management ( 3803, 4299 ) attr () prop () Val () addClass () and so on: the operation of element attributes ( 4300, 5128 ) ON () the Trigger (): related methods event operations ( 5140, 6057 ) the DOM: Add delete obtain packaging DOM screening ( 6058, 6620 ) CSS (): style of operation ( 6621, 7854 ) submitted data and ajax (): ajax () the Load () getJSON () ( 7855, 8584 ) Animate (): movement the method ( 8585, 8792 ) offset (): method of position and size ( 8804, 8821 ) supports the modular pattern JQ ( . 8826) = $ window = window.jQuery the jQuery; }) ();
Because the main object of study is jquery2.0, according to the video teacher would divide the structure to learn.
First, outside jquery wrapped anonymous function is an immediate execution of:
( Function (window, undefined) { var rootjQuery // declare some global variables // ... IF ( typeof window === "Object" && typeof the window.document === "Object" ) { window.jQuery = window. = $ the jQuery; } } (window)
This model has a term: IIFE, called a function expression executed immediately. An outer wrap a function () to become an expression to add another at the end () function that can be executed immediately. IIFE there is another form: (function () {...} ()), the two forms are functionally identical. The above calls from anonymous function, create a special function scope, the scope of the method, variables are private, not conflict. And the jquery object mounted on the window, is it an open global variables, that is, outside provides an interface that can be referenced jquery object. If that judgment is to prevent the window object and who can document the object is changed. As incoming window object, high cloud big brother is explained: First, that the window is changed to the local variable (i.e., the function parameters as local variables), when the internal access codes jquery window object, scope chain need not be fall back to the top level, for faster access to the window object; and second, it can be optimized when compressed code. Anonymous function passed in the second parameter undefined, this is a property of the window object, high clouds its big brother explained: First, the same window as reduce seek undefined scope chain can be optimized compression; two It is to prevent undefined value is changed.
Two jquery Constructor
First, look at the source code:
jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } jQuery.fn = jQuery.prototype = {...}; jQuery.fn.init.prototype = jQuery.fn;
When we call $ () or jQuery (), actually returns a new jQuery.fn.init () is an example of that is the real constructor is jQuery.fn.init (), which in turn below jQuery prototype point jQuery.fn, that is to say fn is jQuery prototype, then turn jQuery prototype constructor points to a real prototype, this is quite wound, the video teacher to do so mainly in order for us to call to complete when $ () constructor to initialize directly, rather than what we usually use the first $ (). init () to initialize, and then call some methods on $) (. While the source is around, but the actual use of the process, or simple a lot. And the high cloud big brother is explained, in general, we create an object instance, or in the way the operator is immediately behind a new constructor, if the constructor has a return value, the object created by the operator will be abandoned, the return value as the value of the new expression. So that when we do not need to create new jQuery object, direct some jQuery ().
Let's look at some of the jQuery prototype source code structure is as follows:
jQuery.fn = jQuery.prototype = { jquery: core_version, // 版本号 constructor: jQuery, // 防止原型被覆盖 init: function( selector, context, rootjQuery ) {...}, // 初始化 selector: "", length: 0, toArray: function() {...}, get: function( num ) {...}, pushStack: function( elems ) {...}, each: function( callback, args ) {...}, ready: function( fn ) {...}, slice: function() {...}, first: function() {...}, last: function() {...}, eq: function( i ) {...}, map: function( callback ) {...}, end: function() {...}, push: core_push, sort: [].sort, splice: [].splice };
As used herein, an object of the jQuery prototype coverage, the next object is a detailed analysis.
First, this object defines a number of properties and methods. Init look here focuses this initialization method accepts three arguments, Selector element selected string, context is an element selected context, rootjQuery is document object. Then on the right selector we made some simple assignment. Source as follows:
init: function( selector, context, rootjQuery ) { var match, elem; if ( !selector ) { return this; } if ( typeof selector === "string" ) { if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { match = [ null, selector, null ]; } else { match = rquickExpr.exec( selector ); } if ( match && (match[1] || !context) ) { if ( match[1] ) { context = context instanceof jQuery ? context[0] : context; jQuery.merge( this, jQuery.parseHTML( match[1], context && context.nodeType ? context.ownerDocument || context : document, true ) ); if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) { for ( match in context ) { if ( jQuery.isFunction( this[ match ] ) ) { this[ match ]( context[ match ] ); } else { this.attr( match, context[ match ] ); } } } return this; } else { elem = document.getElementById( match[2] ); if ( elem && elem.parentNode ) { this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } } else if ( !context || context.jquery ) { return ( context || rootjQuery ).find( selector ); } else { return this.constructor( context ).find( selector ); } } else if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } if ( selector.selector !== undefined ) { this.selector = selector.selector; this.context = selector.context; } return jQuery.makeArray( selector, this ); }
To be continued ?????