Extend functions in jQuery

Extend functions in jQuery

In the jQuery API manual, we can see that extend is actually mounted to jQuery and jQuery. two different methods on fn, although jQuery. extend () and jQuery. fn. extend () is implemented using the same code, but their functions are not the same. Let's take a look at the official API's explanation of extend:

The Code is as follows:

Copy codeThe Code is as follows:
JQuery. extend (): Merge the contents of two or more objects together into the first object. (Merge two or more objects into the first object)
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 static methods and instance methods, so jQuery. extend () and jQuery. fn. the first difference between extend () is that one is used to expand the static method and the other is used to expand the instance method. The usage is as follows:

Copy codeThe Code is 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 checkpoints are selected.

Pay attention to the two ways to call the plug-in. One is to call the plug-in directly with $, the other is to call with $ (), and the other is jQuery. extend () receives multiple objects as parameters. If there is only one parameter, the property method of this object is appended to jQuery. If there are multiple parameters, then, the attributes and methods of the following objects are appended to the first object. JQuery extend implementation source code:

Copy codeThe Code is 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;
};

A lot of code is hard to understand at first glance. In fact, most of the code is used to implement jQuery. when there are multiple parameters in extend (), objects are merged and the deep copy problem occurs. If you remove these features and make extend only have the ability to expand static and instance methods, the Code is as follows:

Copy codeThe Code is as follows:
JQuery. extend = jQuery. fn. extend = function (obj ){
// Obj is the object passed to extend to this.
Var target = this;
For (var name in obj ){
// Name is the object property
// Copy is the property value.
Copy = obj [name];
// Prevent loop calls
If (target = copy) continue;
// Prevent additional undefined values
If (typeof copy = 'undefined') continue;
// Assign a value
Target [name] = copy;
}
Return target;
}

The following describes the extend method:

Copy codeThe Code is as follows:
JQuery. extend = jQuery. fn. extend = function (){
// Define default parameters and variables
// Objects are divided into extended objects and extended objects.
// Options indicates the method in the extended object
// Name indicates the method name of the extended object
// I is the starting value of the extended object parameter
// By default, deep is a light copy.
Var options, name, src, copy, copyIsArray, clone,
Target = arguments [0] | | {},
I = 1,
Length = arguments. length,
Deep = false;
// 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;
}
// Traverse multiple parameters starting with I
For (; I <length; I ++ ){
// Process only defined values
If (options = arguments [I])! = Null ){
// Expand the extension object
For (name in options ){
Src = target [name];
Copy = options [name];
// Prevent circular references
If (target = copy ){
Continue;
}
// Recursive processing of deep copy
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;
};

After understanding the jQuery extension principle, I believe that you will no longer have to worry about writing jQuery plug-ins.