Question

我有一个奇怪的问题，jquery插件和选项重写。

如果我像这样设置插件works fine。

$("#social-media").socialMedia({
    url: "http://css-tricks.com",
    social: [
        { name: "facebook", widget: "like_small" },
        { name: "twitter", widget: "small" },
        { name: "googlePlus", widget: "small" }
    ]    
});

如果我添加一个需要覆盖的额外选项，facebook like button does not load。

$("#social-media").socialMedia({
    url: "http://css-tricks.com",
    social: [
        { name: "facebook", widget: "like_small" },
        { name: "twitter", widget: "small" },
        { name: "googlePlus", widget: "small" }
    ],
    facebook: {
        id: 195838043798363
    }     
});

Answer 1

默认情况下，jQuery.extend()会替换整个属性。因此，如果默认值为：

{
    …
    facebook: {
        like_large: '<div class="fb-like" data-href="{url}" data-send="false" data-layout="box_count" data-width="120" data-show-faces="false"></div>',
        like_small: '<div class="fb-like" data-href="{url}" data-send="false" data-layout="button_count" data-width="120" data-height="21" data-show-faces="false" data-colorscheme="light"></div>',
        share: '<a name="fb_share" type="box_count" share_url="{url}" href="http://www.facebook.com/sharer.php?u={url}&t={title}">Share</a>',
        id: 195838043798363
    },
    …
}

您的选择如下：

{
    …
    facebook: {
        id: 195838043798363
    }     
    …
}

整个facebook对象将替换为{ id: 195838043798363 }。

如果你传递true作为它的第一个参数，那么jQuery.extend()支持你正在尝试做它的事情。改变这一行：

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

到此：

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

应该让它做你想做的事。

Answer 2

使用该分配，您将覆盖插件中的整个facebook对象，以便它只包含id变量。

你最好将facebook id作为一个单独的属性来覆盖：

...
facebook:   {
    like_large: '<div class="fb-like" data-href="{url}" data-send="false" data-layout="box_count" data-width="120" data-show-faces="false"></div>',
    like_small: '<div class="fb-like" data-href="{url}" data-send="false" data-layout="button_count" data-width="120" data-height="21" data-show-faces="false" data-colorscheme="light"></div>',
    share: '<a name="fb_share" type="box_count" share_url="{url}" href="http://www.facebook.com/sharer.php?u={url}&t={title}">Share</a>',                   
},
facebook-id: 1000000, 
...

http://jsfiddle.net/UwvDM/3/

jquery插件选项无法正确扩展和覆盖

2 个答案: