jquery Core Function Analysis

Zccst

Core features include:

How jquery is defined, how it is called, and how it is extended. Mastering the core approach is the key to understanding the jquery source code. It is understood here that everything is enlightened.

1, how to define, namely the entrance

Define a local copy of JQuery
var jQuery = function (selector, context) {
The JQuery object is actually just the Init constructor ' enhanced '
return new JQuery.fn.init (selector, context, rootjquery);//jquery object is just a constructor jQuery.prototype.init enhanced version
}

The prototype of 2,jquery and its relationship with JQuery.fn.init

Defines the object method, which is the only way to be called by $ ("XX").

Jquery.fn = Jquery.prototype = {

Init:function (selector, context, rootjquery) {

return Jquery.makearray (selector, this);

}

There are many other properties and methods,

Properties are: Jquery,constructor, selector, length

Methods are: Toarray,get, Pushstack,each, Ready,slice, First,last,eq, Map,end, push, sort, splice

...

}

Assigning Jquery.prototype to JQuery.prototype.init.prototype for later instantiation

Give the init function The JQuery prototype for later instantiation
JQuery.fn.init.prototype = Jquery.fn;

That is, $ ("XX") has an instance method that can be called. (Call the method defined under Jquery.prototype)

3,extend extension Object methods and static method principles

Jquery.extend = JQuery.fn.extend = function () {

var target = Arguments[0] | | {};

return target;

}

It is convenient to use extend, nothing more than $.extend ({}), and $.fn.extend ({}); If you can see the FN when you understand the idea of jquery.prototype.

Look at this scope again:

$.extend->this is $-> this.aa ()

$.fn.extend->this is $.fn-> This.aa ()

Attached extend implementation Details:

Usage scenarios:

1, extend some functions

Only one parameter. Example: $.extend ({f1:function () {},f2:function () {},f3:function () {}})

2, merging multiple objects into the first object

(1) Shallow copy, the first parameter is the target object. For example

var a = {name: "Hello"}

var B = {age:30}

$.extend (A, b);//a={name: "Hello", age:30}

(2) deep copy, the first parameter is true, and the second parameter is the target object. For example

var a = {name:{job: "It"}};
var B = {name:{age:30}};
$.extend (A, b);
$.extend (TRUE,A,B);
Console.log (a);

1Jquery.extend = JQuery.fn.extend =function() {2     varoptions, name, SRC, copy, Copyisarray, clone,3target = Arguments[0] | | {},4i = 1,5Length =Arguments.length,6Deep =false;7 8     //Is not a deep copy Handle a deeply copy situation9     if(typeoftarget = = = "Boolean" ) {TenDeep =Target; Onetarget = Arguments[1] | | {}; A         //Skip the Boolean and the target -i = 2; -     } the  -     //not an object type Handle case if Target is a string or something (possible in deep copy) -     if(typeofTarget!== "Object" &&!jquery.isfunction (target)) { -target = {}; +     } -  +     //extension Case Extend jQuery itself if only one argument is passed A     if(length = = = i) {//$.extend ({f1:function () {},f2:function () {},f3:function () {}}) attarget = This;//this is $, or $.fn ---i; -     } -  -      for(; i < length; i++) {//There may be multiple objects extending to the first object -         //Only deal with non-null/undefined values in         if(options = arguments[i])! =NULL) {//options is an object -             //Extend the Base object to              for(Nameinchoptions) { +src = target[name];//SRC is a value that already exists in target (or it may not exist) -copy = options[name];//copy is a value that you want to fit into the  *                 //prevent circular referencing Prevent never-ending loop $                 if(target = = copy) {//For example: Var a={};$.extend (a,{name:a});//may cause circular referencesPanax Notoginseng                     Continue; -                 } the  +                 //if is deep copy else is shallow copy Recurse if we ' re merging plain objects or arrays A                 if(Deep && copy && jquery.isplainobject (copy) | | (Copyisarray =jquery.isarray (copy))) ) { the                     if(Copyisarray) { +Copyisarray =false; -clone = src && jquery.isarray (src)?src: []; $  $}Else { -clone = src && jquery.isplainobject (src)?src: {}; -                     } the  -                     //to the deepest layer of non-object type, and one by one. Never move original objects, clone themWuyitarget[name] =jquery.extend (deep, clone, copy); the  -                 //Don ' t bring in undefined values Wu}Else if(Copy!==undefined) { -target[name] = copy;//target[Name] = options[name]; About                 } $             } -         } -     } -  A     //Return the Modified object +     returnTarget; the};