The 4th chapter of jquery Source code interpretation---the interpretation of extend

Why do we say extend from the start?In fact, I read the source of the process, found that in fact, our method is in the source code is called extend callbacks deferred these tool methodsso it's very necessary for us to study these,,,,,,,,,,, so that it will be very helpful for our follow-up study.The study of extend,,,,, first look at the extend how we usually use1. Merge Objectsextend (dest,src1,src2,,,,,)

What it means is to src1,src2 ... Merge into Dest

And put back the result is the merged dest

eq

var dest = {name: ' obj '};

$.extend (dest,{age:30,job: "It"},{age:80})

Console.log (dest)//object {name: "obj", age:80, Job: "It"}

2 .... extensions (divided into extension tool methods and instance methods)

$.extend ({

Hello:function () {

}

})

This is the extension tool method

The outside world can call directly-----$.hello ()

$.fn.extend ({

Hello:function () {

}

})

This is the example method.

Call-----$ (). Hello ()

3 ... deep copy

$.extend (BOOLEAN,A,B)

If the Boolean is true,,, that is the deep copy

eq

var result = $.extend (true,{},{name: ' John ', location:{city: ' Boston ', Country: ' USA '}},{last: ' Resig ', location:{state: ' MA ', Country: ' China '})

This time

Result

If the Boolean is False

Result is

This is the method and situation that extend used in the actual development

Understand the use of,,, to help us read the source code

Now let's take a look at the source

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

}

You'll find that jquery is a very ingenious design.

Instance methods and tool methods use the same set of code

We want to write a general

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

var options,name,src,

target = Arguments[0] | | {};

　　

return target;

　　

}

Here we can see that the target object is returned.

SOURCE Interpretation

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

var options,name,src,copy,copyisarray,clone,

target = Arguments[0] | | {},

i = 1,

Length = Arguments.length,

Deep = false; Default to shallow copy

if (typeof target = = = ' Boolean ') {

Determine if it is a deep copy

Deep = target;

target = Arguments[1] | | {};

i = 2; Except for the Boolean and target

}

Avoid target is not an object

if (typeof target!== ' object ' &&!jquery.isfunction (target)) {

target = {};

}

Decide whether to extend the plugin

if (length ===i) {

/*

Why length = = i is the extension plug

We can tell in the usage above

Merge

$.extend (A, B)

Deep copy

$.extend (TRUE,A,B)

Only extension plug-ins

$.extend ({})

This is the case that length and I are equal

　　　　　　

*/

target = this;

We found that for the extended tool method or instance method,,,,,,, they differ only from target = this

This is a different way of referring to different,,,, extensions.

This---$.fn---instance method---jquery prototype

This----$-----tool Method------JQuery

I.;

　　　　

}

for (; i<length;i++) {

if (options = Arguments[i])! = null) {

This if is used to determine if the parameter is null

$.extend (a,null)------> No sense at all

for (name in options) {

/*

One thing we need to know is whether the extension

Or a deep copy merge

They're all coming in here.

*/

//

src = target[name]; Target----> Arguments[0]

copy = options[name]/options----> arguments[i]

　　　　　　　　

if (target = = = copy) {

Continue The function of continue is to,,,, skip when conditions are met.

/*

Why do you want to continue it,,,,

That's preventing the loop from going into death.

eq

var a ={}

$.extend (A, {c:a})

At this point A is

Keep circulating.

*/

}

　　　　　　　　

if (deep && copy && jquery.isplainobject (copy) | | (Copyisarray = Jquery.isarray (copy))) ) {//Deep copy

/*

Jquery.isplainobject (copy) This tool method is to determine whether copy is a pure {}

The popular point is to determine if copy is {} or New Object ()

Jquery.isarray (copy) This tool method is to determine whether the array

*/

if (Copyisarray) {//

Copyisarray = false;

clone = src && jquery.isarray (src)? SRC: []

}else{

clone = src && jquery.isplainobject (src)? SRC: {}

}

Target[name] = jquery.extend (deep,clone,copy)//recursion

　　　　　　　　

　　　　　　　　　　　　

}else if (copy!== undefined) {//Shallow copy

Target[name] = copy;

/*

For example.. Extensions because it says that target is jquery.

That Target[name] is a way to add a name to jquery.

*/

}

　　　　　　　　

}

}

}

　　

　　

}

I Caishuxueqian,, here is I look at the jquery source of some sentiment just,,,,, if there is no place,,, welcome you message points, and common progress or email to [email protected]

PS: Pass to leave a point mark.

If you feel good after reading this article, please click on the bottom right corner of the [recommended] to support the blogger, thank you! original articles, reproduced please specify the source!!!

by http://www.cnblogs.com/haoxuebujuan/p/6020413.html

The 4th chapter of jquery Source code interpretation---the interpretation of extend