pjax用法

最近在开发一款hexo主题3-hexo，其中使用了pjax大大提高了用户体验和加载速度，在此简单介绍一下pjax的用法github链接

pjax是什么

pjax是一款jQuery插件，使用了ajax和pushState的技术，在保留真正永久链接，网页标题和可用的返回功能的情况下，带来一种快速的浏览体验。 –官方介绍

用人话说，就是当跳转过去的网页和当前网页的一部分是一样的，这时可以通过pjax只取回你想要的（不同的那部分），而不必取回
整个页面。

这样做的优势：

1. 由于从服务器取回的数据量变少，加载速度将会提升。
2. 并且采用异步刷新页面中的那部分不一样的地方，用户体验也是满满的。
3. 保留了浏览器回退的功能（解决了ajax的尴尬）

好了，开始操作。

Demo

第一步：引入jQuery和jQuery.pjax

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>

第二步：将指定的a的链接，转为pjax风格

/*将#menu中的a的链接的页面，只取回class=pjax元素中的内容，替换掉当前页面class=pjax元素中的内容*/
$(document).pjax('.#menu a', '.pjax', {fragment:'.pjax', timeout:8000});

第三步：如果需要在请求的过程中做一些自定义的事件，可以使用下面的方法

$(document).on({
  'pjax:click': function() {
    //点击链接时，需要触发的事件写到这里
  },
  'pjax:start': function() {
    //当开始获取请求时，需要触发的事件写在这里
  },
  'pjax:end': function() {
    //当请求完成后，需要触发的事件写在这里
  }
});

结束。

详细文档

翻译于官方

参数

$(document).pjax(selector, [container], options)

1. selector 触发点击事件的选择器，String类型
2. container 一个选择器，为唯一的pjax容器
3. options 一个可以包含下面这些选项的对象

pjax options

Events

除了pjax:click和pjax:clicked外的所有pjax事件从pjax容器中触发，是不需要点击链接的。
所有事件的生命周期在通过pjax请求链接的过程中

生命周期在浏览器返回或前进时触发