jQuery estende sovrascrive valori errati

Question

Sto utilizzando jQuery extend in un plug-in per sovrascrivere i parametri predefiniti. Tuttavia, ho un problema.

Ecco il mio allineamento impostazioni predefinite:

slider.settings = { 
      background: { 
       animation : { 
        direction : 'horizontal', 
        increment : 15 //can be any number 
       } 
      } 
     } 

ora, voglio sovrascrivere il parametro direction. Ecco la matrice che si fonderà con l'utilizzo extend:

settingsToOverwrite = { 
     background:{ 
      animation:{ 
       direction:'vertical' 
      } 
     } 
    } 

Ora, unire i due:

slider.settings = $.extend(slider.settings, options) 

posso vedere che il valore didirezione è stato aggiornato. Tuttavia, l'incremento non è più lì. So che per evitare questo problema, potrei solo impostare i parametri al primo livello ma vedo più chiarezza del codice nel mio modo di procedere. C'è un modo per farlo ? Altrimenti, cambierò tutto per essere solo un livello profondo.

Answer 1

Per impostazione predefinita, jQuery.extend() confronta solo le proprietà immediati, l'esecuzione di un "superficiale unisci. " Poiché entrambi gli oggetti hanno background, prende semplicemente l'interodal secondo oggetto.

Tuttavia, pass a true come 1o argomento e jQuery.extend() eseguirà una fusione "deep".

slider.settings = $.extend(true, slider.settings, options); 

---

Inoltre, dal 1 ° Object è il target e sarà sia modificato e return 'd, è possibile aggiornare slider.settings con appena:

$.extend(true, slider.settings, options); 

E, se si preferisce avere un new Object dall'unione, devi crearlo da te:

slider.settings = $.extend(true, {}, slider.settings, options); 

Answer 2

Hai ragione, questo ovviamente sta accadendo perché l'estensione di jQuery è "estendere superficialmente" l'oggetto .. sostituendo così l'intera proprietà di "animazione".

Per risolvere questo problema usare il tuo grappa deepExtend Dandy:

Object.deepExtend = function(destination, source) { 
    for (var property in source) { // loop through the objects properties 
    if (typeof source[property] === "object") { // if this is an object 
     destination[property] = destination[property] || {}; 
     Object.deepExtend(destination[property], source[property]); // recursively deep extend 
    } else { 
     destination[property] = source[property]; // otherwise just copy 
    } 
    } 
    return destination; 
}; 

si può utilizzare come segue:

slider.settings = Object.deepExtend(slider.settings, options);