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 请求链接的过程中

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