$ .extend（）不合並選項

Question

我有一個選項，如

$.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只有一個變量？

Answer 1

你想要一個深（遞歸）延長：

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

從the documentation：

由$ .extend（）進行合併是不是默認遞歸;如果第一個對象的 屬性本身就是一個對象或數組，則它將被第二個 或後續對象中的具有相同鍵的屬性完全覆蓋 。這些值不合並。通過檢查香蕉的價值可以在下面的例子中看到 。但是，通過 傳遞true作爲第一個函數參數，對象將會以 遞歸合併。