Perché passare un oggetto vuoto al metodo di estensione di jQuery?

Question

jQuery ha un ottimo metodo extend, che unisce 2 oggetti in uno.

Sulla jQuery Plugins authoring page che mostrano un esempio come segue:

var settings = $.extend({ 
    'location'   : 'top', 
    'background-color' : 'blue' 
}, options); 

Tuttavia, ho visto molti plugin passano un oggetto vuoto come primo parametro, in questo modo:

var settings = $.extend({}, { 
    'location'   : 'top', 
    'background-color' : 'blue' 
}, options); 

quanto come posso dire, questi due fanno esattamente la stessa cosa. L'unica differenza sarebbe se il defaults sarebbe stato memorizzato nella propria variabile:

var defaults = { 
    'location'   : 'top', 
    'background-color' : 'blue' 
}, 
settings = $.extend({}, defaults, options); 

In questo modo, è sempre possibile accedere ai valori di default senza che vengano sovrascritti dal options.

---

Ecco la domanda: Perché così tanti autori di plugin scelgono di passare un oggetto vuoto per extend, anche quando non memorizzare le impostazioni predefinite in una variabile?

Mi manca qualcosa?

Answer 1

motivi possibili (per il secondo esempio) ...

• ignoranza Inherited ...(lo vide fatto in questo modo, e copiato la pratica)

• ignoranza intrinseca ... (lo vide fatto correttamente, come nel blocco di codice scorso, ma sostituito l'oggetto in cache con un oggetto on-the-fly e non sapeva che l'oggetto vuoto dovrebbe essere rimosso)

• Riscaldamento globale.

• La mancanza di attenzione per i dettagli ... (simile al punto 2, sa che non è necessario, ma mai veramente preso il tempo di esaminare il codice)

• raffreddamento globale.

• codifica eccessivamente difensivo ... (paura che i default possono un giorno essere rielaborato in un oggetto riutilizzabile, e teme che l'oggetto vuoto non verrà inserito in quel momento)

• sviluppatori jQuery fai sempre quello che le voci dicono loro ;-)

Nel complesso, hai ragione. L'oggetto centrale viene creato, copiato su un oggetto vuoto, quindi scartato. È una pratica inutile e dispendiosa.

Answer 2

Estendi è una funzione molto utile per copiare oggetti.

Ad esempio si consideri questo:

foo = {'foo':'a'} 
f = foo 
f.foo = 'hello' 
console.log(f) 
    Object {foo="hello"} 
console.log(foo) 
    Object {foo="hello"} 

f = $.extend({},foo) 
f.foo = 'hello world' 
console.log(f) 
    Object {foo="hello world"} 
console.log(foo) 
    Object {foo="hello"} 

Quindi, come potete vedere $ .extend in realtà copiato l'oggetto.

EDIT

Il motivo per cui il primo parametro deve essere un oggetto vuoto è causa di come funziona extend. Ecco come jQuery definisce extend:

jQuery.extend(target [, object1] [, objectN]) 
    target An object that will receive the new properties 
      if additional objects are passed in or that will 
      extend the jQuery namespace if it is the sole argument. 
    object1 An object containing additional properties to merge in. 
    objectN Additional objects containing properties to merge in. 

E inoltre questa frase è importante:

Tenete a mente che l'oggetto di destinazione (primo argomento) sarà modificato, e sarà anche tornato da $ .estendere().

Quindi passando lo {} come primo parametro, tale oggetto vuoto viene esteso e quindi restituito.

Torna al tuo esempio di settings = $.extend({}, defaults, options);. Se lo cambi in settings = $.extend(defaults, options);, le impostazioni saranno identiche, tuttavia qui verranno modificate anche le impostazioni predefinite. Ecco perché è necessario il primo argomento per essere {}.

Answer 3

Un altro modo di mettere quello che miki ha detto:

var defaults = { 
    one: 'foo', 
    two: 'bar' 
}; 

var options = { 
    two: 'apples', 
    three: 'bananas' 
}; 

// The safe way to extend 
var settings = $.extend({}, defaults, options); 

console.log(settings); // {one: 'foo', two: 'apples', three: 'bananas'} 
console.log(defaults); // {one: 'foo', two: 'bar'} 
console.log(options); // {two: 'apples', three: 'bananas'} 
console.log(settings === defaults); // false 

// Careless way to extend 
var settings = $.extend(defaults, options); 

console.log(settings); // {one: 'foo', two: 'apples', three: 'bananas'} 
console.log(defaults); // {one: 'foo', two: 'apples', three: 'bananas'} 
console.log(options); // {two: 'apples', three: 'bananas'} 
console.log(settings === defaults); // true