jQuery.extend-Funktion und Verwendungsdetails

jQuery.extend-Funktion und Verwendungsdetails_jquery

WBOY

Freigeben： 2016-05-16 15:40:30

Original

1322 Leute haben es durchsucht

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...);

Nach dem Login kopieren

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参数

Nach dem Login kopieren

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"})

Nach dem Login kopieren

Dann das zusammengeführte Ergebnis

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Im Folgenden finden Sie einige häufig verwendete Erweiterungsbeispiele:

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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...)

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Dann ist das zusammengeführte Ergebnis:

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

Nach dem Login kopieren

Das Obige sind einige Details, die $.extend() häufig in Projekten verwendet.

Zusätzlich: Wir verwenden auch oft die Methode „extend()“ zum Schreiben von JQuery-Plug-Ins, daher sind die Typen von JQuery-Plug-Ins wie folgt:

Arten von jQuery-Plug-ins

1. Dieses Plug-in kapselt Objektmethoden und wird zum Betreiben von jQuery-Objekten verwendet, die über Selektoren abgerufen werden. Diese Art von Plug-in kann die leistungsstarken Vorteile von jQuery-Selektoren nutzen. Eine beträchtliche Anzahl von jQuery-Methoden werden in dieser Form innerhalb der jQuery-Skriptbibliothek „eingefügt“, wie zum Beispiel die Methode parent() und appendTo(. ) Methode warten.

2. Durch die Kapselung globaler Funktionen können dem jQuery-Namespace unabhängige Funktionen hinzugefügt werden. Beispielsweise sind die häufig verwendete Methode jQuery.ajax() und die Methode jQuery.trim(), die führende und nachfolgende Leerzeichen entfernt, allesamt Plugins, die als globale Funktionen innerhalb von jQuery an den Kernel angehängt sind.

3. Selektor-Plug-in Obwohl der Selektor von jQuery sehr leistungsfähig ist, müssen Sie in einigen Fällen dennoch ein Selektor-Plug-in verwenden, um einige Ihrer bevorzugten Selektoren zu erweitern.

jQuery.fn.extend() wird hauptsächlich zum Erweitern des ersten der drei oben genannten Typen verwendet, und jQuery.extend() wird zum Erweitern der beiden letztgenannten Plug-Ins verwendet. Beide Methoden akzeptieren einen Parameter vom Typ Objekt. Die „Name/Wert-Paare“ des Objektobjekts stellen jeweils „Funktions- oder Methodenname/Funktionskörper“ dar.

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

Ich habe kürzlich jQuery studiert. Zeichnen Sie die Verwendung der jQuery.extend-Erweiterungsfunktion auf.

1. Erweitern Sie die statischen jQuery-Methoden.

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

Nach dem Login kopieren

Verwendung: $.test()

2. Mehrere Objekte zusammenführen

Nehmen Sie als Beispiel jQuery.extend (css1, css2) und haben einige Attribute (die Methode wird sich weiterhin damit befassen, hier sprechen wir über Attribute). Die Erweiterungsfunktion fügt Attribute, die CSS2 hat, aber nicht in CSS2 vorhanden ist, zu CSS1 hinzu. Wenn ein bestimmtes Attribut von CSS2 denselben Namen wie ein bestimmtes Attribut von CSS1 hat, wird das Attribut von CSS2 verwendet, um das Attribut mit demselben Namen zu überschreiben von CSS1. CSS1 ist das endgültige Integrationsobjekt. Oder Sie können auch Folgendes verwenden:

3.深度镶套对象

新的extend()允许你更深度的合并镶套对象。下面的例子是一个很好的证明。

 // 以前的 .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” } }

Nach dem Login kopieren