前端从业人员技术贴Web前端之路让前端飞

前端如何做分享功能-偷偷学简书~

2019-06-03  本文已影响145人  我只会吃饭

偷偷的告诉你：你可以在简书上学到前端分享的技术

image.jpg

今天无聊居然打开了简书页面的控制台Network，然后发现了一个接口，感觉发现了大秘密~


pic1.PNG

分享的功能居然在这里！！！

不要脸的我就去看了一下elements

固定侧边栏的分享按钮HTML

    <a tabindex="0" role="button" data-toggle="popover" data-placement="left" data-html="true" data-trigger="focus" href="javascript:void(0);" data-content="<ul class='share-list' style=&quot;width:220px&quot;>
                <li><a class=&quot;weixin-share&quot;><i class=&quot;social-icon-sprite social-icon-weixin&quot;></i><span>分享到微信</span></a></li>
                <li><a href=&quot;javascript:void((function(s,d,e,r,l,p,t,z,c){var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1881139527',u=z||d.location,p=['&amp;url=',e(u),'&amp;title=',e(t||d.title),'&amp;source=',e(r),'&amp;sourceUrl=',e(l),'&amp;content=',c||'gb2312','&amp;pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','', '推荐 繁络 的文章《CSS选择器有哪些？》（ 分享自 @简书 ）','https://www.jianshu.com/p/1d6efea3db1c?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=reader_share&amp;utm_source=weibo','页面编码gb2312|utf-8默认gb2312'));&quot;><i class='social-icon-sprite social-icon-weibo'></i><span>分享到微博</span></a></li>
                
                <li><a href=&quot;javascript:void(function(){var d=document,e=encodeURIComponent,r='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+e('https://www.jianshu.com/p/1d6efea3db1c?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=reader_share&amp;utm_source=qzone')+'&amp;title='+e('推荐 繁络 的文章《CSS选择器有哪些？》'),x=function(){if(!window.open(r,'qzone','toolbar=0,resizable=1,scrollbars=yes,status=1,width=600,height=600'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();&quot;><i class='social-icon-sprite social-icon-zone'></i><span>分享到QQ空间</span></a></li>
                <li><a href=&quot;javascript:void(function(){var d=document,e=encodeURIComponent,r='https://twitter.com/share?url='+e('https://www.jianshu.com/p/1d6efea3db1c?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=reader_share&amp;utm_source=twitter')+'&amp;text='+e('推荐 繁络 的文章《CSS选择器有哪些？》（ 分享自 @jianshucom ）')+'&amp;related='+e('jianshucom'),x=function(){if(!window.open(r,'twitter','toolbar=0,resizable=1,scrollbars=yes,status=1,width=600,height=600'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();&quot;><i class='social-icon-sprite social-icon-twitter'></i><span>分享到Twitter</span></a></li>
                <li><a href=&quot;javascript:void(function(){var d=document,e=encodeURIComponent,r='https://www.facebook.com/dialog/share?app_id=483126645039390&amp;display=popup&amp;href=https://www.jianshu.com/p/1d6efea3db1c?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=reader_share&amp;utm_source=facebook',x=function(){if(!window.open(r,'facebook','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();&quot;><i class='social-icon-sprite social-icon-facebook'></i><span>分享到Facebook</span></a></li>
                <li><a href=&quot;javascript:void(function(){var d=document,e=encodeURIComponent,r='https://plus.google.com/share?url='+e('https://www.jianshu.com/p/1d6efea3db1c?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=reader_share&amp;utm_source=google_plus'),x=function(){if(!window.open(r,'google_plus','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();&quot;><i class='social-icon-sprite social-icon-google'></i><span>分享到Google+</span></a></li>
                <li><a href=&quot;javascript:void(function(){var d=document,e=encodeURIComponent,s1=window.getSelection,s2=d.getSelection,s3=d.selection,s=s1?s1():s2?s2():s3?s3.createRange().text:'',r='http://www.douban.com/recommend/?url='+e('https://www.jianshu.com/p/1d6efea3db1c?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=reader_share&amp;utm_source=douban')+'&amp;title='+e('CSS选择器有哪些？')+'&amp;sel='+e(s)+'&amp;v=1',x=function(){if(!window.open(r,'douban','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r+'&amp;r=1'};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})()&quot;><i class='social-icon-sprite social-icon-douban'></i><span>分享到豆瓣</span></a></li>
              </ul>" data-original-title="" title="" class="function-button">
        <i class="iconfont ic-share"></i>
    </a>

这分享功能列表在data-content里面，并且以html格式保存

    <ul class='share-list' style="width:220px">
        <li>
            <a class="weixin-share">
                <i class="social-icon-sprite social-icon-weixin"></i>
                <span>分享到微信</span>
            </a>
        </li>
        <li>
            <a href="javascript:void((function(s,d,e,r,l,p,t,z,c){var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1881139527',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','', '推荐 繁络 的文章《CSS选择器有哪些？》（ 分享自 @简书 ）','https://www.jianshu.com/p/1d6efea3db1c?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=weibo','页面编码gb2312|utf-8默认gb2312'));">
                <i class='social-icon-sprite social-icon-weibo'></i>
                <span>分享到微博</span>
            </a>
        </li>

        <li>
            <a href="javascript:void(function(){var d=document,e=encodeURIComponent,r='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+e('https://www.jianshu.com/p/1d6efea3db1c?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=qzone')+'&title='+e('推荐 繁络 的文章《CSS选择器有哪些？》'),x=function(){if(!window.open(r,'qzone','toolbar=0,resizable=1,scrollbars=yes,status=1,width=600,height=600'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();">
                <i class='social-icon-sprite social-icon-zone'></i>
                <span>分享到QQ空间</span>
            </a>
        </li>
        <li>
            <a href="javascript:void(function(){var d=document,e=encodeURIComponent,r='https://twitter.com/share?url='+e('https://www.jianshu.com/p/1d6efea3db1c?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=twitter')+'&text='+e('推荐 繁络 的文章《CSS选择器有哪些？》（ 分享自 @jianshucom ）')+'&related='+e('jianshucom'),x=function(){if(!window.open(r,'twitter','toolbar=0,resizable=1,scrollbars=yes,status=1,width=600,height=600'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();">
                <i class='social-icon-sprite social-icon-twitter'></i>
                <span>分享到Twitter</span>
            </a>
        </li>
        <li>
            <a href="javascript:void(function(){var d=document,e=encodeURIComponent,r='https://www.facebook.com/dialog/share?app_id=483126645039390&display=popup&href=https://www.jianshu.com/p/1d6efea3db1c?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=facebook',x=function(){if(!window.open(r,'facebook','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();">
                <i class='social-icon-sprite social-icon-facebook'></i>
                <span>分享到Facebook</span>
            </a>
        </li>
        <li>
            <a href="javascript:void(function(){var d=document,e=encodeURIComponent,r='https://plus.google.com/share?url='+e('https://www.jianshu.com/p/1d6efea3db1c?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=google_plus'),x=function(){if(!window.open(r,'google_plus','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();">
                <i class='social-icon-sprite social-icon-google'></i>
                <span>分享到Google+</span>
            </a>
        </li>
        <li>
            <a href="javascript:void(function(){var d=document,e=encodeURIComponent,s1=window.getSelection,s2=d.getSelection,s3=d.selection,s=s1?s1():s2?s2():s3?s3.createRange().text:'',r='http://www.douban.com/recommend/?url='+e('https://www.jianshu.com/p/1d6efea3db1c?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=douban')+'&title='+e('CSS选择器有哪些？')+'&sel='+e(s)+'&v=1',x=function(){if(!window.open(r,'douban','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r+'&r=1'};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})()">
                <i class='social-icon-sprite social-icon-douban'></i>
                <span>分享到豆瓣</span>
            </a>
        </li>
    </ul>

然后我就点了点分享按钮~


pic3.gif

哎哟~脑壳痛（胡乱猜一下）:
第一步：请求了side_tool接口
第二步：然后将返回的参数中的sns_share_url编译成html放入了分享按钮a标签的data-content
第三步：用户点击分享按钮：data-content渲染到了<div class="popover"><div>

然后我又看了看微博分享（如何做微博分享）

 <a href="javascript:void((function(s,d,e,r,l,p,t,z,c){var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1881139527',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','', '推荐 繁络 的文章《CSS选择器有哪些？》（ 分享自 @简书 ）','https://www.jianshu.com/p/1d6efea3db1c?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=weibo','页面编码gb2312|utf-8默认gb2312'));">
                <i class='social-icon-sprite social-icon-weibo'></i>
                <span>分享到微博</span>
            </a>

这样实在是看不明白一串参数是个啥，不要脸的我只好...
（微博分享：文章地址及描述信息采用查询参数传递）

      (function (s, d, e, r, l, p, t, z, c) {
        // 使用微博分享地址
        var f = 'http://v.t.sina.com.cn/share/share.php?appkey=1881139527',
            u = z || d.location,
            // 拼接查询参数，作为分享描述信息
            p = ['&url=', e(u), '&title=', e(t || d.title), '&source=', e(r), '&sourceUrl=', e(l), '&content=', c || 'gb2312', '&pic=', e(p || '')].join('');
        function a() {
            if (
                // 新开窗口
                !window.open(
                    [f, p].join(''),
                    'mb',
                    // 窗口样式
                    ['toolbar=0,status=0,resizable=1,width=440,height=430,left=', (s.width - 440) / 2, ',top=', (s.height - 430) / 2].join('')
                )
                // 跳转路径
            ) u.href = [f, p].join('');
        };
        // 为什么要setTimeout
        if (/Firefox/.test(navigator.userAgent)) setTimeout(a, 0); else a();
    })(
        screen, // s : 客户端显示屏幕的信息
        document, // d : 文档对象
        encodeURIComponent, // e : 进行编码
        '', '', '', 
        // r: source 
        // l: sourceUrl
        // p: pic
        '推荐 繁络 的文章《CSS选择器有哪些？》（ 分享自 @简书 ）', // t ： 标题
        'https://www.jianshu.com/p/1d6efea3db1c?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=weibo', // z : 转载地址
        '页面编码gb2312|utf-8默认gb2312' // c : 编码
        )

生成的最后的链接我就不给大家看了~

为什么要这么干呢？

侧边栏其实有两种情况（用户角色权限）

1.登录状态
登录状态下有很多功能：加入专题、收藏文章、喜欢文章，


image.png

2.未登录状态（为此我还得退出一下，脑壳痛~）
未登录状态下只有分享功能


image.png

  1. 静态页面数据


    image.png

由上可见

  1. 文章内容是静态渲染的、利于首屏快速渲染、并且利于爬虫的爬取
  2. 根据用户的状态，动态的渲染，赋予用户不同的功能

根据用户的角色区别了分享内容描述:

  1. 作者分享： '我写了新文章'
  2. 读者分享: '推荐 xx 的文章'

可见简书非常的细心呀！
其实还做了图片懒加载

相信你肯定学到了如何做分享功能(我太懒只贴了微博的分享)

最后有个疑问: 望大佬指点一下，感谢~

// 为什么Firefox要setTimeout
if (/Firefox/.test(navigator.userAgent)) setTimeout(a, 0); else a();

最后谢谢简书的前端，若有冒犯，请联系~可立刻删文！！！

image.jpg
上一篇 下一篇

猜你喜欢

热点阅读