jQuery.extend-Funktion und Verwendungsdetails_jquery

Detaillierte Erläuterung der jquery.extend-Funktion

Extend-Methode von JQuery:

Die Erweiterungsmethode „extend“ von Jquery ist eine häufig verwendete Methode, wenn wir Plug-Ins schreiben. Diese Methode hat einige überladene Prototypen. Hier lernen wir gemeinsam etwas darüber.

1. Der Prototyp der Jquery-Erweiterungsmethode ist:

extend(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:

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数

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

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.

2. Lassen Sie den Zielparameter weg

Der dest-Parameter im oben erwähnten Prototyp der Erweiterungsmethode 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 Erweiterungsmethode 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.

Im Folgenden finden Sie 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.

3. Die Extend-Methode von Jquery hat auch einen überladenen Prototyp:

extend(boolean,dest,src1,src2,src3...)

Der erste boolesche Parameter gibt an, ob Deep Copy durchgeführt werden soll. Die anderen Parameter sind die gleichen wie die zuvor vorgestellten. Schauen wir uns ein Beispiel an:

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

Wir können sehen, dass das Unterobjekt location:{city:"Boston"} in src1 verschachtelt ist und das Unterobjekt location:{state:"MA"},The Der erste Deep-Copy-Parameter ist wahr, dann ist das zusammengeführte Ergebnis:

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

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

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

Arten von jQuery-Plug-ins

Detaillierte Erläuterung der Verwendung der jquery.extend-Funktion

1. Erweitern Sie die statischen jQuery-Methoden.

$.extend({
test:function(){alert('test函数')}
})

2. Mehrere Objekte zusammenführen

 // 以前的 .extend()  
  jQuery.extend(  
   { name: “John”, location: { city: “Boston” } },  
   { last: “Resig”, location: { state: “MA” } }  
  );  
   // 结果:  
   // => { name: “John”, last: “Resig”, location: { state: “MA” } }
  // 新的更深入的 .extend()  
  jQuery.extend( true,  
  { name: “John”, location: { city: “Boston” } },  
   { last: “Resig”, location: { state: “MA” } }  
 );  
 // 结果  
  // => { name: “John”, last: “Resig”,  
 //   location: { city: “Boston”, state: “MA” } }