Explication détaillée du principe d'implémentation de la fonction extend dans jQuery_jquery

extend() est une fonction importante dans jQuery. Elle est utilisée pour étendre des objets. Elle est souvent utilisée dans le développement de plug-ins jQuery. Elle est également utilisée en interne par jQuery pour étendre les méthodes d'attributs, comme mentionné dans le précédent. article de La méthode noConflict est étendue à l'aide de la méthode extend.

Dans le manuel de l'API de jQuery, nous voyons qu'étendre est en fait deux méthodes différentes montées sur jQuery et jQuery.fn, bien qu'à l'intérieur de jQuery jQuery.extend() et jQuery.fn.extend() Elles sont implémentées en utilisant le même code, mais leurs fonctions sont différentes. Jetons un coup d'œil à l'explication officielle de l'API d'étendre :

Copiez le code Le code est le suivant :

jQuery.extend() : Fusionne le contenu de deux objets ou plus dans le premier objet (Fusionne deux objets ou plus dans le premier)
jQuery.fn.extend() : Fusionner le contenu d'un objet sur le prototype jQuery pour fournir de nouvelles méthodes d'instance jQuery (Montez l'objet sur la propriété prototype de jQuery pour étendre une nouvelle méthode d'instance jQuery)

Nous savons que jQuery a des méthodes statiques et des méthodes d'instance, donc la première différence entre jQuery.extend() et jQuery.fn.extend() est que l'une est utilisée pour étendre les méthodes statiques et l'autre est utilisée pour étendre les méthodes d'instance. . L'utilisation est la suivante :

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都会被选择

Notez qu'il existe deux façons d'appeler le plug-in, l'une consiste à l'appeler directement avec $ et l'autre à l'appeler avec $(). De plus, jQuery.extend() reçoit plusieurs objets en tant que paramètres. . S'il n'y a qu'un seul paramètre, alors ceci Les méthodes de propriété de l'objet sont attachées à jQuery. S'il contient plusieurs paramètres, les propriétés et méthodes des objets suivants sont attachées au premier objet. jQuery étend le code source de l'implémentation :

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;
};

C'est un gros tas de code, difficile à comprendre à première vue. En fait, la plupart du code est utilisé pour implémenter des problèmes de fusion d'objets et de copie approfondie lorsqu'il y a plusieurs paramètres dans jQuery.extend(). les fonctions sont supprimées, laissez extend n'avoir pour fonction que d'étendre les méthodes statiques et d'instance, alors le code est le suivant :

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;
}

Commentons et expliquons la méthode extend :

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;
};

Après avoir compris le principe de l'extension jQuery, je pense que vous n'aurez plus jamais à vous soucier d'écrire des plug-ins jQuery à l'avenir.