Implementation principles of extend functions in jQuery _ jquery

This article mainly introduces the implementation principles of extend functions in jQuery. extend () functions are used for development of jQuery plug-ins. This article mainly analyzes the implementation principles of extend functions, if you need it, you can refer to extend () as an important function in jQuery. it is used to implement object extension and is often used for jQuery plug-in development, jQuery also uses it internally to extend the attribute method. for example, the noConflict method mentioned in the previous article is extended using the extend method.

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:

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:

JQuery. extend ({sayhello: function () {console. log ("Hello, This is jQuery Library") ;}}) $. sayhello (); // Hello, This is jQuery LibraryjQuery. 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 checkboxes will be 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:

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 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 is 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 && ( 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;};

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:

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]; // prevents loop call if (target = copy) continue; // prevent attaching an undefined value if (typeof copy = 'undefined') continue; // assign a value to target [name] = copy;} return target ;}

The following describes the extend method:

JQuery. extend = jQuery. fn. extend = function () {// define default parameters and variables // objects are divided into extended objects and extended objects // options represents the methods in the extended objects // name represents the method name of the extended object // I start value of the extended object parameter // deep is the shortest var options by default, name, src, copy, copyIsArray, clone, target = arguments [0] | |{}, I = 1, length = arguments. length, deep = false; // when the first parameter is of the Boolean type, specify whether the parameter is a deep Copy. // process the following parameters. if (typeof target = "boolean") {deep = target; target = arguments [1] | | {};// When defining whether to perform deep copy, the parameter moves one I = 2;} // if it is not an object or function to be extended, define the object to be extended as null if (typeof target! = "Object "&&! JQuery. isFunction (target) {target ={};}// when only one parameter is contained, the extended object is jQuery or jQuery. fn if (length = I) {target = this; -- I ;}// traverse multiple parameters starting with I for (; I <length; I ++) {// only process the defined value if (options = arguments [I])! = Null) {// expand the extension object for (name in options) {src = target [name]; copy = options [name]; // prevent loop reference 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); // undefined value} else if (copy! = Undefined) {// add the attribute or method target [name] = copy ;}}// return target;} to the target ;};

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