Wie funktioniert extens () in jQuery?

119

Ich habe das in einem Plugin gesehen:

var options = $.extend(defaults, options); 

Wie funktioniert es?

Was macht extend()das

Todd Terry
quelle
1
Sie können darüber in der jQuery-Dokumentation lesen, aber ich denke, dies ist eine bessere Erklärung dafür.
ifaour
jQuery hat gute Dokumente. api.jquery.com Geben Sie einfach den Methodennamen in das Feld Search jQuery ein.
user113716
42
Ich denke, Todd möchte wissen, wie jQuery.extend funktioniert, NICHT wie man es benutzt. Wird beispielsweise jede Eigenschaft durchlaufen, um ein ganz neues Objekt zu erstellen, oder wird die Vererbung von Prototypen auf beeindruckende Weise verwendet?
b01

Antworten:

178

Mehrere Parameter

Die Dokumentation erklärt nicht genau, wie Extend funktioniert, daher habe ich einen kleinen Test durchgeführt:

var a = {foo: 1, bar: 1};
var b = {foo: 2, baz: 2};
var c = {foo: 3};
var r = jQuery.extend(a,b,c);
console.log("A: Foo=" + a.foo + " Bar=" + a.bar + " Baz=" + a.baz);
console.log("B: Foo=" + b.foo + " Bar=" + b.bar + " Baz=" + b.baz);
console.log("C: Foo=" + c.foo + " Bar=" + c.bar + " Baz=" + c.baz);
console.log("R: Foo=" + r.foo + " Bar=" + r.bar + " Baz=" + r.baz);
console.log("A === R?: " + (a === r));

(Die console.logFunktion soll in Firebug funktionieren. Ersetzen Sie sie durch alert () oder eine andere Ausgabefunktion, wenn Sie möchten.)

Die Ergebnisse sind:

A: Foo=3 Bar=1 Baz=2
B: Foo=2 Bar=undefined Baz=2
C: Foo=3 Bar=undefined Baz=undefined
R: Foo=3 Bar=1 Baz=2
A === R?: true

Daran können wir erkennen, dass jQuery.extend ():

  • Beginnt mit dem Objekt, das vom ersten Parameter bereitgestellt wird.
  • Fügt eine beliebige Eigenschaft im zweiten Parameter hinzu. Wenn die Eigenschaft bereits im ersten Parameter vorhanden ist, wird sie überschrieben. Das Objekt für den zweiten Parameter bleibt unverändert.
  • Wiederholt den obigen Vorgang mit allen nachfolgenden Parametern.
  • Gibt den ersten Parameter zurück.

Dies ist nützlich, um Benutzer- und Standardoptionsobjekte miteinander zu kombinieren, um einen vollständigen Satz von Optionen zu erhalten:

function foo(userOptions) {
  var defaultOptions = {
    foo: 2,
    bar: 2
  };
  var someOtherDefaultOptions = {
    baz: 3
  };

  var allOptions = jQuery.extend(
    defaultOptions,
    someOtherDefaultOptions,
    userOptions
  );
  doSomething(allOptions);
}

foo({foo:1, baz:1});

Beachten Sie, dass "null" ein gültiger Wert für das Überschreiben ist, "undefiniert" jedoch nicht. Möglicherweise können Sie dies nutzen.

var a = {foo: "a", bar: "a"};
var b = {foo: null, bar: undefined};
jQuery.extend(a,b);
console.log("A: Foo=" + a.foo + " Bar=" + a.bar);

Ergebnisse in:

A: Foo=null Bar=a

Einzelner Parameter

Wenn Sie nur ein Objekt an übergeben jQuery.extend(), geht jQuery davon aus, dass das jQueryObjekt selbst der "erste" Parameter ist (dh das zu ändernde) und Ihr Objekt das "zweite" (dh dasjenige, das dem ersten hinzugefügt werden soll). . So:

console.log( "Before: " + jQuery.foo );
jQuery.extend({foo:1});
console.log( "After: " + jQuery.foo );

Ergebnisse in:

Before: undefined
After: 1
Craig Walker
quelle
3
Also, wenn b.baz {zed: 'dark'}eher ein Objekt wäre als zu sagen 2und Sie setzen r.baz.zed = 'light', was wäre der Wert von b.baz.zed? dh werden die Eigenschaften als Referenz kopiert oder zusammengeführt?
ErichBSchulz
4
meine eigene frage zu beantworten b.baz.zedwäre light- dh werte werden durch referenz zusammengeführt. siehe eine Geige
ErichBSchulz
4
herrliche Erklärung, +1
Carrie Kendall
2
Ich hoffe, die offizielle Dokumentation sollte so klar sein. +1
Thariq Nugrohotomo
2
$ .extend (true, object1, object2); und $ .extend (Objekt1, Objekt2); Unterschied ...
Vinay S Jain
27

Es führt den Inhalt eines Objekts mit einem anderen zusammen . Wenn wir zwei Objekte übergeben, werden dem ersten Objekt / ersten Parameter zweite Objekteigenschaften hinzugefügt

Ex: $.extend(object1, object2);

Jetzt enthält Objekt1 Eigenschaften von Objekt2

Wenn wir zwei Objekte zusammenführen möchten, müssen wir im ersten Parameter ein leeres Objekt übergeben

Ex: var newObject = $.extend({}, object1, object2);

Jetzt enthält newObject beide Eigenschaften von Objekt1 und Objekt2 .

Gopal
quelle
12

Aus der jQuery-Dokumentation

Führen Sie den Inhalt von zwei oder mehr Objekten zum ersten Objekt zusammen.

In einem Plugin-Kontext: Wenn der Benutzer die optionalen Parameter für die Funktion nicht festlegt, wird stattdessen ein Standardwert verwendet.

JOBG
quelle
1
Diese Antwort sollte in einem Kommentar sein.
Nolo
Danke JOBG !!
Harsha Vardhan
7

Wie funktioniert extens () in jQuery? [Aufgelöst]

jQuery hat Deep Copy und Light Copy. Der erste Boolesche entscheidet, wahr für tief und falsch für Licht.

Beispielsweise:

  • jQuery.extend (false, {'a': {'a1': 1}}, {'a': {'a2': 2}})

    Das Ergebnis ist: {'a': {'a2': 2}}, da dies eine leichte Kopie ist, vergleiche einfach Level 1.

    Geben Sie hier die Bildbeschreibung ein

  • jQuery.extend (true, {'a': {'a1': 1}}, {'a': {'a2': 2}})

    Das Ergebnis ist: {'a': {'a1': 1, 'a2': 2}} Dies ist eine tiefe Kopie mit vielen Objektebenen (genau wie die Ebene des Arrays).

    Geben Sie hier die Bildbeschreibung ein

  • jQuery.extend (a, b, c) mit a, b, c ist ein Objekt oder Array. Die Flussüberschreibung ist b-> a, c -> a (b Überschreibung a, c Überschreibung a ...). Diese Funktion gibt a zurück und ändert auch den Wert.

Erweiterte Beispiele:

  • jQuery.extend ({'number_param': 1})

    Falls Sie nur einen Parameter übergeben. jQuery wird sich selbst erweitern. console.log (jQuery ['number_param']) gibt 1 aus.

    Geben Sie hier die Bildbeschreibung ein

  • jQuery.extend (1, {'number_param': '2'}); In diesem Beispiel wird jQuery selbst nicht angehängt. Der erste Parameter muss boolesch sein. In diesem Fall wird {'number_param': '2'} zurückgegeben und jQuery wird nicht aktualisiert.

    Geben Sie hier die Bildbeschreibung ein

  • jQuery.extend (a, b, c, d, e, f); Die Zusammenführung der Bestellung erfolgt. b -> a, c -> a, d -> a, e -> a, f -> a (b überschreiben a, c überschreiben a ...). Und die Ergebnisrendite wird a sein.

    mit a = {'p': 1}. jQuery.extend (a, {'p': 2}, {'p': 3}, {'p': 4}, {'p': 5}) gibt a zurück und a = {'p': 6}. Die an diese Funktion übergebenen Zahlenparameter sind unbegrenzt.

    Geben Sie hier die Bildbeschreibung ein

Christian Nguyen
quelle
1
Aus den Docks "Warnung: Die Übergabe von false für das erste Argument wird nicht unterstützt."
Nolo
2

Der Zweck besteht darin, ein vorhandenes Objekt zu erweitern. Wenn wir beispielsweise ein Vorlagenobjekt haben und dieses erweitern möchten, indem wir weitere Eigenschaften hinzufügen oder vorhandene Eigenschaften überschreiben, kann jquery extension nützlich sein.

var carObjectTemplate = {
"make": "honda",
"model":"city",
"mileage":"20",
"variant":"petrol"

};

Wenn wir es jetzt erweitern möchten $.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'}); , erhalten wir die Ausgabe, erweitern carObjectTemplate und fügen hinzu

{"color":"red"} property and overriding "model" property from "city" to "amaze"

Der erste boolesche Parameter true / false gibt an, ob eine tiefe oder flache Kopie benötigt wird

Sanjay Bharwani
quelle
Was bedeutet tiefe oder flache Kopie?
Selva Ganapathi
0

Es macht genau das

Beschreibung : Füge den Inhalt von zwei oder mehr Objekten zum ersten Objekt zusammen.

Mehr unter jQuery.extend ()

Gabriele Petrioli
quelle
1
Einzeilige Antworten und Links zu Dokumenten sind als Antwort nicht sehr nützlich und sollten in einem Kommentar hinterlassen werden.
Nolo