将配置对象传递给jQuery插件

时间:2014-02-13 14:52:35

标签: javascript jquery

我经常使用以下设计模式来创建jQuery插件。我在插件中指定默认值,并允许用户在初始化插件时更改它们。通常,我的default对象只包含字符串属性,而不是对象,但这一次,我希望将一个默认属性作为对象(在我的示例中为default_obj_1)。在脚本的底部,您看到我尝试通过传递插件{default_value_2: 666, default_obj_1.default_prop_3: 434}来更改其中一个属性,但它会使JavaScript无效并出错。我也尝试传递它{default_value_2: 666, default_obj_1: {default_prop_3: 434}但它似乎覆盖了应该保留的其他值。

如何只更新jQuery插件中的一个默认值?

(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} });

});

1 个答案:

答案 0 :(得分:1)

变化:

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

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

进行深度(递归)合并。