Question

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

这是我的默认设置数组：

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)

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

Answer 1

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

但是，pass a true作为第一个参数，jQuery.extend()将执行“深度合并。”

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

此外，由于第一个Object是target并且将同时修改return，因此您只需更新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);

jQuery扩展会覆盖错误的值

2 个答案: