网站启用ajax无刷新技术(pjax)和多说的一些小技巧

July 17, 2015

先说ajax无刷新技术吧
虽然对于传统的 ajax 来说，更新版的 pjax 可以同时写入浏览器历史（ pushState ）和动态更换 url 显示，但是对于我来说，貌似还有一下不足：

浏览器缓存（内存）不会释放,会让老爷机的朋友感觉到机器卡。
不利于SEO（当然比 ajax 已经很好了）。 pjax 再先进也只更新某个容器，对于 head 内的一些 meta 是不会处理的，强迫症的伤不起啊。
url 虽然写进了浏览器历史（ pushState ），但是在 FireFox 下用 Backspace 返回时候。很多时间只是浏览器的url变了，但是内容还需要再次刷新。

好处也就不说了。减小重复资源的http请求。
言归正传，简单说说本站是怎么启用这个吧：

直接用了 defunkt/jquery-pjax 这位大神的成熟方案。对本站的链接(a)做了处理。代码如下：

$.getScript("http://Path/to//js/jquery.pjax.js", function() { $(function() { easun_pjax(); });     });

其中 easun_pjax(); 为核心函数。简单如下：

function easun_pjax()
{
 $(document).pjax('a[target!=_blank]', '#content', {fragment:'#content', timeout:6000});    
 $(document).on('pjax:send', function() {
   $('#content').fadeTo(700,0.0);  
  });
$(document).on('pjax:complete', function() { $('#content').fadeTo(700,1);   });
}

这样基本完成，如果一些需要在替换#content(<div id="content">...<div>)的内容需要 js 实现的。请在pjax:complete中（上面有示例）中重新运行一次。

成功后实例可以参见本站的各博文之间的切换。

再说多说的一些小技巧吧

用多说一段时间了。乱七八糟的改了一起。多说的自定义其实还很强的，只是官方似乎不是很重视这些小技巧？（官方现在都长草了）

彻底自定义CSS。不是官方说的在某些位置加入CSS，而是彻底把多说的CSS 放在自己的网站。其实很简单。就是定义duoshuoQuery.theme= 'none' 即可。再说的清楚点就是这样定义duoshuoQuery: var duoshuoQuery = { short_name: "YOURKEY", theme:'none'};

这样，多说就不会加载任何 <acronym title="Cascading Style Sheets">CSS</acronym> ，变成了一张白纸，自己享受重头定义本地 <acronym title="Cascading Style Sheets">CSS</acronym> 的乐趣吧。

让评论加载不在颤抖。大家也许都注意到，有时间加载多说的评论会先从没有任何 <acronym title="Cascading Style Sheets">CSS</acronym> 样式再切换到有CSS样式。原来以为是 <acronym title="Cascading Style Sheets">CSS</acronym> 没有及时加载进来。后来一看官方的 <acronym title="Cascading Style Sheets">CSS</acronym> 才知道。 <acronym title="Cascading Style Sheets">CSS</acronym> 根本没有定义 .ds-thread(class="ds-thread")而只定义了#ds-thread(id="ds-thread")。而多说的机制是找到.ds-thread 并以其做为容器加载评论文章，最后再给这个容器加上id(#ds-thread)。奇怪的逻辑～～为什么不直接以 ID 操作呢？多说自己的不自信？知道原因了，让评论加载不颤抖也就很简单，把加载评论的 <div class="ds-thread" ...> 提前改成 <div class="ds-thread" id="ds-thread" ...> 就可以了。或者，你也可以按照彻底定义CSS的办法重新对 .ds-thread 做 CSS定义。

pjax 动态加载评论。其实也就是上面的问题的延伸。在pjax:complete中加载即可。代码为

if ($('.ds-thread').length &gt; 0) { if (typeof DUOSHUO !== 'undefined') DUOSHUO.EmbedThread('.ds-thread'); else $.getScript("//static.duoshuo.com/embed.js"); }

</li> </ul> 完整代码如下：

$(document).on('pjax:complete', function() { $('#content').fadeTo(700,1); 
  if ( $('.ds-thread').length > 0 ) { 
    if (typeof DUOSHUO !== 'undefined') DUOSHUO.EmbedThread('.ds-thread');
    else $.getScript("//static.duoshuo.com/embed.js");
 }
 });
}

pjax 网站