Comment extend () fonctionne-t-il dans jQuery?

119

J'ai vu cela dans un plugin:

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

Comment ça marche?

Que fait extend()-on?

Todd Terry
la source
1
Vous pouvez lire à ce sujet sur la documentation jQuery , mais je suppose que c'est une meilleure explication.
ifaour
jQuery a de bons documents. api.jquery.com Tapez simplement le nom de la méthode dans le champ Search jQuery .
user113716
42
Je pense que Todd veut savoir comment fonctionne jQuery.extend, PAS comment l'utiliser. Par exemple, fait-il une boucle sur chaque propriété pour créer un tout nouvel objet, ou utilise-t-il l'héritage de prototype d'une manière impressionnante.
b01

Réponses:

178

Paramètres multiples

La documentation n'est pas précise pour expliquer le fonctionnement de l'extension, j'ai donc effectué un petit test:

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

(La console.logfonction est destinée à fonctionner dans Firebug; remplacez-la par alert () ou une autre fonction de sortie si vous le souhaitez).

Les résultats sont:

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

Par cela, nous pouvons voir que jQuery.extend ():

  • Commence par l'objet fourni par le premier paramètre.
  • Ajoute à lui n'importe quelle propriété dans le deuxième paramètre. Si la propriété existe déjà dans le premier paramètre, elle est écrasée. L'objet du deuxième paramètre reste inchangé.
  • Répète ce qui précède avec tout paramètre suivant.
  • Renvoie le premier paramètre.

Ceci est utile pour combiner les objets option utilisateur et par défaut ensemble pour obtenir un ensemble complet d'options:

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

Notez que "null" est une valeur valide pour l'écrasement, mais que "non défini" ne l'est pas. Vous pourrez peut-être en profiter.

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

Résulte en:

A: Foo=null Bar=a

Paramètre unique

Si vous passez un seul objet à jQuery.extend(), alors jQuery suppose que l' jQueryobjet lui - même est le "premier" paramètre (c'est-à-dire: celui à modifier), et votre objet est le "second" (c'est-à-dire: celui à ajouter au premier) . Alors:

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

Résulte en:

Before: undefined
After: 1
Craig Walker
la source
3
alors si b.baz était un objet dire {zed: 'dark'}plutôt que 2et que vous définissez r.baz.zed = 'light', quelle serait la valeur de b.baz.zedêtre? c'est-à-dire que les propriétés sont copiées ou fusionnées par référence?
ErichBSchulz
4
pour répondre à ma propre question, b.baz.zedserait light- c'est-à-dire que les valeurs sont fusionnées par référence. voir un violon
ErichBSchulz
4
splendide explication, +1
Carrie Kendall
2
J'espère que la documentation officielle devrait être aussi claire que cela. +1
Thariq Nugrohotomo
2
$ .extend (vrai, objet1, objet2); et $ .extend (objet1, objet2); différence ...
Vinay S Jain
27

Il fusionne le contenu d'un objet dans un autre . Si nous passons deux objets, les propriétés du second objet sont ajoutées au premier objet / premier paramètre

Ex: $.extend(object1, object2);

Maintenant, object1 contient les propriétés de object2

Si nous voulons fusionner deux objets , nous devons passer un objet vide dans le premier paramètre

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

Maintenant, newObject contient à la fois les propriétés d'objet1 et d'objet2 .

Gopal
la source
12

À partir de la documentation jQuery

Fusionnez le contenu de deux objets ou plus dans le premier objet.

Dans un contexte de plugin: Si l'utilisateur ne définit pas les paramètres optionnels pour la fonction, alors une valeur par défaut sera utilisée à la place.

JOBG
la source
1
Cette réponse devrait être dans un commentaire.
Nolo
Merci JOBG !!
Harsha Vardhan
7

Comment extend () fonctionne-t-il dans jQuery? [Résolu]

jQuery a une copie profonde et une copie légère. Le premier booléen le décide, vrai pour profond et faux pour lumière.

Par exemple:

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

    le résultat sera: {'a': {'a2': 2}} car c'est une copie légère, comparez simplement le niveau 1.

    entrez la description de l'image ici

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

    le résultat sera: {'a': {'a1': 1, 'a2': 2}} Ceci est une copie profonde avec plusieurs niveaux d'objet (tout comme le niveau de tableau)

    entrez la description de l'image ici

  • jQuery.extend (a, b, c) avec a, b, c est un objet ou un tableau. Le dépassement de flux sera b-> a, c -> a (b overrite a, c override a ...) cette fonction renverra a et une valeur de changement également.

Exemples avancés:

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

    Au cas où vous ne passeriez qu'un seul paramètre. jQuery va s'étendre. console.log (jQuery ['number_param']) affichera 1.

    entrez la description de l'image ici

  • jQuery.extend (1, {'number_param': '2'}); Cet exemple n'ajoute pas jQuery lui-même. Le premier paramètre doit être booléen. Dans ce cas, il retournera {'number_param': '2'} et jQuery ne sera pas mis à jour.

    entrez la description de l'image ici

  • jQuery.extend (a, b, c, d, e, f); La fusion des commandes sera. b -> a, c -> a, d -> a, e -> a, f -> a (b remplacer a, c remplacer a ...). Et le retour de résultat sera un.

    avec a = {'p': 1}. jQuery.extend (a, {'p': 2}, {'p': 3}, {'p': 4}, {'p': 5}) renverra a, et a = {'p': 6}. Le nombre de paramètres transmis à cette fonction est illimité.

    entrez la description de l'image ici

christian Nguyen
la source
1
Depuis les docks "Attention: passer false pour le premier argument n'est pas pris en charge."
Nolo
2

Le but est d'étendre un objet existant. Par exemple, si nous avons un objet modèle et que nous voulons l'étendre en ajoutant plus de propriétés ou en remplaçant les propriétés existantes, jquery extend peut être utile.

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

};

maintenant si nous voulons l'étendre, $.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'}); cela nous donnera une sortie, étendant carObjectTemplate et ajoutant

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

le premier paramètre booléen true / false est d'indiquer si nous avons besoin d'une copie profonde ou superficielle

Sanjay Bharwani
la source
Que signifie copie profonde ou superficielle?
Selva Ganapathi
0

Il fait exactement cela

Description : fusionne le contenu de deux objets ou plus dans le premier objet.

Plus sur jQuery.extend ()

Gabriele Petrioli
la source
1
Les réponses d'une ligne et les liens vers des documents ne sont pas d'une grande utilité comme réponse et doivent être laissés dans un commentaire.
Nolo