什么是Pjax

pjax 是一个 jQuery 插件，它使用 ajax 和 pushState 通过真正的永久链接，页面标题和后退按钮提供快速浏览体验。

pjax 的工作方式是通过 ajax 从服务器获取 HTML ，然后用加载的 HTML 替换页面上容器元素的内容。然后，它使用 pushState 更新浏览器中的当前 URL。

用人话说就是使用 Pjax 能改变网站加载方式，让首次访问网页的时候就加载完大部分 js ，使得后期访问网站的其他网页就不用再重新加载一遍了从而提升用户体验

功能实现

先说一下使用场景，之前用插件实现了页面实时同步显示b站追番列表的功能，但美中不足的是因为追番太多页面原生也不支持分页所以就不太美观，于是就想到了做一个分页的功能

先用 JS 简单实现一下

网络找的简单改了一下，都在用的rbq代码
var zz=getzz()
var pageno=1 ; //当前页
var pagesize=5; //每页多少条信息
if(zz.length%pagesize==0){
    var pageall =zz.length/pagesize ;
}else{
    var pageall =parseInt(zz.length/pagesize)+1;
} //一共多少页
change(1);
function getzz() {
    var a = $("ul#masonry li");
    var zz =new Array(a.length);
    for(var i=0;i <a.length;i++){
        zz[i]=a[i].innerHTML;
    } //div的字符串数组付给zz
    return zz;
}
function change(e){
    pageno=e;
    if(e<1){
        e=1;pageno=1;
    }
    if(e>pageall){
        e=pageall;pageno=pageall; //输入页和当前页都=最大页
    }
    $("#masonry").html("");//全部清空
    var html="";
    for(var i=0;i<pagesize;i++){
        html += '<li>' + zz[(e-1)*pagesize+i] +'</li>';//创建一页的li列表
        if(zz[(e-1)*pagesize+i+1]==null) break;//超出最后的范围跳出
    }
    $("ul#masonry").html(html);//给ul列表写入html
    var ye="";
    for(var j=1;j<=pageall;j++){
        if(e==j){
            ye=ye+"<span><a href='#' onClick='change("+j+")' style='color:#FF0000'>"+j+"</a></span> "
        }else{
            ye=ye+"<a href='#' onClick='change("+j+")'>"+j+"</a> "
        }
    }
    var pageNumContent="";
    var pageContent="";
    pageNumContent +='第<span id=\"a2\">'+pageno+'</span>/';
    pageNumContent +='<span id="a1">'+pageall+'</span>页 ';
    if (pageno != 1) {
        pageContent +='<a href="#" onClick="change(--pageno)">上一页 </a>';
    }
    if (pageno != pageall) {
        pageContent +='<a href="#" onClick="change(++pageno)">下一页</a>';
    }
    $("#page_num").html(pageNumContent);
    $("#page_sep").html(pageContent);
}

再改一下页面模板就差不多了

<div id="page_num" style="flex:1;height:0px"></div>
<div id="page_sep" style="flex:1;text-align:right;display:block;"></div>

效果
效果

Pjax重载

重载顾名思义就是说在访问网站时需要加载的脚本，根据我们写的功能需要引入一个js脚本

//重载
function loadscript(url) {
    var script = document.createElement("script");
    script.src = url;
    document.body.appendChild(script);
}
if (window.location.pathname == "/anime.html"){
pjaxReloaded = true;
console.log("reload pageUpdate js");
loadscript("https://static.cirno.me/blog/page_ani_sep.js");
}

在这里我们定义了一个全局变量 pjaxReloaded，其目的是为了给 HTML 里的引入脚本一个回调让它知道脚本已近引入过一次了，不这么做的话会出一些奇怪的bug

页面加入引用脚本

<script>
    function loadscript(url) {
        var script = document.createElement("script");
        script.src = url;
        document.body.appendChild(script);
    }
    if (typeof pjaxReloaded == "undefined") {
        loadscript("https://static.cirno.me/blog/page_ani_sep.js");
    }
</script>

需要注意的是，为了保证页面和 Pjax 的完全加载引用脚本应置于最后