javascript - Addthis/Sharethis VS“手动”添加每个按钮

Question

我想在我的新页面（显示某个帖子时）添加一个类似 fb、google+1、tweet 按钮等。我知道例如 addthis 默认提供此功能。但缺点是你会得到一个有点大的 javascript 文件，偶尔会抛出一些错误。所以我的问题是：在类似的情况下，你们通常会选择哪种选择以及为什么。谢谢

Answer 1

通过 addthis 包含不是我包含社交按钮的首选方式。事实上，正如您所注意到的，有时会抛出一些错误，并且如果 addthis 库失败（例如 javascript 错误、服务器超时......）所有按钮都可能失败，因为它们依赖于唯一的库。此外，为了简单的性能问题，addthis 是一个加载其他脚本的脚本（它是 33kb gzipped），因此可以避免它，我可以完全控制社交按钮的包含。

我更喜欢异步加载所有需要的库并仅在我真的需要它们时才注入必要的标记，就像这样

$(document).ready(function() {

    if (('.socialshare').length) {

       /* twitter button */      
       $('<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>').appendTo($('.socialshare'));
       loadscript('//platform.twitter.com/widgets.js', 'twitter')

       /* Google +1 button */      
       $('<div class="g-plusone" data-size="medium" data-annotation="bubble"   data-expandTo="top"></div>').appendTo($('.socialshare'));
       loadscript('https://apis.google.com/js/plusone.js', 'google-plusone');
    }

})

（为了性能，缓存对 的引用.socialshare） loadscript是一个像这样的简单脚本加载器函数

function loadscript(url, id) {
    var js, fjs = document.getElementsByTagName('script')[0];
    if (document.getElementById(id)) { return; }
    js = document.createElement('script'); 
    js.id = id;
    js.charset = "utf-8";
    js.src = url;
    fjs.parentNode.insertBefore(js, fjs);
};

基本上，如果我的模板包含带有社交按钮的元素（.socialshare元素），我会注入带有 id 的脚本元素（这样我就确定没有其他脚本可以将它们注入两次）