jQuery拡張が間違った値を上書きする

Question

プラグインでjQuery extendを使用して、デフォルトのパラメータを上書きしています。しかし、私には問題があります。

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

は今、私はdirectionパラメータを上書きします：

は、ここに私のデフォルト設定の配列です。ここで私はextendを使用してマージします配列だ：今

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

、私は2つをマージ：

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

私は方向値が更新されていることがわかります。ただし、のインクリメントは存在しません。私はこの問題を避けるために、最初のレベルでしかパラメータを設定できないことを知っていますが、自分のやり方でコードの明瞭性が増しています。そうする方法はありますか？もしそうでなければ、私はすべてを1つのレベルの深さに変更します。

Answer 1

デフォルトでは、jQuery.extend()は唯一の "浅いを行い、即時的特性を比較しますマージ。 "両方のオブジェクトにはbackgroundがあるため、2番目のオブジェクトからは全体でbackgroundが使用されます。

ただし、第1引数としてpass a trueとjQuery.extend()は、「深いマージ」を実行します。

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

---

第一Objectがtargetあり、両方の修正とreturn「Dされますので、また、あなただけでslider.settings更新することができます。

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

そして、あなたはむしろたい場合にマージするとnew Objectがある場合は、自分で作成する必要があります。

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

Answer 2

jQueryの拡張はオブジェクトを「浅く拡張している」ため、明らかに起こります。したがって、「アニメーション」プロパティ全体が置き換えられます。あなたのブランデーダンディdeepExtendを使用して、この問題を解決するには

：

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

次のようにあなたがそれを使用することができます：

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