The definition of the =>jquery of jquery source code Analysis

Recently write the previous paragraph of the code is more, jquery is the most use of an object, but before a few times to see the source, did not understand how jquery is defined, today finally see what is going on. Record it as a new beginning.

(The source of the text is jQuery-1.10.2 version)

First, a jquery-defined source code that defines jquery as a function

1     // Define A local copy of JQuery 2     function (Selector, context) {3         // The JQuery object is actually just the Init constructor       ' enhanced '4         return New JQuery.fn.init (Selector, context, rootjquery); 5     

This is our usual format: $ ("#div1"), which is defined by this function.

This function has only one line of valid code, which is to instantiate a type that is defined in the jquery prototype, then continue looking down.

1Jquery.fn = Jquery.prototype = {2     //The current version of the jQuery being used3 Jquery:core_version,4 5 Constructor:jquery,6Init:function(selector, context, rootjquery) {7         varmatch, Elem;8 9         //HANDLE: $ (""), $ (null), $ (undefined), $ (false)Ten         if( !selector) { One             return  This; A         } -  -         //Handle HTML Strings the         if(typeofselector = = = "string" ) { -             if(Selector.charat (0) = = = "<" && Selector.charat (selector.length-1) = = = ">" && selector.length &G T;= 3 ) { -                 //assume that strings, start and end with <> is HTML and skip the regex check -Match = [NULL, selector,NULL ]; +  -}Else { +Match =rquickexpr.exec (selector); A             } at  -             //Match HTML or make sure no context are specified for #id -             if(Match && (match[1 | | |!)context)) { -  -                 //HANDLE: $ (HTML), $ (array) -                 if(match[1] ) { inContext = ContextinstanceofJquery? Context[0]: Context; -  to                     //scripts is true for Back-compat +Jquery.merge ( This, jquery.parsehtml ( -Match[1], theContext && Context.nodetype? context.ownerdocument | |Context:document, *                         true $                     ) );Panax Notoginseng  -                     //HANDLE: $ (HTML, props) the                     if(Rsingletag.test (match[1]) &&Jquery.isplainobject (context)) { +                          for(Matchinchcontext) { A                             //Properties of the context are called as methods if possible the                             if(Jquery.isfunction ( This[match])) { +                                  This[Match] (context[match]); -  $                             //... and otherwise set as attributes $}Else { -                                  This. attr (match, context[match]); -                             } the                         } -                     }Wuyi  the                     return  This; -  Wu                 //HANDLE: $ (#id) -}Else { AboutElem = document.getElementById (match[2] ); $  -                     //Check parentnode to catch when Blackberry 4.6 returns -                     //nodes that is no longer in the document #6963 -                     if(Elem &&elem.parentnode) { A                         //Handle the case where IE and Opera return items +                         //by name instead of ID the                         if(Elem.id!== match[2] ) { -                             returnRootjquery.find (selector); $                         } the  the                         //Otherwise, we inject the element directly into the JQuery object the                          This. length = 1; the                          This[0] =Elem; -                     } in  the                      This. Context =document; the                      This. selector =selector; About                     return  This; the                 } the  the             //HANDLE: $ (expr, $ (...)) +}Else if(!context | |context.jquery) { -                 return(Context | |rootjquery). Find (selector); the Bayi             //HANDLE: $ (expr, context) the             //(which is just equivalent to: $ (context). Find (expr) the}Else { -                 return  This. Constructor (context). Find (selector); -             } the  the         //HANDLE: $ (domelement) the}Else if(selector.nodetype) { the              This. Context = This[0] =selector; -              This. length = 1; the             return  This; the  the         //HANDLE: $ (function)94         //Shortcut for document ready the}Else if(Jquery.isfunction (selector)) { the             returnRootjquery.ready (selector); the         }98  About         if(Selector.selector!==undefined) { -              This. selector =Selector.selector;101              This. Context =Selector.context;102         }103 104         returnJquery.makearray (Selector, This ); the     },106 ..... Other methods omitted107}

In the above code, the prototype of jquery is defined, and then the prototype is given to jquery.fn;$.fn this thing everyone should be very familiar with, we extend the jquery plugin when the length of the use of it, in fact, we want to add a method of jquery prototype.

The INIT function is important in the definition of the prototype, with three parameters: Selector,context,rootjquery.

In this function is judged according to various circumstances, such as: Selector object is false when the processing of $ ("") or $ (null) or $ (undefined), (note is indicated);

If selector is a function, it is our most commonly used page load handler: $ (function () {...});

Here, it should be clear that the jquery object is just a function, and then instantiate a jQuery.fn.init inside;

But the problem comes, when we do the jquery plugin, the extension is Jquery.fn, is the prototype of jquery, and jQuery.fn.init the instantiation of the object does not matter, what is this?

The next line of code solves my doubts:

1 // Give the init function The JQuery prototype for later instantiation 2 jQuery.fn.init.prototype = Jquery.fn;

The definition of the jquery prototype was assigned to the JQuery.fn.init prototype, so that while we expanded the jquery prototype and expanded the JQuery.fn.init prototype, the JQuery object had the methods (specifically, the instantiated object of the JQuery.fn.init type)

The next source defines Jquery.extend=jquery.fn.extend=function () {}, and then adds the predefined methods and properties, such as the Ready function, the Isfunction function, the each function, and so on, through both methods.

By this point, the definition of jquery is over, and some of the methods we use are also pre-defined in the source code through the Extend method.

The definition of the =>jquery of jquery source code Analysis