摘要：可以在各个页面间传递数据，不依赖。可以选择性的保留状态，如音乐网站，切换页面时不会停止播放歌曲。减少了请求体积，节省流量，加快页面响应速度。将返回的替换到页面中。不过这个参数目前并无作用，浏览器目前会选择忽略它。
前言
不知你有没有发现，像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里增加了什么：
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函数。
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。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85759.html
摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。 前言 一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。 书签源码 书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...
摘要：前端技术栈还是非常庞大的，为了能够借助已经存在的轮子来造出一辆车，所以我选择了进行实践。状态的管理的状态管理依靠完成，用其来管理的所有组件状态。私有云客户端打造主页面首先是主页面，可以打开任何一个云主机系统的页面看，基本类似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技术栈打造个人私有...
摘要：前端技术栈还是非常庞大的，为了能够借助已经存在的轮子来造出一辆车，所以我选择了进行实践。状态的管理的状态管理依靠完成，用其来管理的所有组件状态。私有云客户端打造主页面首先是主页面，可以打开任何一个云主机系统的页面看，基本类似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技术栈打造个人私有...
