单页面应用跳转页面方式

1、Pjax

　　像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。不过这个参数目前并没有做用，浏览器目前会选择忽略它，传null便可。
• 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_history

怎么完整的实现Pjax？

Pjax的原理上文已经讲了，并不复杂。我实现了一个比较粗糙的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音乐，网易云音乐等就是使用这种方式。

 

2、只改变 URL Hash 的单页面应用

仔细观察能够发现，如今的 Twitter，Google，Facebook 的 URL 地址充斥着 #号或者 #! 号。例如一个新版 Twitter 地址是这样的

https://twitter.com/#!/chloerei

这个 #! 号有什么意义呢？这个能够看看阮一峰整理的这篇《URL的井号》。这里假设你已经了解 # 号后面的改变不会致使页面加载，怎么利用这个特性达到 1.3 提出的目标。

第一步，有关 Ajax 调用的连接所有用 #path 做为连接目标

例如，若是一个连接原本是

<a href="/topics/1">topic1</a>

就修改成

<a href="#/topics/1">topic1</a>

显然，若是不作后续工做的话，这个连接点击后页面不会发生什么变化，用户也不会被带到新地址。惟一的改变是 URL 的 # 号部分变成了 #topics/1

设置 onhashchange 事件

在 javascript api 中，窗口 window 对象的 hash 值（# 号后面部分）发生变化时，会调用 onhashchange 事件。给 onhashchange 挂上一个 function，就能够在 hash 有改动的时候调用这个 function。

例如能够在控制台输入这段 js 代码测试

window.onhashchange = function(){alert(window.location.hash)}

实际中 function 里面就是放置真正用来刷新页面的代码了。好比在 jQuery 里用 $.get(location.path)。

效果

如今的 twitter，gooogle，facebook 都是使用这种方法刷新页面，这对浏览器书签、后退的支持也很好。

可是这有一些反作用。

一是由于页面路径被写在了 Hash 里面，而浏览器是不向服务器发送 Hash 部分的。因此打开这样的 URL 须要两个来回：一、打开空白的首页 二、根据 Hash 用 Ajax 载入实际内容

二是把路径写在了 Hash 里面破坏了 URL 原先的含义。从 URL 字面看

https://twitter.com/#!/chloerei

这个页面表示的是 twitter.com 页面上的 !/chloerie 锚点。但从实际内容上，这表示的是 chloerei 的我的页面。因此有人称这种站点为“单页面应用”。总的来讲，这个方案对主流浏览器的支持程度很高，是目前的主流方案。