将配置对象传递给jQuery插件

Question

I often use the below design pattern to create jQuery plugins. I specify default values in the plugin, and allow the user to change them when they initialize the plugin. Normally, my default object just contains string properties, not objects, but this time, I wish to make one of the default properties an object ( default_obj_1 in my example). At the bottom of the script, you see me attempt to change one of the properties of by passing the plugin {default_value_2: 666, default_obj_1.default_prop_3: 434} , but it invalid JavaScript and errors out. I also tried passing it {default_value_2: 666, default_obj_1: {default_prop_3: 434} but it appears to overwrite the other values which should remain.

How do I update just one of the default values in the jQuery plugin?

(function($){
    var defaults = {
        default_value_1 : 123,
        default_value_2 : 321,
        default_value_3 : 111,
        default_obj_1   : {
            default_prop_1  : 444,
            default_prop_2  : 534,
            default_prop_3  : 231
        }
    };

    var methods = {
        init : function (options) {
            var settings = $.extend({}, defaults, options);
            return this.each(function () {
                //Do something using settings
            });
        }
    };

    $.fn.myPlugin = function(method) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.myPlugin' );
        }    
    };

    }(jQuery));

$(function(){

    var myPlugin=$('#elem').myPlugin({default_value_2:666,default_obj_1.default_prop_3:434});

    var myPlugin=$('#elem').myPlugin({default_value_2:666,default_obj_1:{default_prop_3:434} });

});

Answer 1

Change:

var settings = $.extend({}, defaults, options);

to

var settings = $.extend(true, {}, defaults, options); // notice the first param TRUE

to do a deep (recursive) merge.