The realization principle of extend function in jquery _jquery

Extend () is an important function in jquery, which is to extend the object, it is often used in the development of the jquery plug-in, and it is used inside jquery to extend the attribute method, as the Noconflict method mentioned in the previous article is extended by the Extend method.

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:

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:

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:

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;  //Handle case when the target is a string or something (possible in deep copy) if (typeof target!== "Object" &&
 !jquery.isfunction (target)) {target = {};
 }//Extend JQuery itself if only one argument are passed if (length = = i) {target = this;
 I.; for (; i < length; i++) {//only deal with non-null/undefined values 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; }//Recurse If we re merging plain objects or arrays if (deep && copy &AMP;&Amp (Jquery.isplainobject (copy) | | (Copyisarray = Jquery.isarray (copy))
  {if (copyisarray) {Copyisarray = false; clone = src && jquery.isarray (src)?
  SRC: [];
  else {clone = src && jquery.isplainobject (src)? src: {};
 }//Never Move original objects, clone them 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:

Jquery.extend = JQuery.fn.extend = function (obj) {
 //obj is an object that is passed over to extend to this
 var target=this;
 for (var name in obj) {
 //name is an object property
 //copy as an attribute value
 Copy=obj[name];
 Prevent loop call
 if (target = = copy) continue;
 Prevents the addition of undefined value
 if (typeof copy = = ' undefined ') continue;
 Assign value
 target[name]=copy;
 }
 return target;
}

The following is an explanation of the Extend method:

Jquery.extend = JQuery.fn.extend = function () {//define default parameters and variables//objects are divided into extended objects and extended Objects//options objects that represent extended objects//name Method name//i for extended object parameter starting value//deep default is shallow copy var options, name, SRC, copy, Copyisarray, clone, target = Arguments[0] | |
 {}, I = 1, length = arguments.length, deep = false;
 When the first argument is a Boolean type, the secondary parameter definition is a deep copy//The next parameter is processed if (typeof target = = "Boolean") {deep = target; target = Arguments[1] | |
 {};
 When a deep copy is defined, the parameter moves back one i = 2;
 //If you are not extending an object or function, define the object to be extended as an empty if (typeof target!== "Object" &&!jquery.isfunction (target)) {target = {};
 ///When only one parameter is included, the object being extended is jquery or Jquery.fn if (length = = i) {target = this;
 I.;
 ///To iterate over multiple parameters starting from I for (; i < length; i++) {///To process only the defined value if ((options = arguments[i])!= null) {//Expand Extension Object
 for (name in options) {src = target[name];
 copy = options[name];
 Prevent circular references if (target = = copy) {continue; /////Deep deep copy of///////// (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 value} else if (copy!== undefined) {//Add property or method to target target[name] = copy;
}}//return to target;

 };

Understand the principles of the jquery extension, and believe that you won't have to worry about writing jquery plug-ins anymore.