Analyse von Anwendungsbeispielen für Extend in JQuery_jquery

Das Beispiel in diesem Artikel beschreibt die Verwendung von „extend“ in JQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Die Funktion „extend()“ ist eine der Grundfunktionen von jQuery und ihre Funktion besteht darin, vorhandene Objekte zu erweitern. Extend ist eine häufig verwendete Methode beim Schreiben von Plug-Ins. Diese Methode weist einige überladene Prototypen auf. $.extend(prop) wird zum Erweitern des jQuery-Objekts verwendet und kann zum Hinzufügen von Funktionen zum jQuery-Namespace verwendet werden.

1. Quellcode der jQuery.extend-Funktion

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. Der Prototyp der Jquery-Erweiterungsmethode ist:
​
1. verlängern(dest,src1,src2,src3...);

Seine Bedeutung besteht darin, src1, src2, src3 ... mit dem Ziel zusammenzuführen, und der Rückgabewert ist das zusammengeführte Ziel. Es ist ersichtlich, dass diese Methode die Struktur des Ziels nach dem Zusammenführen ändert. Wenn Sie das zusammengeführte Ergebnis erhalten möchten, aber die Struktur von dest nicht ändern möchten, können Sie es wie folgt verwenden:

2. var newSrc=$.extend({},src1,src2,src3...)//Das heißt, verwenden Sie „{}“ als Zielparameter.

Auf diese Weise können src1, src2, src3 ... zusammengeführt werden, und dann wird das zusammengeführte Ergebnis an newSrc zurückgegeben.

Beispiel unten:

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

Dann das zusammengeführte Ergebnis

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

Das heißt, wenn der spätere Parameter denselben Namen wie der vorherige Parameter hat, überschreibt der spätere Parameter den vorherigen Parameterwert.

3. verlängern(boolean,dest,src1,src2,src3...)

Der erste boolesche Parameter gibt an, ob eine Tiefenkopie durchgeführt werden soll, und die anderen Parameter stimmen mit den zuvor eingeführten überein
Zum Beispiel:

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

Wir können sehen, dass der Unterobjektstandort: {city: „Boston“} in src1 verschachtelt ist und der Unterobjektstandort: {state: „MA“} auch in src2 verschachtelt ist wahr ist, dann ist das Ergebnis nach dem Zusammenführen:

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

Das heißt, es werden auch die verschachtelten Unterobjekte in src zusammengeführt. Wenn der erste boolesche Parameter falsch ist, sehen wir uns wie folgt an, was das Ergebnis der Zusammenführung ist:

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

Dann ist das zusammengeführte Ergebnis:

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

2. Wenn die Extend-Methode in Jquery den Zielparameter weglässt

Der dest-Parameter im Prototyp der Extend-Methode oben kann weggelassen werden. Wenn er weggelassen wird, kann die Methode nur einen src-Parameter haben und der src wird mit dem Objekt zusammengeführt, das die Extend-Methode aufruft, wie zum Beispiel:

1.$.extend(src)

Diese Methode besteht darin, src mit dem globalen Objekt von jquery zusammenzuführen, z. B.:

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

besteht darin, die Hallo-Methode mit dem globalen Objekt von jquery zusammenzuführen.

2. $.fn.extend(src)

Diese Methode führt src mit dem Jquery-Instanzobjekt zusammen, wie zum Beispiel:

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

besteht darin, die Hallo-Methode mit dem JQuery-Instanzobjekt zusammenzuführen.

3. Hier sind einige häufig verwendete Erweiterungsbeispiele:

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

Dies dient dazu, einen Netto-Namespace im globalen JQuery-Objekt zu erweitern.

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

Dies dient dazu, die Hello-Methode auf den zuvor erweiterten JQuery-Net-Namespace zu erweitern.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.