1.0 问题描述
几乎是一年一篇了哈。 昨天有点时间，我又看了看我这个荒废已久的blog，发现pjax还是存在一些问题，所以就着手修复了一下，先说说都有什么问题吧。
1.点击连接，网页需要加载的内容改变，但切换到加载过的页面，标题不会变。 2.prettify代码高亮在某个页面首次加载的时候，没有效果，代码并没有高亮 3.当在一个没有评论的页面进入有评论的页面时，Valine评论系统不显示
2.0 问题分析
2.1 问题1
我之前的pjax使用了本地缓存的功能，在读取存储的标题时存在错误，可尝试修复错误或不使用本地缓存(本地缓存其实并不好，如果有用户在加载某页面后，存储在了本地，然后此时页面内容变动了，用户并不能第一时间获取最新的内容，而是会加载本地的缓存，当然，如果加个比对判断当然能避免，但，那还不如不实用本地缓存)
2.2 问题2
prettify是需要对页面中标记为代码的部分的格式做处理的，然后css样式才会对处理后的部分套用样式，所以问题就在于pjax加载过来的部分并未被prettify处理。因为prettify没有被执行。
2.3 问题3
Valine的问题与prettify类似，Github issues (请问如何在带有 pjax 的页面下使用 #138),这个issue中提到了，Valine本身是可以重新init的，但是leancloud的av对象不支持，不管怎么搞都是操作同一个av对象。故。。。
3.0 解决问题 Show me the code
3.1 问题1
这个问题不需要展示代码了，我就是把本地存储给关了。
3.2 问题2
让prettify在pjax加载完成后再重载一次，具体看代码
1 $(document).on('pjax:complete', function() { //使用的pjax中complete事件做回调
2 _Blog.prettify(); //这是前面建立的prettify的初始化函数
3 });
具体我用的pjax这个开源项目有哪些事件可以用，可以看👉这里
3.3 问题3
Valine的问题在issue中有提到解决方案，我这里抄一下：
1<!doctype html>
2<html>
3<head>
4<!-- 你的代码（请确保已加载jQuery） -->
5
6<!-- 在head中加载AV文件和Valine文件 -->
7<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
8<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
9</head>
10<body>
11<div id="pjax-box">
12 <!-- 你的文章内容 -->
13
14 <!-- Comments -->
15 <div class="comment"></div>
16 <script>
17 new Valine({
18 el: '.comment' ,
19 notify: false,
20 verify: false,
21 appId: 'your appId',
22 appKey: 'your appKey',
23 placeholder: 'Just Go Go',
24 path: window.location.pathname // **请确保必须写该属性
25 });
26 </script>
27</div>
28<script>
29 // **请确认你的jQuery库已加载
30 $(document).pjax('a', '#pjax-box', {fragment:'#pjax-box', timeout:8000}).on('pjax:complete', function() {
31 // pjax 加载完成要做的操作
32 }).on('pjax:start', function() {
33 // pjax 加载开始需要做的操作 比如 NProgress.start();
34 }).on('pjax:end', function() {
35 // pjax 加载结束需要做的操作 比如 NProgress.done();
36 // 其他操作;
37 });
38</script>
39</body>
40</html>
根据代码把参数改成自己的，一定注意jQuery库的位置，这里也提到了，可以使用pjax的start和end事件配合nprogress制作出加载进度条的效果，同样，我也在这里添加了加载动画，如下：
1 $(document).on('pjax:start', function() { $('#pjax-content').fadeOut(); })
2 $(document).on('pjax:end', function() { $('#pjax-content').fadeIn();})
4.0 尾声
实际上pjax加载的问题，主要是要搞清楚，整个页面，哪些东西可以不用再次加载，哪些需要再次加载，将需要再次加载的部分加入到pjax更新的容器里，需要在pjax的各种生命阶段做其他动作的，就检视pjax的各种事件，做对应的动作就可以了。