$ .extend()没有合并选项

时间:2014-01-22 13:44:33

标签: javascript jquery

我有一个插件,其中包含

等选项
$.growl.default_options = {
    allow_dismiss: true,
    position: {
        from: "top",
        align: "right"
    },
    offset: 20,
    spacing: 10,
    z_index: 1031,
    fade_in: 400,
    delay: 5000,
    template: {
        icon_type: 'class',
        container: '<div class="col-xs-10 col-sm-10 col-md-3 alert">',
        dismiss: '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>',
        title: '<strong>',
        title_divider: '',
        message: ''
    }
});

当我使用以下选项调用程序时

$.growl("I am a Message!", {
    position: {
        align: 'left'
    },
    template: {
        container: '<div class="col-xs-10 col-sm-10 col-md-3 alert">'
    }
});

在插件中,我执行以下操作

options = $.extend({}, $.growl.default_options, options);

而不是options

$.growl.default_options = {
    allow_dismiss: true,
    position: {
        align: "right"
    },
    offset: 20,
    spacing: 10,
    z_index: 1031,
    fade_in: 400,
    delay: 5000,
    template: {
        container: '<div class="col-xs-10 col-sm-10 col-md-3 alert">'
    }
});

为什么template只有一个变量?

1 个答案:

答案 0 :(得分:5)

你想要一个深度(递归)扩展:

options = $.extend(true, {}, $.growl.default_options, options);

来自the documentation

  

默认情况下,$ .extend()执行的合并不是递归的。如果一个   第一个对象的属性本身就是一个对象或数组,它将是   被第二个中具有相同键的属性完全覆盖   或后续的对象。值未合并。这可以在   以下示例通过检查香蕉的值。但是,通过   对于第一个函数参数传递true,对象将是   递归合并。