黄聪：Pjax 无刷新开发web，更好用户体验

什么Ajax、Pjax、Njax。。。神马玩意？有Njax吗？木有。。。不过真有Pjax！！

其实pjax就是用到了html5的新history api： pushState和replaceState。如果浏览器不支持，会自动降级为普通http访问，跟正常a链接一样

具体啥区别？先视觉通感感受下！！上图：

1、普通的http切换页面的请求方式，闪烁、白屏、卡顿、加载等，就是完整加载一坨页面嘛，又慢又挫的，就像如花姑娘：

2、通过Ajax来开发页面，只加在部分数据，没有切换和闪烁，清新宜人哦，就像街上MM、邻家小妹

如果只是ajax的话，不能保存页面状态！一刷新就没了啊！！转瞬即逝啊！！

街上的MM都走远了，童鞋别看了，找不到了！！

如果要保存的话，结合hash#，其实很坑爹啊！

很多时候引入hash,导致开发复杂不说，关键是影响SEO，百度不认识 #! 啊只有谷歌认识有毛线用啊被墙了!

3、Pjax来了啊，喜大普奔！既能无切换、高性能加载显示html，又能跟普通url兼容，前后端开发逻辑也简单！

就像下面的女神吉田沙世和摄影模特啊！关键是你还能抱回家，轻松hold住，各种调戏啊！卧槽。。说漏嘴了。。咳说正事！

说完了视觉上的通感感受，我们再看一眼开发的区别，是不是开发很麻烦啊！！！上代码:

MO.go('.ctn a', '#ttt')

然后呢？

木有了啊！只要后台再根据请求头区分下是否是pjax来返回片段html代码就可以了！

浏览器不支持pjax怎么办？自动将极为普通http啊！！不用担心的！

艾玛、这么happy！真幸福！

简直就是修炼玉女心经的节奏啊！耶，操练起来！

玉女心经使用指南:

安装:

首先需要jQuery这个基础库~其实可以用纯js写这个pjax类库的，但是，我懒。。。

引入编译es5后到dist目录下的 mo.pjax.es5.js 脚本文件到html文件，如果使用es6，请import并配置编译

src="./dist/mo.pjax.es5.js"

可以去github上下载： https://github.com/xunuoi/MO.Pjax

用法:

Api Params Desc 参数注释:

_fetch : 是否请求网络，比如这次pjax的url参数是/about ,如果_fetch为false，那么不发送http 请求或读取缓存，只执行回调。

多用在复杂web/app设计中，比如当前内容已存在于html中，不想更新和获取.

* MO.state默认值是false，因为只是重新定义本页面状态，不需要更新已有数据和HTML

* MO.touch中默认值是true，因为要从http或缓存中更新数据、html

_fire：是否立刻触发onpopfn ，立刻执行回调函数。false表示popstate 事件触发后才执行

* MO.state中默认值是false, 只有popstate事件触发后才执行

* MO.go中调用了MO.state，并传参_fire值为false.

* MO.define中调用了MO.state，并传参_fire值为true.

配置:

调教一下，再美的女神也不是天生就符合你的口味，来这定制下啊！

MO.config({
    'type': 'POST',

    // this can be used for you back-end ,to detect if it is a pjax request
    'pjaxHeader': {
        'X-Http-Pjax': 'Pjax'
    }
})

详细配置和注解:

{
    'type': 'POST',// post is default http请求方式

    // if cache data， 是否缓存
    'cache': true,
    // 'cacheExpires': 10000, // 0 means always avaliable, default none 缓存时间

    // if store data in localStorage , default true 
    'storage': true, //是否启用localStorage
    //如果storageExpires设置为0或false，永不过期
    'storageExpires': 43200000, // 12 hours ,default 12 

    // the res data type, default html
    'dataType': 'html', //返回数据类型，默认html

    // you can set your own header ,just use `pjaxHeader` opts, 
    // which you can detect if it is an pjax request in back-end 
    // 你可以自己定义请求头，方便后端判断是否是pjax请求，如果是pjax, 返回部分html， fragment
    'pjaxHeader': {
        'Http-Request-Pjax': 'Fragment'
    },

    // you can set the fn which will triggered before MO.touch and popstate event happened
    // 触发pjax操作前和 出现popstate的事件时的事件函数, 参数是state，包含url、title等信息
    before (state) { ... } //默认无

    // you can set the beforeSend fn , before ajax request send.
    // jquery的ajax方法调用，请求前设置请求头，可以覆盖
    beforeSend (req){
        let ph = this['pjaxHeader']
        for (let h in ph ){
            let v = ph[h]
            req.setRequestHeader(h, v)
        }
    }
}

Api说明:

看看美女哪里长得最漂亮啊

一、MO.go 最简单！

MO.go(aSelector, ctnSelector, onSuccess)

这个是最简单和常用的api，只需要go一下，传入2个参数即可，一个是点击后触发pjax的元素选择器，一般是a，第二个是更新返回内容的html 。第三个是回调函数，可选。

MO.go添加处理错误的函数，比如出现网络请求错误，比如404，会在此处捕获

MO.go('.ctn a', '#ttt', 
function onSuccess(res, $aEle){
    console.log(res, $aEle)
}, 
function onError(err, $aEle){
    console.log(err, $aEle)
})

二、MO.define 不常用

定义当前页面的state状态，不常用

MO.define(ctn, htmlData)

三、MO.state 适合复杂开发

* MO.state和MO.go两者经常配合使用，比较灵活

详细定义当前页面state状态，以及是否请求次url, 和是否立刻触发onpopFn_fire

MO.state(url, title, onpopFn, _data=null, _fetch=false, _fire=false)

四、MO.go 复杂开发，很好用啊！！！

做复杂交互和逻辑时，比较常用

* 更强大和灵活的使用pjax，可以定义 pjax的操作的url、回调、是否发起此url的网络请求等，同样可以添加fail的错误处理函数

MO.touch(apiUrl, title, onpopFn, _fetch=true)

给touch添加fail处理网络请求错误，添加方式如下

MO.touch(apiUrl, title, onpopFn, _fetch=true)
.fail(function(err) {
    console.log('There is an error ', err)
})

服务端处理：

服务端只需要判断是普通请求(完整html)还是pjax请求（fragment html）

可以通过MO.config({'pjaxHeader': {xxx: yyy}})来设置请求头，或者修改type为POST\GET等，只要让服务端能判断即可！

说明：

通过MO.touch和MO.state，可以做非常复杂的pjax 应用，自定义事件\UI等

如果要简单使用，就是直接 MO.go(), 传入你想要pjax的a元素的selector即可

配合启用cache/localStorage(默认都启用), 给用户更好操作体验，减少等待、卡顿

本地存储：store/removeStore

原来还有这么个福利！！！

可以在引入MO.Pjax的任何页面，来store数据，当其他页面pjax到此页面的时候，数据直接从storage获取就可以啦！这个在做多重请求方式的web开发时，经常用到哦！

提供本地存储和自动过期机制，

过期时间通过MO.config({'storageExpires': xxx})来设定

自动创建一个item来跟踪这条数据的时间: { k+'createdAt': (new Date).getTime() },

Store的Api


MO.store(k, v)
MO.removeStore(k, v)

MO.pjax 使用 MO.go 举例

女神跳个舞吧！！

html代码



<div class="ctn">
    <h3>Test Mo.pjaxh3>
    <p>
       <a href="/about.html">Abouta>
        <a href="/toxic.html">Toxica> 
    p>
div>
<div id="ttt" style="margin-top: 30px;">
    <p>This is index htmlp>
div>



------------------------------------------------------------------


<div>This is about htmldiv>



------------------------------------------------------------------


<div>This is toxic htmldiv>

JS 代码

MO.go('.ctn a', '#ttt')

So easy! 搞定收工！

就似这么简单！就似这么任性！

我娘再也不用担心我无刷新更新页面内容了！Pjax大法好！

赶紧把pjax女神抱回家！！！

http://karat.cc/article/5655bcdce6fecb6c65eded27

posted on 2018-03-26 15:56 黄聪阅读(8384) 评论(0) 编辑收藏举报

刷新页面返回顶部

黄聪

公告

玉女心经使用指南:

安装:

配置:

Api说明:

MO.pjax 使用 MO.go 举例

女神跳个舞吧！！

玉女心经使用指南:

安装: