事先声明，此教程转载自本人朋友Ariasaka，已获取授权

DOM 层面适配

有些 DOM 元素（自己魔改）在不同页面的表现不一样，这时使用 pjax 切换页面后并不会进行更改，需要加上类名 .js-pjax。

有的时候，加上了 .js-pjax 之后出现了全页重载的现象，这是因为前面的页面有这个元素，后面的没有，pjax 出错导致全页重载的问题，这时应该把这个元素扩展到全站范围，并且在不需要的页面把元素置空。

加上之后全页重载？

典型例子，commentBarrage 的 pug 本来是这么写的：

if is_page()||is_post()
    .comment-barrage

显然，这时如果加上 .js-pjax 会使主页无法正常跳转，所以不妨把它扩展到主页范围：

.comment-barrage.js-pjax

这样就不会重载了

JS 适配

首先，对于切换页面后出现 bug 的 js，首先你应该尝试加上 data-pjax 类，因为它是在 butterfly 里面写好了的 js 重载筛选器：

这对于一些没有事件绑定的 js 是有效的，对于一些其它的则无效。

处理事件绑定问题

有时候，js 里面会这么写:

$(document).ready(()=>{
    //todo
})
//或者
window.0nload=function(){
    //todo
}
//或者
window.addEventListener("DOMContentLoaded",()=>{
    //todo
})

这些写法在 pjax 下的表现就是首次加载执行，后面就不会执行了。

修改方法也不难，把所有要做的事情全部写在一个函数里面，绑定事件：

window.addEventListener("pjax:complete",todo);//后面几次，pjax加载
window.addEventListener("DOMContentLoaded",todo);//第一次
function todo(){
    //代码
}

有时候一些本来不是函数的写了事件绑定，一定要注意全局和局部变量的问题。

解决鬼畜问题

对于一些定时器来说，每一次刷新都需要清除，否则就会鬼畜，比如弹幕的 js，我们需要给定时器设置一个变量绑定，每一次刷新都进行 clearInternal(timer)：

一个简化了的弹幕代码

window.addEventListener("pjax:complete",clear);//后面几次，pjax加载
window.addEventListener("DOMContentLoaded",load);//第一次加载
function clear(){
    clearInternal(timer);
    document.querySelector(".comment-barrage").innerHtml="";
    load();
}
function load(){
    //init
    timer=setInteral(()=>{
        popCommentBarrage();
    },114514)
}

对于一些没法适配 pjax 的第三方脚本（比如 bbtalk.min.js，我们加入 exclude 里面，对于 APlayer 可以用之前的这个方案