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

我想在我的新页面中添加类似fb的google 1,tweet按钮等(显示特定帖子时).我知道例如addthis默认提供此功能.但是缺点是您会得到一个较大的JavaScript文件,偶尔会引发一些错误.所以我的问题是：在类似的情况下,人们通常会选择哪种选择以及为什么选择它们？谢谢

解决方法:

通过addthis包含不是我首选的包含社交按钮的方法.实际上,您已经注意到,有时会引发一些错误,并且如果addthis库失败(例如javascript错误,服务器超时…),则所有按钮都可能失败,因为它们取决于唯一的库.此外,出于性能的考虑,addthis是一个脚本,它会加载其他脚本(压缩后为33kb),因此可以避免,我可以完全控制社交按钮的包含.

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

$(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(这样我就可以确定其他脚本无法将它们两次注入)

标签：facebook-like,google-plus,sharethis,html,javascript
来源： https://codeday.me/bug/20191101/1987142.html