In the jquery API manual, we see that extend is actually two different ways to mount jquery and Jquery.fn, although within the jquery jquery.extend () and JQuery.fn.extend () are implemented with the same code, but their functionality is not quite the same. Take a look at the official API's explanation for extend:
The code is as follows:
Copy Code code as follows:
Jquery.extend (): Merge the contents of two or more objects together into the. (merge two or more objects into the first one)
JQuery.fn.extend (): Merge the contents of an object onto the jquery prototype to provide new jquery instance methods. (Mount the object to the prototype attribute of jquery to extend a new jquery instance method)
We know that jquery has a static method and an instance method, so the first difference between jquery.extend () and JQuery.fn.extend () is one that extends the static method and one that extends the instance method. Usage is as follows:
Copy Code code as follows:
Jquery.extend ({
Sayhello:function () {
Console.log ("Hello,this is JQuery Library");
}
})
$.sayhello (); Hello, this is JQuery Library
JQuery.fn.extend ({
Check:function () {
return this. each (function () {
this. Checked = true;
});
},
Uncheck:function () {
return this. each (function () {
this. checked = false;
});
}
})
$ ("input[type= ' checkbox ']"). Check (); All the checkbox will be selected
Note two ways to invoke Plug-ins, one is directly with the $ call, the other is a $ () call, another jquery.extend () to receive multiple objects as parameters, if there is only one argument, the object's property method attached to jquery, if there are multiple parameters, The properties and methods of the following objects are appended to the first object. JQuery extend implementation of the source code:
Copy Code code as follows:
Jquery.extend = JQuery.fn.extend = function () {
var options, name, SRC, copy, Copyisarray, clone,
target = Arguments[0] | | {},
i = 1,
Length = Arguments.length,
Deep = false;
Handle a deep copy situation
if (typeof target = = "Boolean") {
Deep = target;
target = Arguments[1] | | {};
Skip the Boolean and the target
i = 2;
}
if (typeof target!== "Object" &&!jquery.isfunction (target)) {
target = {};
}
if (length = = i) {
target = this;
I.;
}
for (; i < length; i++) {
if (options = arguments[i])!= null) {
Extend the Base Object
for (name in options) {
src = target[name];
copy = options[name];
Prevent never-ending Loop
if (target = = copy) {
Continue;
}
if (deep && copy && jquery.isplainobject (copy) | | (Copyisarray = Jquery.isarray (copy)) ) {
if (Copyisarray) {
Copyisarray = false;
clone = src && jquery.isarray (src)? SRC: [];
} else {
clone = src && jquery.isplainobject (src)? src: {};
}
target[name] = Jquery.extend (deep, clone, copy);
Don ' t bring in undefined values
else if (copy!== undefined) {
target[name] = copy;
}
}
}
}
Return the Modified Object
return target;
};
Very large heap of code, at first glance difficult to understand, in fact, most of the code is used to implement Jquery.extend () with multiple parameters of the object merge, deep copy problem, if you remove these features, so that extend only extend the functionality of static and instance methods, then the code is as follows:
Copy Code code as follows:
Jquery.extend = JQuery.fn.extend = function (obj) {
Obj is the object that is passed over to extend to this
var target= this;
for (var name in obj) {
Name is Object property
Copy is a property value
Copy=obj[name];
Prevent circular calls
if (target = = copy) continue;
Prevent appending of undefined values
if (typeof copy = = ' undefined ') continue;
assigning values
Target[name]=copy;
}
return target;
}
The following is an explanation of the Extend method:
Copy Code code as follows:
Jquery.extend = JQuery.fn.extend = function () {
Defining default parameters and variables
Objects are divided into extended objects and extended objects
Options represent methods in an extended object
Name represents the method name of the extended object
I is the starting value of the extended object parameter
Deep default to shallow replication
var options, name, SRC, copy, Copyisarray, clone,
target = Arguments[0] | | {},
i = 1,
Length = Arguments.length,
Deep = false;
To process the following parameters
if (typeof target = = "Boolean") {
Deep = target;
target = Arguments[1] | | {};
i = 2;
}
if (typeof target!== "Object" &&!jquery.isfunction (target)) {
target = {};
}
if (length = = i) {
target = this;
I.;
}
Traversal of multiple parameters starting with I
for (; i < length; i++) {
Only have defined values processed
if (options = arguments[i])!= null) {
Expand an Extension object
for (name in options) {
src = target[name];
copy = options[name];
Prevent circular references
if (target = = copy) {
Continue;
}
Recursive processing of deep copies
if (Deep && copy &&; (Jquery.isplainobject (copy) | | (Copyisarray = Jquery.isarray (copy)) ) {
if (Copyisarray) {
Copyisarray = false;
clone = src && jquery.isarray (src)? SRC: [];
} else {
clone = src && jquery.isplainobject (src)? src: {};
}
target[name] = Jquery.extend (deep, clone, copy);
Do not process undefined values
else if (copy!== undefined) {
Add attributes or methods to target
target[name] = copy;
}
}
}
}
Return
return target;
};
Understand the principle of jquery expansion, I believe that no longer need to write jquery plug-ins and worry about.
