前端:将网站打造成单页面应用SPA(一)

jopen 9年前

前言</span>

不知你有没有发现,像Github、百度、微博等这些大站,已经不再使用普通的a标签做跳转了。他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML5的新API修改了Url,你可以在F12的Network面板里发现这个秘密。
这项技术并没有特别标准的学名,大家都称呼为Pjax,意为PushState + Ajax。这并不完全准确,因为还有Hash + Ajax等方法,但为了方便,我们下文还是统称为Pjax。


为什么要这么做?</span>

Pjax是一个优秀的解决方案,你有足够多的理由来使用它:

  • 可以在页面切换间平滑过渡,增加Loading动画。
  • 可以在各个页面间传递数据,不依赖URL。
  • 可以选择性的保留状态,如音乐网站,切换页面时不会停止播放歌曲。
  • 所有的标签都可以用来跳转,不仅仅是a标签。
  • 避免了公共JS的反复执行,如无需在各个页面打开时都判断是否登录过等等。
  • 减少了请求体积,节省流量,加快页面响应速度。
  • 平滑降级到低版本浏览器上,对SEO也不会有影响。


原理呢?</span>

Pjax的原理十分简单。
1. 拦截a标签的默认跳转动作。
2. 使用Ajax请求新页面。
3. 将返回的Html替换到页面中。
4. 使用HTML5的History API或者Url的Hash修改Url。


HTML5 History API</span>

我们来看看HTML5在History里增加了什么:


history.pushState(state, title, url)
pushState方法会将当前的url添加到历史记录中,然后修改当前url为新url。请注意,这个方法只会修改地址栏的Url显示,但并不会发出任何请求。我们正是基于此特性来实现Pjax。它有3个参数:

  • state: 可以放任意你想放的数据,它将附加到新url上,作为该页面信息的一个补充。
  • title: 顾名思义,就是document.title。不过这个参数目前并无作用,浏览器目前会选择忽略它。
  • url: 新url,也就是你要显示在地址栏上的url。


history.replaceState(state, title, url)
replaceState方法与pushState大同小异,区别只在于pushState会将当前url添加到历史记录,之后再修改url,而replaceState只是修改url,不添加历史记录。


window.onpopstate 事件
一般来说,每当url变动时,popstate事件都会被触发。但若是调用pushState来修改url,该事件则不会触发,因此,我们可以把它用作浏览器的前进后退事件。该事件有一个参数,就是上文pushState方法的第一个参数state。


一个实例:</span>

这里我们以daipig为例,打开daipig,地址栏是http://www.daipig.com 。接下来打开F12 Console,输入:

history.pushState({ a: 1, b: 2 }, null, "http://www.daipig.com/abcdefg");

可以发现,url已经变成我们输入的url了,但页面并没有刷新,也没有发出任何请求。现在再输入history.state,就可以看到我们刚刚传过来的第一个参数state了。
这时点击后退,url会回到www.daipig.com,同样是没有刷新。只不过后退的时候其实是触发了window.onpopstate事件的。

详细文档可以查阅MDN: https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_...


怎么完整的实现Pjax?</span>

Pjax的原理上文已经讲了,并不复杂。我实现了一个比较粗糙的Pjax库,已经能满足不少需求,如果你有兴趣,可以上Github帮忙完善一下代码。地址是:https://github.com/Coffcer/coffce-pjax
完整的代码见Github,这里我们只谈需要注意的一些地方。

匹配选择器

要实现Pjax,难免就会有匹配选择器的需求。你需要判断当前点击的元素,是否匹配指定选择器。这里我给出一个兼容至IE8的解决方法:

// 判断element是否匹配选择器
selectorfunction matchSelector(element, selector) {
    var match =
         document.documentElement.webkitMatchesSelector ||
         document.documentElement.mozMatchesSelector ||
         document.documentElement.msMatchesSelector ||
        // 兼容IE8及以下浏览器
        function(selector, element) {
            // 这是一个好方法,可惜IE8连indexOf都不支持
            // return Array.prototype.indexOf.call(document.querySelectorAll(selector), this) !== -1;
            if (element.tagName === selector.toUpperCase()) return true;
            var elements = document.querySelectorAll(selector),
            length = elements.length;
            while (length--) {
                if (elements[length] === this) return true;
            }
           return false;
        };

// 重写函数自身,使用闭包keep住match函数,不用每次都判断兼容
    matchSelector = function(element, selector) {
         return match.call(element, selector);
    };
return matchSelector(element, selector);}


// 验证一下
matchSelector(document.getElementById("abc"), "#abc"); // true
matchSelector(document.querySelector("a"), "p");// false


在现代浏览器上,优先使用原生的matchesSelector方法来判断,在IE8及以下的浏览器里,循环document.querySelector的结果集,依次对比。
这个方法利用了闭包,然后重写自身,只有在第一次调用时需要判断加哪个前缀执行哪个方法,其后都是调用了闭包的match函数。


不支持HTML5 PushState的浏览器怎么办?</span>

IE6到IE9是不支持pushState的,要修改Url,只能利用Url的Hash,也即是#号。
你可以随意找个网站试一下,在url后面加上#号和任意内容,页面并不会刷新。此时点击后退也只会回到上一条#号,同样不会刷新。
那么我们只需把pushState(新url)换成localtion.hash = 新url,把onpopstate事件换成onhashchange事件就可以兼容IE了。
QQ音乐,网易云音乐等就是使用这种方式。


现成的库</span>

我简单实现了一个比较粗糙的Pjax库,地址是:https://github.com/Coffcer/coffce-pjax ,欢迎PR和Star。


作者:coffee

原文地址:http://segmentfault.com/a/1190000002920768