coffce-pjax

coffce-pjax可以将页面所有的跳转替换为AJAX请求，把网站改造成单页面应用。

###有何用处：

• 可以在页面切换间平滑过渡，增加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) {}
    }
});

####服务端配合 一般来说，我们切换页面时Header和Footer是不用动的，只变动Content，所以服务端在接收到PJAX请求后，并不需要返回完整的HTML，只返回Content即可。

coffce-pjax在发送请求时会带上请求头COFFCE-PJAX: true，服务端可以根据此判断当前请求是否是一个PJAX请求，如若是PJAX请求则返回部分HTML。

####注意 由于浏览器限制，PJAX需要在服务器环境下使用，即不要用file://xxx.html运行

接口

/**
 * 初始化
 * @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 回调
 */
pjax.on(type, listener);
// 指定url，只在跳转到该url时触发
pjax.on(type, url, listener);

/**
 * 解除监听
 * @param {String} type 事件类型
 */
pjax.off(type);
// 解除指定url的事件
pjax.off(type, url);

/**
 * 触发事件
 * @param {String} type 事件类型
 * @param {Object} args 参数
 */
pjax.trigger(type, args);
// 触发指定url的事件
pjax.trigger(type, url);
pjax.trigger(type, url, args);

事件类型

/**
 * begin 在请求开始时触发
 * @param {String}  e.url  要跳转的url
 * @param {Boolean} e.fnb  [forward and back] 是否由浏览器前进后退触发
 * @param {Object}  e.data 要传递到新页面的数据
 */
pjax.on("begin", function(e) {});

/**
 * success 在请求成功时触发，参数和上面一样↑
 */
pjax.on("success", function(e) {});

/**
 * success 在请求结束时触发，无论成功与否。参数和上面一样↑
 */
pjax.on("end", function(e) {});

/**
 * error 在请求失败时触发，参数和上面一样↑，但多了一个errCode
 * @param {Object} e.errCode 请求的xhr.status
 */
pjax.on("error", function(e) {});

其他

• 标签上若有data-coffce-pjax，将作为data属性传递到新页面
• 优先使用标签上的data-coffce-pjax-href，其次使用href：

// 将跳转到b.html
<a href="a.html" data-coffce-pjax-href="b.html"></a>

注意：

作者很懒，没有认真测试过，使用需自己小心。

License

MIT