coffce-pjax
coffce-pjax可以将页面所有的跳转替换为AJAX请求，把网站改造成单页面应用。
note: 由于浏览器限制，pjax需要在服务器环境下使用，即不要使用file://xxx.html运行。
###有何用处：
- 可以在页面切换间平滑过渡，增加Loading动画。
- 可以在各个页面间传递数据，不依赖URL。
- 可以选择性的保留状态，如音乐网站，切换页面时不会停止播放歌曲。
- 所有的标签都可以用来跳转，不仅仅是a标签。
- 避免了公共JS的反复执行，如无需在各个页面打开时都判断是否登录过等等。
- 减少了请求体积，节省流量，加快页面响应速度。
- 平滑降级到低版本浏览器上，对SEO也不会有影响。
###兼容性：
- Chrome, Firefox, Safari, Android Browser, IE8+等。
- 在IE8和IE9上使用URL Hash，即地址栏的#号。
- 在更低版本的浏览器和搜索引擎蜘蛛上，保持默认跳转，不受影响。
如何使用
####安装： npm install coffce-pjax
引入
// 使用全局变量
var pjax = window.CoffcePJAX// 使用commonJS或AMD
var pjax = require("coffce-pjax");####简单配置：
pjax.init({
// 替换新页面内容的容器
container: "body",
// 是否在低版本浏览器上使用Hash
hash: true
});####完整配置:
pjax.init({
// 选择器，支持querySelector选择器
selector: "a",
// 要替换内容的容器，可为选择器字符串或DOM对象
container: "body",
// 是否在前进后退时开启本地缓存功能
cache : true,
// 是否对低版本浏览器启用hash方案，不启用此项的低版本浏览器则会按照普通模式跳转
hash: false,
// 是否允许跳转到当前相同URL，相当于刷新
same: true,
// 调试模式，console.log调试信息
debug: false,
// 各个执行阶段的过滤函数，返回false则停止pjax执行
filter: {
// 选择器过滤，如果querySelector无法满足需求，可以在此函数里二次过滤
selector: function(a) {},
// 接收到ajax请求返回的内容时触发
content: function(title, html) {}
},
// 各个阶段的自定义函数，将代替默认函数
custom: {
// 自定义更换页面函数，可以在此实现动画效果等
append: function(html, container) {}
},
// 要监听的事件，相当于pjax.on(...)，事件列表看下面
events: {}
});接口
/**
* 初始化
* @param {Object} options 配置，详情见上面↑
*/
pjax.init(config); // 注销插件，一般来说你不需要使用这个方法
pjax.destroy();/**
* 使用pjax跳转到指定页面
* @param {String} url
* @param {Object} data 要传到新页面的参数，可以为null或undefined
* @param {Function} callback 请求成功时的回调，可以为null或undefined
*/
pjax.turn(url, data, callback);/**
* 监听事件，事件类型见下面↓
* @param {String} type 事件类型
* @param {Function} listener 回调
* @param {String} url 只监听某个url，可以是相对和绝对路径
*/
pjax.on(type, listener);
pjax.on(type, url, listener);/**
* 解除监听
* @param {String} type 事件类型
* @param {String} url 只监听某个url，可以是相对和绝对路径
*/
pjax.off(type);
pjax.off(type, url);/**
* 触发事件
* @param {String} type 事件类型
* @param {Object} args 参数
*/
pjax.trigger(type, args);事件
####监听事件
// 通过接口监听
pjax.on(type, url, function);
pjax.on(type, function);// 通过配置监听
pjax.init({
// ....
events: {
type: function(){}
}
});
####事件类型
init
在每个页面加载完成后触发，有一个object参数：{ title, html }
end
在每个页面离开前触发
ajaxBegin
在请求开始时触发。有一个object参数： { url, fnb, data, xhr }, url表示新页面的url，fnb表示是否由浏览器前进后退触发，data表示传到新页面的数据，xhr是请求的XMLHttpRequest()实例
ajaxSuccess
在请求成功后触发。参数与begin一样。
ajaxError
在请求失败后触发。参数与begin一样。
特性
- 优先使用标签上的data-coffce-pjax-href，其次使用href
- 标签上若有data-coffce-pjax属性，将作为data属性传递到新页面
// 将跳转到b.html，并传递字符串data
<a href="a.html" data-coffce-pjax-href="b.html" data-coffce-pjax="data"></a>服务端配合
- 对于PJAX请求，服务端并不需要返回完整的HTML，只返回变动的Content部分即可。对于普通请求(一般由浏览器地址栏直接打开)，则需要返回完整的HTML。
- coffce-pjax在发送请求时，会带上请求头COFFCE-PJAX：true，你可以依此来判断当前请求是PJAX请求还是普通请求。
- 由于没有返回完整的HTML，服务端应该将document.title放在请求头COFFCE-PJAX-TITLE里。
注意：
作者很懒，没有认真测试过，接口也可能随时变动，使用需自己小心。
License
MIT