jquery Source Learning 2--initialization of the article

This article summarizes some of the initialization work that JS did when it was introduced.

The first sentence window.undefined=window.undefined;

is written for compatibility with the lower version of IE

Because undefined is not a property under the Window object in the low version of IE

So window.undefined is undefined.

According to the characteristics of the right tuberculous character of the = operator, the window.undefined on the right is undefined

Since window has no undefined property

So the left side can actually be understood as extending a undefined property under window

This value is undefined.

Next

if  ( $ ){    = $;}

This is for conflict prevention.

If you introduce a different library before you introduce jquery

And the other libraries already have $ as global variables

This will first place the $ existing in the other library under the _$ property

Next, we'll assign jquery to $

When you call $ again after that, it's jquery's $.

If you want to use a different library

You can get it through jquery._$.

Next, assign the already defined jquery constructor to the $

var $ = jQuery;

And then added some example methods to jquery.

I personally feel that these instance methods are at a top-level position

This means that many other methods are called in these methods, especially when other static methods are called

So I want to learn some of the most basic static methods and then look back at this part

Next up is the Extend method.

Extend is a basic method of jquery internal extension instantiation and static methods

is also a way for jquery to expand the external plugin

function (obj,prop) {    ifthis;}      for var  in prop) obj[i] = prop[i];     return obj;};

V1.0.0 's extend logic is simple.

From the definition of a function, the author wants to pass two parameters to extend: obj and prop

The function naturally is to extend the members of the prop to obj.

But if only one parameter is passed in, it represents the extension to jquery or Jquery.fn itself.

Which means that obj is jquery or Jquery.fn.

The first sentence in the method is the function.

It is worth mentioning that this place skillfully exploits this

If you call by using the following method

Jquery.extend ({"AAA": 1})

So the this point inside is jquery, which expands the AAA into a static member of jquery.

And if you call it by this way

JQuery.fn.extend ({"BBB": 2});

So the inside of this is pointing to Jquery.fn, the Jquery.prototype, which expands the BBB into an instantiated member of jquery.

And then we expand some static members.

These static properties or methods cover initialization, property manipulation, style manipulation, dom manipulation, selectors, event systems, and more

Initialize: Init

Property operation: Classname.add classname.remove Classname.has attr

Style action: Swap CSS Curcss

Dom Operation: Clean getAll parents Sibling

Selector: Expr token find parse filter

Event System: Event.add event.remove Event.trigger event.handle event.fix

Tool Method: Each trim merge grep map

These methods, and so on, have come to a concrete look.

And then there's an initialization code block, which adds two static members to jquery:

Jquery.browser and Jquery.boxmodel

Jquery.browser is used to judge the browser, Jquery.boxmodel is used to determine whether it is a standard box model

Both of these properties are simple

And then there's this static member of Jquery.macros.

Macros in fact, there are several methods of "public information" stored

These methods are implemented in the next Jquery.init ()

jquery.extend ({jquery.initdone=true; Init:function() {Jquery.each (JQuery.macros.axis,function(i,n) {...}); Jquery.each (JQuery.macros.to,function(i,n) {...}); Jquery.each (JQuery.macros.each,function(i,n) {...}); Jquery.each (JQuery.macros.filter,function(i,n) {...}); Jquery.each (JQuery.macros.attr,function(i,n) {...}); Jquery.each (JQuery.macros.css,function(i,n) {...}); }, each:function(Obj,fn,args) {if(Obj.length = =undefined) { for(varIinchobj) {fn.apply (obj[i], args||[I, Obj[i]]); }        }Else{ for(vari = 0; i < obj.length; i++) {fn.apply (obj[i], args||[I, Obj[i]]); }}returnobj; }});

Jquery.macros ={to: {appendTo:"Append", Prependto:"Prepend", InsertBefore:"Before", InsertAfter:"After"}, CSS:"Width,height,top,left,position,float,overflow,color,background". Split (","), filter: ["EQ", "LT", "GT", "contains"], attr: {val:"Value", HTML:"InnerHTML", ID:NULL, Title:NULL, Name:NULL, href:NULL, SRC:NULL, rel:NULL}, Axis: {parent:"A.parentnode", Ancestors:jQuery.parents, Parents:jQuery.parents, Next:"Jquery.sibling (a). Next", prev:"Jquery.sibling (a). Prev", siblings:jQuery.sibling, children:"A.childnodes"}, each: {removeattr:function(key) { This. removeattribute (key); }, Show:function(){             This. style.display = This. oldblock? This. Oldblock: ""; if(Jquery.css ( This, "display") = = "None" )                 This. style.display = "Block"; }, Hide:function(){             This. Oldblock = This. oldblock | | JQUERY.CSS ( This, "Display"); if( This. Oldblock = = "None" )                 This. Oldblock = "Block";  This. style.display = "None"; }, Toggle:function(){            $( This)[ $( This). Is (": hidden")? "Show": "Hide"].apply ($ ( This), arguments); }, AddClass:function(c) {JQuery.className.add ( This, c); }, Removeclass:function(c) {JQuery.className.remove ( This, c); }, Toggleclass:function(c) {jquery.classname[JQuery.className.has ( This, c)? "Remove": "Add"] ( This, c); }, remove:function(a) {if(!a | | jquery.filter ([ This], a). R) This. Parentnode.removechild ( This ); }, Empty:function(){             while( This. FirstChild) This. RemoveChild ( This. FirstChild); }, bind:function(Type, fn) {if(Fn.constructor = =String) FN=NewFunction ("E", (!fn.indexof (".")? "$ (This)": "Return") +FN); JQuery.event.add ( This, type, FN); }, Unbind:function(Type, fn) {JQuery.event.remove ( This, type, FN); }, Trigger:function(type, data) {JQuery.event.trigger (type, data, This ); }    }};

Jquery.init ();

The Init method was called during jquery initialization

The Init method iterates through each of the enumeration methods in the macros.

Each method internally determines whether the incoming obj is an array or an object to determine whether it is a foreach traversal or A For loop

Finally, these methods will be implemented and extended to Jquery.prototype.

Further down, the prototype method is expanded toggle hover ready and static method

And then there's a new function () {} Self-executing code block

The first half of this code block is to extend some event methods and their event extension methods for instantiating objects

The so-called event extension method, for example, the Click event

Corresponding, there are unclick oneclick these two extension methods

The second part is the function of load.

The code finally expands on some members of the animation and Ajax

In general, the jquery source code contains the following modules:

1. Basic Tools and methods

2. Event System

3. domready--wait for the DOM structure to load and then execute the corresponding function

4. Dom operation

5. Attribute and style operation

6. Selector

7. Animation

8. Ajax

jquery Source Learning 2--initialization of the article