网站启用ajax无刷新技术(pjax)和多说的一些小技巧 程序人生,站务记录
先说ajax无刷新技术吧
因为 Godaddy 空间中资源和国内访问速度的原因，能节省一点资源就节省一点资源吧。虽然对于传统的 ajax 来说，更新版的 pjax 可以同时写入浏览器历史（ pushState ）和动态更换 url 显示，但是对于我来说，貌似还有一下不足：
- 浏览器缓存（内存）不会释放,会让老爷机的朋友感觉到机器卡。
- 不利于SEO（当然比 ajax 已经很好了）。 pjax 再先进也只更新某个容器，对于 head 内的一些 meta 是不会处理的，强迫症的伤不起啊。
- url 虽然写进了浏览器历史（
pushState），但是在 FireFox 下用 Backspace 返回时候。很多时间只是浏览器的url变了，但是内容还需要再次刷新。
好处也就不说了。减小重复资源的http请求。
言归正传，简单说说本站是怎么启用这个吧：
直接用了 defunkt/jquery-pjax 这位大神的成熟方案。对本站的链接(a)做了处理。 代码如下：
code$.getScript("http://Path/to//js/jquery.pjax.js", function() { $(function() { easun_pjax(); }); });
其中 easun_pjax(); 为核心函数。 简单如下：
codefunction 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'};
这样，多说就不会加载任何 CSS ，变成了一张白纸，自己享受重头定义本地 CSS 的乐趣吧。
让评论加载不在颤抖。
大家也许都注意到，有时间加载多说的评论会先从没有任何 CSS 样式再切换到有CSS样式。
原来以为是 CSS 没有及时加载进来。 后来一看官方的 CSS 才知道。 CSS 根本没有定义.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 > 0) { if (typeof DUOSHUO !== 'undefined') DUOSHUO.EmbedThread('.ds-thread'); else $.getScript("//static.duoshuo.com/embed.js"); }
完整代码如下：
code$(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");
}
});
}
--EOF--