JQuery source code analysis-03 construct jQuery objects-source code structure and core functions

Author: nuysoft/high cloud QQ: 47214707 EMail: nuysoft@gmail.com after all is while reading and writing, wrong place please tell me, a lot of exchange for common progress. This chapter has not been completed yet. After that, a PDF file will be submitted. Note: If you want to write the system well, you will first start with the part you are interested in. Recently... SyntaxHighlighter

Author: nuysoft/high cloud QQ: 47214707 EMail: nuysoft@gmail.com

After all, it is reading and writing. If something is wrong, please let me know and exchange more information for common progress. This chapter has not been completed yet. After that, a PDF file will be submitted.

 

Note:

I want to write the system well, but it will start from the interesting part.

Some readers recently uploaded PDF files to Baidu Library. First of all, I would like to thank them for reprinting and dissemination. However, it is not good to download the PDF files only when a high value of wealth already exists and has been set, I will upload it to the library after finishing the sorting. Be considerate.

 

3. Construct a jQuery object

3.1 source code structure

First look at the overall structure, and then break down:

 

(Function(Window,Undefined){ VarJQuery = (Function(){ // Construct a jQuery object VarJQuery =Function(Selector, context ){ ReturnNewJQuery. fn. init (selector, context, rootjQuery ); } // JQuery object prototype JQuery. fn = jQuery. prototype = { Constructor: jQuery, Init:Function(Selector, context, rootjQuery ){ // Selector has the following seven branches: // DOM Element // Body (optimized) // String: HTML Tag, HTML string, # id, selector expression // Function (as the ready callback function) // Returns a pseudo array. } }; // Give the init function the jQuery prototype for later instantiation JQuery. fn. init. prototype = jQuery. fn; // Merge the content into the first parameter. Most subsequent functions are extended through this function. // Most functions extended by jQuery. fn. extend call functions of the same name extended by jQuery. extend. JQuery. extend = jQuery. fn. extend =Function(){}; // Expand the static method on jQuery JQuery. extend ({ // Ready bindReady // IsPlainObject isEmptyObject // ParseJSON parseXML // GlobalEval // Each makeArray inArray merge grep map // Proxy // Access // UaMatch // Sub // Browser });   // Here, the jQuery object is constructed, and the code behind it is an extension of jQuery or jQuery object. ReturnJQuery; })(); Window. jQuery = window. $ = jQuery; }) (Window );

L The jQuery object is not passedNewCreated by jQuery, but throughNewCreated by jQuery. fn. init

 

 

VarJQuery =Function(Selector, context ){ ReturnNewJQuery. fn. init (selector, context, rootjQuery ); }

N The jQuery object is the jQuery. fn. init object.

N if new jQeury () is executed, the generated jQuery object will be discarded and jQuery will be returned. fn. init object. Therefore, you can directly call jQuery (selector, context) without using the new keyword.

L run jQuery. fn = jQuery. prototype first, and then jQuery. fn. init. prototype = jQuery. fn. The Combined Code is as follows:

 

JQuery. fn. init. prototype = jQuery. fn = jQuery. prototype

 

All the methods for attaching to jQuery. fn are equivalent to mounting to jQuery. prototype, that is, mounting to the jQuery function (jQuery =Function(Selector, context), but it is mounted to jQuery. fn. init. prototype, which is equivalent to mounting to the object returned by the jQuery function at the beginning, that is, mounting to the final jQuery object we use.

This process is very difficult. Here, Jin Yu's "scum!

3.2 jQuery. fn. init

The function of jQuery. fn. init is to analyze the passed selector parameters, perform various processing, and then generate jQuery objects.

 

 

Type (selector)	Processing Method
DOM Element	Packaged as a jQuery object and returned directly
Body (optimized)	Read from document. body
Separate HTML tags	Document. createElement
HTML string	Document. createDocumentFragment
# Id	Document. getElementById
Selector expression	$ (...). Find
Function	Registers the callback function of dom ready.

3.3 jQuery. extend = jQuery. fn. extend

 

// Merge the attributes of two or more objects into the first object. Most of jQuery's subsequent functions are extended through this function. // Most functions extended by jQuery. fn. extend call functions of the same name extended by jQuery. extend.   // If two or more objects are input, the attributes of all objects will be added to the first target object.   // If only one object is input, the attributes of the object are added to the jQuery object. // In this way, we can add a new method for the jQuery namespace. It can be used to compile jQuery plug-ins. // If you do not want to change the input object, you can pass in an empty object: $. extend ({}, object1, object2 ); // By default, the merge operation is not iterative. Even if a target attribute is an object or attribute, it will be completely overwritten rather than merged. // If the first parameter is true, the merge operation is performed iteratively. // Attributes inherited from the object prototype will be copied // Undefined value will not be copied // For performance reasons, attributes of the built-in JavaScript type are not merged.   // JQuery. extend (target, [object1], [objectN]) // JQuery. extend ([deep], target, object1, [objectN]) JQuery. extend = jQuery. fn. extend =Function(){ VarOptions, name, src, copy, copyIsArray, clone, Target = arguments [0] | | {}, I = 1, Length = arguments. length, Deep =False;   // Handle a deep copy situation // If the first parameter is boolean, it may be a deep copy. If(TypeofTarget = "boolean "){ Deep = target; Target = arguments [1] || {}; // Skip the boolean and the target // Skip boolean and target, starting from 3rd I = 2; }   // Handle case when target is a string or something (possible in deep copy) // If target is neither an object nor a function, it is forcibly set to an empty object. If(TypeofTarget! = "Object "&&! JQuery. isFunction (target )){ Target = {}; }   // Extend jQuery itself if only one argument is passed // If only one parameter is input, it is considered to be an extension of jQuery. If(Length = I ){ Target =This; -- I; }   For(; I <length; I ++ ){ // Only deal with non-null/undefined values // Only process non-empty Parameters If(Options = arguments [I])! =Null){ // Extend the base object For(NameInOptions ){ Src = target [name]; Copy = options [name];   // Prevent never-ending loop // Avoid circular references If(Target = copy ){ Continue; }   // Recurse if we're merging plain objects or arrays // Recursive If(Deep & copy & (jQuery. isPlainObject (copy) | (copyIsArray = jQuery. isArray (copy )))){ // If copy is an array If(CopyIsArray ){ CopyIsArray =False; // Clone the corrected value of src Clone = src & jQuery. isArray (src )? Src: []; // If the copy object is }Else{ // Clone the corrected value of src Clone = src & jQuery. isPlainObject (src )? Src :{}; }   // Never move original objects, clone them // Call jQuery. extend recursively Target [name] = jQuery. extend (deep, clone, copy );   // Don't bring in undefined values // The null value cannot be copied. }ElseIf(Copy! =Undefined){ Target [name] = copy; } } } }   // Return the modified object // Return the modified object ReturnTarget; };