前言

pjax是个好东西,能让我们体验到无缝切换的感觉。
但是pjax也是个很麻烦的玩意儿,适配不好就会出现一波又一波的Bug。
我之前一直不敢用pjax,因为我不会适配。但是看着别人都用上了心里多少有点痒。
于是我便翻了一下文档,发现了一个很好用的东西。
洪哥也写了一篇关于pjax的东西:pjax无法生效解决办法,butterfly主题维护你的pjax
当时看的时候是有一点懵逼的。但是如今来看可以说讲的很清楚了,而我要做的其实就是细讲一下其中的函数重新运行
代码写得比较乱,还请不要在意这些细节。

教程

我目前使用的方法就是使用两个js。一个存放函数,一个调用函数。
你也可以放在一个文件里面,怎么方便怎么来呗。
引入的时候存放函数的文件放在调用函数的文件的上面。
如下:

函数文件没什么好说的,主要说一下调用函数的文件。
只需要像下面这样调用函数,就能实现pjax的适配

1
2
3
4
5
6
7
8
9
function whenDOMReady() {
// pjax加载完成(切换页面)后需要执行的函数和代码
}

whenDOMReady() // 打开网站先执行一次
document.addEventListener("pjax:complete", whenDOMReady) // pjax加载完成(切换页面)后再执行一次

// whenDOMReady函数外放一些打开网站之后只需要执行一次的函数和代码,比如一些监听代码。
// 监听代码只需要执行一次即可,不需要每次加载pjax都执行,会出现一些Bug。至于为什么,我也不知道,可以自己试一下。

参考图如下:
示例

最后

我到现在也不是很了解pjax,但是通过上面的方法确实能实现适配。
还有就是在写代码的时候像一些监听和计时等都需要做一些特殊的设置。
比如计时可以设置一个变量,每次执行清除一下。比如监听放在whenDOMReady函数外等等。
这些东西都是我遇到的问题,我也不知道怎么正确的解决,只能想一些歪招。但还是那就话,能跑不就行了。
著名哲学家@轻笑曾说过:要用Bug来打败Bug。