SPA 中前端路由基本原理与实现方式
SPA 前端路由原理与实现方式
通常 SPA 中前端路由有2中实现方式,本文会简单快速总结这两种方法及其实现:
- 修改 url 中 Hash
- 利用 H5 中的 history
Hash
我们都知道 url 中可以带有一个 hash, 比如下面 url 中的 page2
https://www.abc.com/index.html#page2
window 对象中有一个事件是 onhashchange,以下几种情况都会触发这个事件:
- 直接更改浏览器地址,在最后面增加或改变#hash;
- 通过改变location.href或location.hash的值;
- 通过触发点击带锚点的链接;
4)浏览器前进后退可能导致hash的变化,前提是两个网页地址中的hash值不同。
这个事件有 2 个重要的属性:oldURL 和 newURL,分别表示点击前后的 url
<!-- 该页面路径为 https://www.abc.com/index.html --><a href="#page2">click me</a>
<script type="text/javascript">window.onhashchange = function(e){console.log(e.oldURL); //https://www.abc.com/index.htmlconsole.log(e.newURL); //https://www.abc.com/index.html#page2}
</script>
这样我们可以这样建立一个 DOM
<nav><a class="item active" href="#page1" data-target="#index">page1</a><a class="item" href="#page2" data-target="#info">page2</a><a class="item" href="#page3" data-target="#detail">page3</a><a class="item" href="#page4" data-target="#show">paga4</a><a class="item" href="#page5" data-target="#contact">paga5</a></nav><div class="container"><div class="page active" id="index"><h1>This is index page</h1></div><div class="page" id="info"><h1>This is info page</h1></div><div class="page" id="detail"><h1>This is detail page</h1></div><div class="page" id="show"><h1>This is show page</h1></div><div class="page" id="contact"><h1>This is contact page</h1></div></div>
为了好看我们加上 css, 比较重要的样式已经在代码里标出来了。
body{padding:0;margin: 0;
}
h1{margin: 0 0 0 160px;
}
nav{width: 150px;height: 150px;float: left;
}
nav a{display: block;background: #888;border: 1px solid #fff;border-top: none;width: 150px;font-size: 20px;line-height: 30px;text-align: center;color: #333;text-decoration: none;
}
.container{height: 154px;
}
/* page 部分比较重要*/
.page{display: none;
}
.page.active{display: block;
}
/* page 部分比较重要*/
nav a.active, .container{background: #ddd;border-right-color: #ddd;
}
重点是下面的 javascript,这里 DOM 操作我们借助 jQuery
var containers = $('.container');var links = $('.item');window.onhashchange = function(e){var currLink = $('[href="'+ location.hash + '"]').eq(0);var target = currLink.attr('data-target');currLink.addClass('active').siblings('a.item').removeClass('active');$(target).addClass('active').siblings('.page').removeClass('active');}
实现的逻辑不难,但是利用 hash 总是没有所谓前端路由的那种味,必然也不是主流方法。同样的效果如果需求简单不考虑兼容性的话,利用 css3 中 target 伪类就可以实现,这不是本文的重点,这里就不展开了。
history
作为一种主流方法,我们下面看看 history 如何实现。
history 其实浏览器历史栈的一个借口,去过只有 back()
, forward()
, 和 go()
方法实现堆栈跳转。到了 HTML5 , 提出了 pushState()
方法和 replaceState()
方法,这两个方法可以用来向历史栈中添加数据,就好像 url 变化了一样(过去只有 url 变化历史栈才会变化),这样就可以很好的模拟浏览历史和前进后退了。而现在的前端路由也是基于这个原理实现的。
这里我们先简单认识一下 history:
go(n) 方法接受一个整数参数, n大于0会发生前进 n 个历史栈页面; n小于0会后退 -n 个历史栈页面;
forward() 前进一个页面
back() 后退一个页面
- 以上三个方法会静默失败
pushSate(dataObj, title, url) 方法向历史栈中写入数据,其第一个参数是要写入的数据对象(不大于640kB),第二个参数是页面的 title, 第三个参数是 url (相对路径)。这里需要说明的有3点:
- 当 pushState 执行一个浏览器的 url 会发生变化,而页面不会刷新,只有当触发的前进后退等事件浏览器才会刷新;
- 这里的 url 是受到同源策略限制的,防止恶意脚本模仿其他网站 url 用来欺骗用户。所以当违背同源策略时将会报错;
- 火狐目前会忽略 title 参数
replaceState(dataObj, title, url) 这个和上一个的区别就在于它不是写入而是替换栈顶记录,其余和 pushState 一模一样
History 还有1个静态只读属性:
History.length:当然历史堆栈长度
- 还有的都是已经废除的老古董了,这里就不提了
了解了这么多,那么可以研究一下如何利用 history 实现一个前端路由了,这里只考虑 javascript 部分,css 部分和上文一致。这里我们修改部分 html:
<a class="item active" href="/page1.html" data-target="#index">page1</a>
<a class="item" href="/page2.html" data-target="#info">page2</a>
<a class="item" href="/page3.html" data-target="#detail">page3</a>
<a class="item" href="/page4/subpage1.html" data-target="#show">paga4-1</a>
<a class="item" href="/page5/subpage2.html" data-target="#contact">paga4-2</a>
我们修改了 a 标签的 href,这样的链接看上去才不是锚点了,不过这个过程我们要处理比较多的工作。首先为了简单一些,我们的这里仅仅对 .html
或没有扩展名结尾的链接设置前端路由:
// 通过委托的方法组织默认事件
var routerRxp = /\.html$|\/[^.]*$|/;
$(document).click(function(e){var href = e.target.getAttribute('href');if(href && routrRxp.test(href)){e.preventDefault();}
});
而后我们在点击时把数据写入历史栈,并控制 class 效果:
$(document).click(function(e){var href = e.target.getAttribute('href');if(href && routerRxp.test(href)){var id = e.target.getAttribute('data-target');history.pushState({targetId: id}, 'History demo', href);$(id).addClass('active').siblings('.page').removeClass('active');e.preventDefault();}
});
到这里,链接就可以点击了,但是浏览器的前进后退还不能用,我们加入 onpopstate 事件:
$(window).on('popstate',function(e){var id = e.originalEvent.state.targetId;$(id).addClass('active').siblings('.page').removeClass('active');
});
这样前进后退就可以用了,但是我们发现这样并不能退回主页,因为我们的主页默认就是 page1 标签页,所以没有为主页添加 state,简单处理就让其自己刷新好啦:
var indexPage = location.href;
$(window).on('popstate',function(e){if(location.href === indexPage){location.reload();}var id = e.originalEvent.state.targetId;$(id).addClass('active').siblings('.page').removeClass('active');
});
注意,这里不能使用重置 location.href 的方法刷新,那样就不能再前进了。
下面附上 history 方法的完整 js 代码
var indexPage = location.href;var routerRxp = /\.html$|\/[^.]*$|/;$(document).click(function(e){var href = e.target.getAttribute('href');if(href && routerRxp.test(href)){var id = e.target.getAttribute('data-target');history.pushState({targetId: id}, 'History demo', href);$(id).addClass('active').siblings('.page').removeClass('active');e.preventDefault();}});$(window).on('popstate',function(e){if(location.href === indexPage){location.reload();}var id = e.originalEvent.state.targetId;$(id).addClass('active').siblings('.page').removeClass('active');
});
最后,关于两种方法有一些比较重要的特性总结一下:
- 有的文章提到“Firfox,Chrome在页面首次打开时都不会触发popstate事件,但是safari会触发该事件”,经实测现在的 safari 不存在这个问题。
- Mozilla指出,在 popstate 事件中,
e.originalEvent.state
属性是存在硬盘里的,触发该事件后读取的历史栈信息是通过 pushState 或 replaceState 写入的才会有值,否则改属性为 null。 history.state
和e.originalEvent.state
异曲同工,而且前者可以在该事件之外任何地方随时使用。- 由于 pushSate, onpopstate 属于 H5 的部分,存在一定兼容问题,可以使用 History.js (Github) 的 polyfill 解决这个问题。
SPA 中前端路由基本原理与实现方式相关推荐
- 404 单页应用 报错 路由_详解vue 单页应用(spa)前端路由实现原理
写在前面:通常 SPA 中前端路由有2种实现方式: window.history location.hash 下面就来介绍下这两种方式具体怎么实现的 一.history 1.history基本介绍 w ...
- 令人惊叹的前端路由原理解析和实现方式
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂.想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理还 ...
- reactrouter监听路由变化_一篇文章搞懂前端路由原理解析和实现方式
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂. 想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理 ...
- react router 级联路由_前端路由原理解析和实现
作者:@whinc链接:https://github.com/whinc/blog/issues/13 在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大 ...
- 前端路由的概念与原理
前端路由router的概念与原理 1. 什么是路由 路由(英文:router)就是对应关系. 2. SPA 与前端路由 SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与 ...
- 简单的基于hash和hashchange的前端路由
hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...
- 前端路由工作原理与使用
单页应用和多页应用 单页面应用:所有功能在一个页面上实现 一个.html 文件 前端路由 组件化开发 网易云音乐 小米移动端 多页应用:与单页应用相对应的,不同的功能通过不同的页面来实现 单页面 - ...
- c语言实现路由功能,前端路由的两种实现方式,内附详细代码
一.前端路由介绍 前端路由主要应用在SPA(单页面开发)项目中.在无刷新的情况下,根据不同的URL来显示不同的组件或者内容. 前端路由的实现原理 : hash值 + onhashchange事件 hi ...
- javascript基础修炼——前端路由的基本原理
前端路由,顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果. [造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十 ...
最新文章
- 参加51CTO学院软考培训,通过后感想
- SQL Server:定时作业的设置方法
- CentOS7下查询硬件信息
- raid1 raid2 raid5 raid6 raid10的优缺点和做各自raid需要几块硬盘
- SDNU 1416.一元三次方程求解(数学)
- 分布式锁双重防死锁演进
- BootStrap 用法
- 未来经济会发展到什么程度?
- c#执行插入sql 时,报错:异常信息:超时时间已到。在操作完成之前超时时间已过或服务器未响应
- 简单实现x的n次方pta_数学学霸的解题思路1“降低次方和次元”
- FireEye:K3chang行动***欧洲外交部门
- Java Synchronized的用法
- windows基于vs2017的opencv安装
- RF射频技术-si4438C芯片介绍
- ramda 为 占位符 添加类型
- 大家快来看看,心中无女人,写文章自然神。
- 广东省清远市谷歌卫星地图下载
- 仓位管理之二: 凯利公式指导投资与多种资金管理方式
- 不同走法的象棋能否走完整个棋盘问题
- Python-OpenCV——Image Blurring(Image Smoothing)