6

我extend在插件中使用 jQuery 来覆盖默认参数。但是，我有一个问题。

这是我的默认设置数组：

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

现在，我想覆盖direction参数。这是我将合并使用的数组extend：

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

现在，我将两者合并：

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

我可以看到方向值已经更新。但是，增量不再存在。我知道为了避免这个问题，我只能在第一级设置参数，但我看到更多的代码清晰。有没有办法这样做？如果没有，我会将所有内容更改为只有一层深度。

4

2 回答 2

12

默认情况下，jQuery.extend()仅比较直接属性，执行“浅合并”。由于两个对象都有，它只是从第二个对象中background获取整个对象。background

但是，将 atrue作为第一个参数传递，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);
于 2013-07-28T23:14:08.027 回答
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);
于 2013-07-28T23:09:59.067 回答