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

Question

J'ai vu cela dans un plugin:

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

Comment ça marche?

Que font extend() ?

Answer 1

Plusieurs Paramètres

La documentation n'est pas précis dans l'explication de la façon de prolonger fonctionne, alors j'ai couru 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));

( console.log Fonction est conçue pour fonctionner dans Firebug; le remplacer avec alert() ou une autre fonction de sortie si vous le souhaitez).

Les résultats sont les suivants:

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 avec l'objet fourni par le premier paramètre.
• S'ajoute à toute propriété dans le deuxième paramètre. Si la propriété existe déjà dans le premier paramètre, il est écrasé. L'objet du deuxième paramètre est inchangé.
• Reprend le dessus avec n'importe quel paramètre.
• Retourne le premier paramètre.

Ceci est utile pour la combinaison de l'utilisateur et de l'option par défaut-objets 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 la valeur "null" est une valeur valide pour l'écrasement, mais "undefined" n'est-ce pas. Vous pourriez être en mesure de faire usage de cette.

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ésultats:

A: Foo=null Bar=a

Seul Paramètre

Si vous passer juste un objet à l' jQuery.extend(), jQuery suppose que l' jQuery objet lui-même est le "premier" paramètre (c'est à dire: celui d'être modifiées), et que votre objet est la "seconde" (c'est à dire: l'un à ajouter à la première). Donc:

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

Résultats:

Before: undefined
After: 1

Answer 2

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

Answer 3

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

Answer 4

Vous pouvez lire à ce sujet dans la documentation de jQuery mais je suppose que ceci en est une meilleure explication.

Answer 5

Il fait exactement cela

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

Plus à jQuery.extend ()