jQuery插件選項無法正確擴展和覆蓋

Question

我有一個奇怪的問題，與jQuery插件和選項改寫。

1. 如果我像這樣安裝插件，它將正常工作 。

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

2. 如果我添加了一個需要覆蓋的額外選項， 則不會加載facebook like button 。

    $("#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/