jQuery erweitern überschreibt falsche Werte

Question

Ich benutze jQuery extend in einem Plugin, um die Standardparameter zu überschreiben. Ich habe jedoch ein Problem.

Hier ist meine Standardeinstellungen Array:

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

Nun möchte ich den direction Parameter zu überschreiben. Hier ist das Array, das ich bei der Verwendung von extend fusionieren:

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

Nun verschmelzen ich die beiden:

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

Ich kann sehen, dass die Richtung Wert aktualisiert wurde. Inkrement ist jedoch nicht mehr da. Ich weiß, um dieses Problem zu vermeiden, konnte ich nur Parameter auf der ersten Ebene setzen, aber ich sehe mehr Code-Klarheit, wenn ich meinen Weg gehe. Gibt es einen Weg dazu? Wenn nicht, werde ich alles so verändern, dass es nur eine Ebene tief ist.

Answer 1

standardmäßig jQuery.extend() vergleicht nur die unmittelbaren Eigenschaften, eine "flache Durchführung fusionieren. " Da beide Objekte background haben, nimmt es einfach die gesamte background vom 2. Objekt.

Aber pass a true als erstes Argument und jQuery.extend() einen "Deep-Merge." Perform

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

---

Da auch der erste Object die target ist und beide modifiziert werden und return ‚d, können Sie slider.settings mit nur aktualisieren:

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

Und wenn Sie lieber Haben Sie eine new Object aus der Zusammenführung, müssen Sie es selbst erstellen:

Answer 2

Sie haben Recht, dies ist offensichtlich passiert, weil jQuery extend ist "flach erweitern" das Objekt .. so ersetzt die gesamte "Animation" -Eigenschaft.

Um dies zu beheben, Ihre Brandy Dandy deepExtend verwenden:

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; 
}; 

können Sie es wie folgt:

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