Analyse des exemples d'utilisation de extend dans JQuery_jquery

L'exemple de cet article décrit l'utilisation de extend dans JQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

La fonction extend() est l'une des fonctions de base de jQuery, et sa fonction est d'étendre des objets existants. Extend est une méthode couramment utilisée lorsque nous écrivons des plug-ins. Cette méthode a des prototypes surchargés. $.extend(prop) est utilisé pour étendre l'objet jQuery et peut être utilisé pour ajouter des fonctions à l'espace de noms jQuery.

1. Code source de la fonction jQuery.extend

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
  //如果为深度复制,则目标对象和原对象游标值i，以及深度值都进行更新
  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
  //当参数值长度为1的情况下，目标对象就为jQuery自身
  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
         //深度复制只有属性深度多于俩层的对象关系的结构的，如{a:{s:21,age:11}}或{a:['s'=>21,'age'=>11]}
        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 ) {//非深度CP直接覆盖目标属性
          target[ name ] = copy;
        }
      }
    }
  }

  // Return the modified object
  return target;
};

2. Le prototype de la méthode d'extension de Jquery est :
​
1. extend(dest,src1,src2,src3...);

Sa signification est de fusionner src1, src2, src3... dans dest, et la valeur de retour est la destination fusionnée. On peut voir que cette méthode modifie la structure de dest après la fusion. Si vous souhaitez obtenir le résultat fusionné mais ne souhaitez pas modifier la structure de dest, vous pouvez l'utiliser comme suit :

2. var newSrc=$.extend({},src1,src2,src3...)//C'est-à-dire, utilisez "{}" comme paramètre dest.

De cette façon, src1, src2, src3... peuvent être fusionnés, puis le résultat fusionné sera renvoyé à newSrc.

Exemple ci-dessous :

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

Puis le résultat fusionné

result={name:"Jerry",age:21,sex:"Boy"}

C'est-à-dire que si le dernier paramètre a le même nom que le paramètre précédent, alors le dernier paramètre écrasera la valeur du paramètre précédent.

3. extend(booléen,dest,src1,src2,src3...)

Le premier paramètre booléen représente s'il faut effectuer une copie complète, et les autres paramètres sont cohérents avec ceux introduits précédemment
Par exemple :

var result=$.extend( true, {}, 
{ name: "John", location: {city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } );

Nous pouvons voir que l'emplacement du sous-objet : {city : "Boston"} est imbriqué dans src1, et l'emplacement du sous-objet : {state : "MA"} est également imbriqué dans src2. est vrai, alors le résultat après fusion est :

result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}}

C'est-à-dire qu'il fusionnera également les sous-objets imbriqués dans src, et si le premier paramètre booléen est faux, voyons quel est le résultat de la fusion, comme suit :

var result=$.extend( false, {}, 
{ name: "John", location:{city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } );

Ensuite, le résultat fusionné est :

result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

2. Lorsque la méthode extend dans Jquery omet le paramètre dest

Le paramètre dest dans le prototype de la méthode extend ci-dessus peut être omis, la méthode ne peut avoir qu'un seul paramètre src, et le src est fusionné dans l'objet qui appelle la méthode extend, tel que :

1.$.extend(src)

Cette méthode consiste à fusionner src dans l'objet global de jquery, tel que :

$.extend({
 hello:function(){alert('hello');}
});

consiste à fusionner la méthode hello dans l'objet global de jquery.

2. $.fn.extend(src)

Cette méthode fusionne src dans l'objet instance jquery, tel que :

$.fn.extend({
 hello:function(){alert('hello');}
});

consiste à fusionner la méthode hello dans l'objet instance jquery.

3. Voici quelques exemples d'extensions couramment utilisées :

$.extend({net:{}});

Il s'agit d'étendre un espace de noms net dans l'objet global jquery.

$.extend($.net,{
  hello:function(){alert('hello');}
})

Il s'agit d'étendre la méthode hello dans l'espace de noms net Jquery précédemment étendu.

J'espère que cet article sera utile à la programmation jQuery de chacun.