Eu vi isso em um plugin:
var options = $.extend(defaults, options);
Como funciona?
O que extend()
fazer?
Eu vi isso em um plugin:
var options = $.extend(defaults, options);
Como funciona?
O que extend()
fazer?
Respostas:
A documentação não é precisa para explicar como a extensão funciona, então fiz um pequeno teste:
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));
(A console.log
função deve funcionar no Firebug; substitua-a por alert () ou alguma outra função de saída, se desejar).
Os resultados são:
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
Por isso, podemos ver que jQuery.extend ():
Isso é útil para combinar objetos de opções padrão e de usuário para obter um conjunto completo de opções:
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});
Observe que "nulo" é um valor válido para sobrescrever, mas "indefinido" não é. Você pode ser capaz de fazer uso disso.
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);
Resulta em:
A: Foo=null Bar=a
Se você passar apenas um objeto para jQuery.extend()
, o jQuery assume que o própriojQuery
objeto é o "primeiro" parâmetro (ou seja: aquele a ser modificado), e seu objeto é o "segundo" (ou seja: aquele a ser adicionado ao primeiro) . Assim:
console.log( "Before: " + jQuery.foo );
jQuery.extend({foo:1});
console.log( "After: " + jQuery.foo );
Resulta em:
Before: undefined
After: 1
{zed: 'dark'}
vez de 2
e você definir r.baz.zed = 'light'
, qual seria o valor de b.baz.zed
? ou seja, as propriedades são copiadas ou mescladas por referência?
b.baz.zed
seria light
- ou seja, os valores são fundidos por referência. veja um violino
Ele mescla o conteúdo de um objeto com outro . Se passarmos dois objetos, as propriedades do segundo objeto são adicionadas ao primeiro objeto / primeiro parâmetro
Ex: $.extend(object1, object2);
Agora object1 contém propriedades de object2
Se quisermos fundir dois objetos , precisamos passar o objeto vazio no primeiro parâmetro
Ex: var newObject = $.extend({}, object1, object2);
Agora newObject contém as propriedades de object1 e object2 .
Da documentação jQuery
Mescle o conteúdo de dois ou mais objetos no primeiro objeto.
Em um contexto de plug-in: Se o usuário não definir os parâmetros opcionais para a função, um valor padrão será usado.
Como extend () funciona no jQuery? [Resolvido]
jQuery tem deep copy e light copy. O primeiro booleano decide isso, verdadeiro para profundo e falso para luz.
Por exemplo:
jQuery.extend (false, {'a': {'a1': 1}}, {'a': {'a2': 2}})
o resultado será: {'a': {'a2': 2}} porque esta é uma cópia leve, basta comparar o nível 1.
jQuery.extend (true, {'a': {'a1': 1}}, {'a': {'a2': 2}})
o resultado será: {'a': {'a1': 1, 'a2': 2}} Esta é uma cópia profunda com muitos níveis de objeto (assim como o nível de matriz)
jQuery.extend (a, b, c) com a, b, c é um objeto ou array. A sobrescrita de fluxo será b-> a, c -> a (sobrescrever b a, sobrescrever c a ...) esta função retornará ae também alterará o valor.
Exemplos avançados:
jQuery.extend ({'number_param': 1})
Caso você passe apenas um parâmetro. jQuery se estenderá. console.log (jQuery ['number_param']) produzirá 1.
jQuery.extend (1, {'number_param': '2'}); Este exemplo não é o próprio jQuery. O primeiro parâmetro deve ser booleano. Neste caso, ele retornará {'number_param': '2'} e jQuery não será atualizado.
jQuery.extend (a, b, c, d, e, f); A fusão do pedido será. b -> a, c -> a, d -> a, e -> a, f -> a (b anula a, c anula a ...). E o retorno do resultado será a.
com a = {'p': 1}. jQuery.extend (a, {'p': 2}, {'p': 3}, {'p': 4}, {'p': 5}) retornará a, e a = {'p': 6}. Os parâmetros numéricos passados para esta função são ilimitados.
O objetivo é estender um objeto existente. Por exemplo, se temos um objeto de modelo e queremos estendê-lo adicionando mais propriedades ou sobrescrevendo propriedades existentes, jquery extend pode ser útil.
var carObjectTemplate = {
"make": "honda",
"model":"city",
"mileage":"20",
"variant":"petrol"
};
agora, se quisermos estendê-lo,
$.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'});
ele nos dará saída, estendendo carObjectTemplate e adicionando
{"color":"red"} property and overriding "model" property from "city" to "amaze"
o primeiro parâmetro booleano true / false é para indicar se precisamos de uma cópia profunda ou superficial
Faz exatamente isso
Descrição : mescle o conteúdo de dois ou mais objetos no primeiro objeto.
Mais em jQuery.extend ()