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

jopen 9年前

原文 http://hao.jser.com/archive/7948/

前言

不知你有没有发现,像Github、百度、微博等这些大站,已经不再使用普通的a标签做跳转了。他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML5的新API修改了Url,你可以在F12的Network面板里发现这个秘密。

这项技术并没有特别标准的学名,大家都称呼为Pjax,意为PushState + Ajax。这并不完全准确,因为还有Hash + Ajax等方法,但为了方便,我们下文还是统称为Pjax。

为什么要这么做?

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

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

原理呢?

Pjax的原理十分简单。

1. 拦截a标签的默认跳转动作。

2. 使用Ajax请求新页面。

3. 将返回的Html替换到页面中。

4. 使用HTML5的History API或者Url的Hash修改Url。

HTML5 History API

我们来看看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。

一个实例:

这里我们以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?

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

完整的代码见Github,这里我们只谈需要注意的一些地方。

匹配选择器

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

// 判断element是否匹配选择器selector  function 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的浏览器怎么办?

IE6到IE9是不支持pushState的,要修改Url,只能利用Url的Hash,也即是#号。

你可以随意找个网站试一下,在url后面加上#号和任意内容,页面并不会刷新。此时点击后退也只会回到上一条#号,同样不会刷新。

那么我们只需把pushState(新url)换成localtion.hash = 新url,把onpopstate事件换成onhashchange事件就可以兼容IE了。QQ音乐,网易云音乐等就是使用这种方式。

现成的库

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