Detailed explanation of the implementation principle of extend function in jQuery

Detailed explanation of the implementation principle of extend function in jQuery_jquery

WBOY

Release： 2016-05-16 16:16:05

Original

1358 people have browsed it

extend() is an important function in jQuery. It is used to extend objects. It is often used in the development of jQuery plug-ins. It is also used internally by jQuery to extend attribute methods, as mentioned in the previous article of The noConflict method is extended using the extend method.

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

Copy the code 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 one) 

jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods. (Mount the object to jQuery’s prototype property to extend a new jQuery instance method)

We know that jQuery has static methods and instance methods, so the first difference between jQuery.extend() and jQuery.fn.extend() is that one is used to extend static methods and the other is used to extend instance methods. 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(); //所有的checkbox都会被选择

Copy after login

Note that there are two ways to call the plug-in, one is to call it directly with $, and the other is to call it with $(). In addition, jQuery.extend() receives multiple objects as parameters. If there is only one parameter, then this The property methods of the object are attached to jQuery. If it contains multiple parameters, the properties and methods of the subsequent objects are attached 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) &#63; src : [];
  } else {
  clone = src && jQuery.isPlainObject(src) &#63; 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;
};

Copy after login

It’s a big pile of code, which is difficult to understand at first glance. In fact, most of the code is used to implement object merging and deep copy problems when there are multiple parameters in jQuery.extend(). If these functions are removed, let extend only has the function of extending static and instance methods, then the code is as follows:

jQuery.extend = jQuery.fn.extend = function(obj){
 //obj是传递过来扩展到this上的对象
 var target=this;
 for (var name in obj){
 //name为对象属性
 //copy为属性值
 copy=obj[name];
 //防止循环调用
 if(target === copy) continue;
 //防止附加未定义值
 if(typeof copy === 'undefined') continue;
 //赋值
 target[name]=copy;
 }
 return target;
}

Copy after login

Let’s comment and explain the extend method:

jQuery.extend = jQuery.fn.extend = function() {
 // 定义默认参数和变量
 // 对象分为扩展对象和被扩展的对象 
 //options 代表扩展的对象中的方法
 //name 代表扩展对象的方法名
 //i 为扩展对象参数起始值
 //deep 默认为浅复制
 var options, name, src, copy, copyIsArray, clone,
 target = arguments[0] || {},
 i = 1,
 length = arguments.length,
 deep = false;
 //当第一个参数为布尔类型是，次参数定义是否为深拷贝
 //对接下来的参数进行处理
 if ( typeof target === "boolean" ) {
 deep = target;
 target = arguments[1] || {};
 // 当定义是否深拷贝时，参数往后移动一位
 i = 2;
 }
 // 如果要扩展的不是对象或者函数，则定义要扩展的对象为空
 if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
 target = {};
 }
 // 当只含有一个参数时，被扩展的对象是jQuery或jQuery.fn
 if ( length === i ) {
 target = this;
 --i;
 }
 //对从i开始的多个参数进行遍历
 for ( ; i < length; i++ ) {
 // 只处理有定义的值
 if ( (options = arguments[ i ]) != null ) {
 // 展开扩展对象
 for ( name in options ) {
 src = target[ name ];
 copy = options[ name ];
 // 防止循环引用
 if ( target === copy ) {
  continue;
 }
 // 递归处理深拷贝
 if ( deep && copy &&; ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
  if ( copyIsArray ) {
  copyIsArray = false;
  clone = src && jQuery.isArray(src) &#63; src : [];
  } else {
  clone = src && jQuery.isPlainObject(src) &#63; src : {};
  }
  target[ name ] = jQuery.extend( deep, clone, copy );
 // 不处理未定义值
 } else if ( copy !== undefined ) {
  //给target增加属性或方法
  target[ name ] = copy;
 }
 }
 }
 }
 //返回
 return target;
};

Copy after login

After understanding the principle of jQuery extension, I believe you will never have to worry about writing jQuery plug-ins in the future.