web-dev-qa-db-fra.com

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

J'ai vu cela dans un plugin:

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

Comment ça marche?

Que fait extend()?

jqueryjquery-plugins
104
Todd Terry

Paramètres multiples

La documentation n'étant pas précise pour expliquer le fonctionnement de extend, 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 fonction console.log 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 ceci nous pouvons voir que jQuery.extend ():

  • Commence avec l'objet fourni par le premier paramètre.
  • Ajoute-y toute propriété du deuxième paramètre. Si la propriété existe déjà dans le premier paramètre, elle est écrasée. L'objet pour le deuxième paramètre est inchangé.
  • Répète ce qui précède avec tout paramètre ultérieur.
  • Retourne le premier paramètre.

Ceci est utile pour combiner des objets option et utilisateur par défaut afin d'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 le remplacement, mais "non défini" ne l’est pas. Vous pourrez peut-être vous en servir.

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 ne transmettez qu’un seul objet à jQuery.extend(), jQuery suppose que l’objet jQuery 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
166
Craig Walker

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

Ex: $.extend(object1, object2);

Maintenant objet1 contient les propriétés de objet2

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

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

Now newObject contient les deux propriétés de object1 et object2.

22
Gopal

À 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 facultatifs de la fonction, une valeur par défaut sera utilisée.

10
JOBG

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 il s'agit d'une copie claire, il suffit de comparer le niveau 1.

    enter image description here

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

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

    enter image description here

  • jQuery.extend (a, b, c) avec a, b, c est un objet ou un tableau. Le flux de dérogation sera b-> a, c -> a (b dérogation a, c priorité a ...) cette fonction retournera a et changera également de valeur.

Exemples avancés:

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

    Dans le cas où vous passez juste un paramètre. jQuery va s'étendre. console.log (jQuery ['number_param']) affichera 1.

    enter image description here

  • jQuery.extend (1, {'number_param': '2'}); Cet exemple n'est pas append 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.

    enter image description here

  • jQuery.extend (a, b, c, d, e, f); La commande sera fusionnée. b -> a, c -> a, d -> a, e -> a, f -> a (b annule a, c annule a ...). Et le 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é.

    enter image description here

4
christian Nguyen

Le but est d'étendre un objet existant. Par exemple Si nous avons un objet template et que nous souhaitons l'étendre en ajoutant d'autres 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'});, il nous donnera un résultat, étendre carObjectTemplate et ajouter

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

le premier paramètre booléen true/false indique si une copie profonde ou superficielle est nécessaire.

2
Sanjay Bharwani

Il existe un exemple parfait dans la documentation jQuery: méthode. Extend ()

1
gillyb

Il fait exactement cela

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

Plus à jQuery.extend ()

0
Gabriele Petrioli