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加载完成后再重载一次,具体看代码

    $(document).on('pjax:complete', function() {    //使用的pjax中complete事件做回调
        _Blog.prettify(); //这是前面建立的prettify的初始化函数
    });

具体我用的pjax这个开源项目有哪些事件可以用,可以看👉这里

3.3 问题3

Valine的问题在issue中有提到解决方案,我这里抄一下:

<!doctype html>
<html>
<head>
<!-- 你的代码(请确保已加载jQuery) -->

<!-- 在head中加载AV文件和Valine文件 -->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
</head>
<body>
<div  id="pjax-box">
    <!-- 你的文章内容 -->

    <!-- Comments -->
    <div class="comment"></div>
      <script>
          new Valine({
              el: '.comment' ,
              notify: false, 
              verify: false, 
              appId: 'your appId',
              appKey: 'your appKey',
              placeholder: 'Just Go Go',
              path: window.location.pathname // **请确保必须写该属性
          });
      </script>
</div>
<script>
    // **请确认你的jQuery库已加载
    $(document).pjax('a', '#pjax-box', {fragment:'#pjax-box', timeout:8000}).on('pjax:complete', function() {
        // pjax 加载完成要做的操作
    }).on('pjax:start', function() { 
      // pjax 加载开始需要做的操作 比如 NProgress.start();
    }).on('pjax:end',   function() {
      // pjax 加载结束需要做的操作 比如 NProgress.done();
      // 其他操作;
    });
</script>
</body>
</html>

根据代码把参数改成自己的,一定注意jQuery库的位置,这里也提到了,可以使用pjax的start和end事件配合nprogress制作出加载进度条的效果,同样,我也在这里添加了加载动画,如下:

    $(document).on('pjax:start', function() { $('#pjax-content').fadeOut(); })
    $(document).on('pjax:end',   function() { $('#pjax-content').fadeIn();}) 

4.0 尾声

实际上pjax加载的问题,主要是要搞清楚,整个页面,哪些东西可以不用再次加载,哪些需要再次加载,将需要再次加载的部分加入到pjax更新的容器里,需要在pjax的各种生命阶段做其他动作的,就检视pjax的各种事件,做对应的动作就可以了。