偷偷的告诉你：你可以在简书上学到前端分享的技术
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="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>" 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
静态页面数据
image.png
由上可见
- 文章内容是静态渲染的、利于首屏快速渲染、并且利于爬虫的爬取
- 根据用户的状态，动态的渲染，赋予用户不同的功能
根据用户的角色区别了分享内容描述:
- 作者分享： '我写了新文章'
- 读者分享: '推荐 xx 的文章'
可见简书非常的细心呀！
其实还做了图片懒加载
相信你肯定学到了如何做分享功能(我太懒只贴了微博的分享)
最后有个疑问: 望大佬指点一下，感谢~
// 为什么Firefox要setTimeout
if (/Firefox/.test(navigator.userAgent)) setTimeout(a, 0); else a();
最后谢谢简书的前端，若有冒犯，请联系~可立刻删文！！！
image.jpg
