(转)前端:将网站打造成单页面应用SPA
前端:将网站打造成单页面应用SPA(一)
- 推荐 6 推荐
- 收藏 85 收藏,3.1k 浏览
前言
不知你有没有发现,像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音乐,网易云音乐等就是使用这种方式。
(转)前端:将网站打造成单页面应用SPA的更多相关文章
- 前端:将网站打造成单页面应用SPA
前端:将网站打造成单页面应用SPA 前言 不知你有没有发现,像Github.百度.微博等这些大站,已经不再使用普通的a标签做跳转了.他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML ...
- PushState+Ajax实现简单的单页面应用SPA
http://www.helloweba.com/view-blog-386.html 单页面应用(Single Page Application)简称SPA,使用SPA构建的应用优点有用户体验好.速 ...
- 单页面应用SPA架构
个人认为单页面应用的优势相当明显: 前后端职责分离,架构清晰:前端进行交互逻辑,后端负责数据处理. 前后端单独开发.单独测试. 良好的交互体验,前端进行的是局部渲染.避免了不必要的跳转和重复渲染. 当 ...
- 使用Angular构建单页面应用(SPA)
什么是SPA?看下图就是SPA: 下面说正经的,个人理解SPA就是整个应用只有一个页面,所有的交互都在一个页面完成,不需要在页面之间跳转. 单页面的好处是更快的响应速度,更流畅的用户体验,甚至和桌面应 ...
- 单页面应用SPA和多页面应用MPA
单页面应用(SinglePage Web Application,SPA) 只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js.css等)仅需加载 ...
- [后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序
一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...
- react_app 项目开发 (3)_单页面设计_react-router4
(web) 利用 react-router4 实现 单页面 开发 SPA 应用 ---- (Single Page Web Application) 整个应用只有 一个完整的页面 单击链接不会刷新页面 ...
- Vue-router进阶、单页面应用(SPA)带来的问题
一 . vue-router 进阶 回顾学过的vue-router,并参考官方文档学习嵌套路由等路由相关知识. 二 . 单页面应用(SPA)带来的问题 1 . 虽然单页面应用有优点 , 但是,如果后端 ...
- angular(3)服务 --注入---自定义模块--单页面应用
ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei ...
随机推荐
- Android之Handler用法总结/安卓中只有主线程可以修改UI
Handler传递消息的方式可以实现实时刷新以及长按连续响应事件. 按钮响应 btnadd_fcl.setOnTouchListener(new View.OnTouchListener() { pr ...
- IBATIS + ORACLE(二)
迁移时间:2017年6月1日16:09:02 Author:Marydon (四)IBATIS + ORACLE UpdateTime--2017年5月31日10:49:34 第二部分:提升篇 1 ...
- 【Linux】VMware上安装Linux操作系统
Vmware上安装Linux系统 1. 文件菜单选择新建虚拟机 2. 选择经典类型安装,下一步. 3. 选择稍后安装操作系统,下一步. 4. 选择Linux系统,版本选择CentOS 64位. 给虚拟 ...
- xcode9.2 objective-c install (mac 10.12.6)
1. xcode下载: https://download.developer.apple.com/Developer_Tools/Xcode_9.2/Xcode_9.2.xip 2. 点击默认安装即可 ...
- Android与JS进行交互传文件路径
webview+h5这种混合开发最近很火,其中最重要的大概就是java代码和js的交互了,刚接触这东西两天,写写收获. 新建一个assets文件夹,要与res这个文件夹同级,其中存放web项目. 先看 ...
- Python 实现字符串转换成列表 实现str转换list
其中Python strip() 方法用于移除字符串头尾指定的字符 split()就是将一个字符串分裂成多个字符串组成的列表 >>> image ='1.jsp,2.jsp,3.js ...
- WCF问题集锦:未依照DataMember定义的名称序列化对象
今遇到WCF序列化BUG,代码例如以下: /// <summary> /// 包括数据的返回对象 /// </summary> /// <typeparam name=& ...
- sdut Mountain Subsequences 2013年山东省第四届ACM大学生程序设计竞赛
Mountain Subsequences 题目描述 Coco is a beautiful ACMer girl living in a very beautiful mountain. There ...
- poj 3017 Cut the Sequence(单调队列优化 )
题目链接:http://poj.org/problem?id=3017 题意:给你一个长度为n的数列,要求把这个数列划分为任意块,每块的元素和小于m,使得所有块的最大值的和最小 分析:这题很快就能想到 ...
- freemarker和jsp的比较
1.共享变量 FreeMarker 的共享变量是我最喜欢的“隐藏”功能之一.此功能可以让你设置自动添加到所有模板的值. 例如,可以设置应用程序的名称作为共享变量. 1 2 Configuration ...