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

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

  1. 浏览器缓存(内存)不会释放,会让老爷机的朋友感觉到机器卡。
  2. 不利于SEO(当然比 ajax 已经很好了)。 pjax 再先进也只更新某个容器,对于 head 内的一些 meta 是不会处理的,强迫症的伤不起啊。
  3. 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");
     }
     });
    }
    

仅有一条评论

  1. Pjax 有优点也有缺点

添加新评论