使用用户扩展jQuery插件默认选项

时间:2014-03-07 22:07:44

标签: javascript jquery plugins closures

在下面的演示中:这行代码中发生了什么?

settings = $.extend({}, defaultSettings, settings || {});

上述与此之间的区别是什么:

    if(settings){
    settings = $.extend(defaultSettings, settings);
}

==================================

(function($){
    var defaultSettings = {
        mode            : 'Pencil',
        lineWidthMin    : '0',
        lineWidthMax    : '10',
        lineWidth       : '2'
    };

    $.fn.wPaint = function(settings)
    {
        settings = $.extend({}, defaultSettings, settings || {});

        return this.each(function()
        {
            var elem = $(this);

            //run some code here
        });
    }
})(jQuery);

1 个答案:

答案 0 :(得分:2)

settings = $.extend({}, defaultSettings, settings || {});

jQuery $ .extend()方法从一个或多个对象将属性从右向左复制到另一个对象中。在此特定示例中,该方法正在传递三个对象:{}(空对象),defaultSettings然后settings(如果settings不存在则为空对象)。因此,从右到左,设置的所有属性都将复制到defaultSettings中,然后将其结果复制到空对象({})中。所有这些的结果是settings中的属性(用户的自定义选项)将优先于defaultSettings,然后它们都被复制到空对象中。空对象的原因是因为 $。extend()实际上通过引用修改了第一个参数,所以传入一个空对象作为第一个对象实际上是在不修改任何对象的情况下进行克隆。

if(settings){
    settings = $.extend(defaultSettings, settings);
}

除了用空对象替换settings(如果它不存在),它不会执行给定的代码时,它会做同样的事情。

更新: 关于settings || {},这意味着使用设置对象(如果它存在(技术上,如果它是真的)使用空对象。它避免传递值undefined