02 Sep 2014
类似 PJAX 的链接加速器, jquery.smoothState.js

如果你是 Rubyist,应该已经接触过 Turbolinks,这个插件会将链接目标网页中 body 的内容替换到当前页并改变地址,缓存页面,从而提高页面切换速度。

而对于非 Rails 开发者,如果你苦恼于页面加载缓慢导致白屏刷新,jquery.smoothState.js 这个 jQuery 插件或许是个不错的选择,他是 PJAX 的增强版,提供了更多的特性:

  • 预读
  • 缓存
  • onStart, onProgress, onEnd, callback 这4种回调
  • 黑名单,支持略过指定链接

必要条件

  1. 指定替换内容的父容器必须使用 id。
  2. 链接返回的内容必须是包含 Layout 的完整 HTML 页面,不能只有 fragment 片段

基础用法

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home - My Site</title>
  </head>
  <body>
    <!-- Every smoothState container needs an id -->
    <div id="main">
      <!-- Every link should return a full layout -->
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
      <!-- Contents of the page... -->
    </div>
    <!-- Scripts -->
    <script src="jquery.js"></script> 
    <script src="jquery.smoothState.js"></script>
    <script src="functions.js"></script>
  </body>
</html>
// Contents of functions.js
;(function ($) {
    $('#main').smoothState();
})(jQuery);

在这里,插件做了以下几件事:

  1. 阻止链接默认事件,防止浏览器加载新页面
  2. 更新 url,更新标题
  3. 使用 AJAX 请求页面,查找对应页面中相同 id 的容器,将内容替换到当前页。

这个替换过程是不可见的,当网络不通畅时有可能会给用户造成操作无效的错觉。

这时候我们可以使用一些可视化的响应反馈到用户,比如说 nprogress ,通过内置的回调函数增加过渡效果:

// Contents of functions.js
;(function ($) {
    $('#main').smoothState(
        onStart: {
            render: function() {
                NProgress.start();
            }
        },
        onEnd: {
            render: function() {
                NProgress.done();
        }
    );
})(jQuery);
// 未经测试

提高程序性能

预读

$('#main').smoothState({ prefetch: true });

当用户在链接上悬停 200ms 到 300ms 时,插件会预先读取内容,再在点击时替换到当前页

缓存

$('#main').smoothState({ pageCacheSize: 4 });

这个缓存是按页计数的,默认是 0。

参考:

http://weblinc.github.io/jquery.smoothState.js/index.html https://github.com/weblinc/jquery.smoothState.js/blob/master/jquery.smoothState.js [DailyJS]: http://dailyjs.com/2014/08/26/smoothstate-tpl


Til next time,
at 00:00

scribble