J'ai vu cela dans un plugin:
var options = $.extend(defaults, options);
Comment ça marche?
Que fait extend()
-on?
J'ai vu cela dans un plugin:
var options = $.extend(defaults, options);
Comment ça marche?
Que fait extend()
-on?
Réponses:
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.log
fonction 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 ():
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
Si vous passez un seul objet à jQuery.extend()
, alors jQuery suppose que l' jQuery
objet 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
{zed: 'dark'}
plutôt que 2
et 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?
b.baz.zed
serait light
- c'est-à-dire que les valeurs sont fusionnées par référence. voir un violon
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 .
À 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.
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.
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)
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.
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.
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é.
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
Il fait exactement cela
Description : fusionne le contenu de deux objets ou plus dans le premier objet.
Plus sur jQuery.extend ()