SPA 前端路由原理与实现方式

通常 SPA 中前端路由有2中实现方式,本文会简单快速总结这两种方法及其实现:

  1. 修改 url 中 Hash
  2. 利用 H5 中的 history

Hash

我们都知道 url 中可以带有一个 hash, 比如下面 url 中的 page2

https://www.abc.com/index.html#page2

window 对象中有一个事件是 onhashchange,以下几种情况都会触发这个事件:

  1. 直接更改浏览器地址,在最后面增加或改变#hash;
  2. 通过改变location.href或location.hash的值;
  3. 通过触发点击带锚点的链接;

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.html
console.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点:

  1. 当 pushState 执行一个浏览器的 url 会发生变化,而页面不会刷新,只有当触发的前进后退等事件浏览器才会刷新;
  2. 这里的 url 是受到同源策略限制的,防止恶意脚本模仿其他网站 url 用来欺骗用户。所以当违背同源策略时将会报错;
  3. 火狐目前会忽略 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');
});

最后,关于两种方法有一些比较重要的特性总结一下:

  1. 有的文章提到“Firfox,Chrome在页面首次打开时都不会触发popstate事件,但是safari会触发该事件”,经实测现在的 safari 不存在这个问题。
  2. Mozilla指出,在 popstate 事件中,e.originalEvent.state 属性是存在硬盘里的,触发该事件后读取的历史栈信息是通过 pushState 或 replaceState 写入的才会有值,否则改属性为 null。
  3. history.statee.originalEvent.state 异曲同工,而且前者可以在该事件之外任何地方随时使用。
  4. 由于 pushSate, onpopstate 属于 H5 的部分,存在一定兼容问题,可以使用 History.js (Github) 的 polyfill 解决这个问题。

SPA中前端路由基本原理与实现方式的更多相关文章

  1. SPA中,Node路由优先级高于React路由

    一.问题描述 在一场面试中,面试官问到了React和Node路由之间的关系. 现在SPA(单页面应用)的使用越来越广. Node(后台)和React(前端)都有自己的路由,当我页面访问一个URL的时候 ...

  2. 浅析使用vue-router实现前端路由的两种方式

    关于vue-router 由于最近的项目中一直在使用vue,所以前端路由方案也是使用的官方路由vue-router,之前在angularJS项目中也是用过UI-router,感觉大同小异,不过很显然v ...

  3. Web开发中 前端路由 实现的几种方式和适用场景

    http://blog.csdn.net/xllily_11/article/details/51820909

  4. django中url路由配置及渲染方式

    今天我们学习如何配置url.如何传参.如何命名.以及渲染的方式,内容大致有以下几个方面. 创建视图函数并访问 创建app django中url规则 捕获参数 路径转换器 正则表达式 额外参数 渲染方式 ...

  5. 简单的基于hash和hashchange的前端路由

    hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...

  6. JS高级学习笔记(9) 之 转:前端路由跳转基本原理

    原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...

  7. javascript基础修炼(6)——前端路由的基本原理

    [造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十几篇相关的文章.为已知的API方法自行编写实现,遇到自己无法复现的部分再有针对性地去查资料,最后当你再去学习官方 ...

  8. 前端hash路由基本原理,及代码的基本实现

    路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同. 早期的路由都是后端实现的,直接根据 url 来 reload 页面,页面变得越来越复杂服务器端压力变大,随着 ajax 的出现,页面实现非 ...

  9. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

随机推荐

  1. NOIP2002 过河卒(DFS,DP)

    https://www.luogu.org/problem/P1002 题目描述 如图,A 点有一个过河卒,需要走到目标 B 点.卒行走规则:可以向下.或者向右.同时在棋盘上的任一点有一个对方的马(如 ...

  2. MTSP问题

    问题描述:m个旅行商去旅游 n个城市,规定都必须从同一个出发点出发,而且返回原出发点,需要将所有的城市遍历完毕,每个城市只能游历一次,但是为了路径最短可以路过这个城市多次.这个就是多旅行商问题.是在T ...

  3. Qt HWND的句柄与QWidget的转换

    QT中用到HWND的句柄在编程中遇到了问题,第三方API用了hwnd类型做形参,但是QT中又没有该类型,可以做如下操作来解决问题. 在.h中先声明: HWND m_hWnd; 再声明 public: ...

  4. 西甲官方APP承认监听球迷,或给国内应用带来新思路

    在此前,一般巨头或者官方推出的产品.应用等总是值得信赖的.出问题的话一般都是"不可抗拒的外力因素",比如被黑客攻破导致用户隐私被窃取等.但自从Facebook的用户隐私泄露丑闻被曝 ...

  5. TZOJ-STL系列题

    C++实验:STL之vector #include <bits/stdc++.h> using namespace std; void Input(vector<int>&am ...

  6. Exchange Onine功能介绍

    Exchange Online是Office 365中提供的一个邮箱服务.Microsoft Exchange Online是将Microsoft Exchange Server功能作为基于云的服务提 ...

  7. Zabbix 监控sqlserver

    转:Zabbix 监控sqlserver 一:Zabbix监控sqlserver 方法一: 1.思路整理 1.在zabbix server上安装Freetds.unixODBC.unixODBC-de ...

  8. [LC] 161. One Edit Distance

    Given two strings s and t, determine if they are both one edit distance apart. Note: There are 3 pos ...

  9. 蓝桥杯-2016CC-卡片换位

    卡片换位 你玩过华容道的游戏吗?这是个类似的,但更简单的游戏.看下面 3 x 2 的格子 在其中放5张牌,其中A代表关羽,B代表张飞,* 代表士兵.还有一个格子是空着的. 你可以把一张牌移动到相邻的空 ...

  10. Redhat7 配置https

    Redhat7 配置https 分为自签名证书和第3方证书(此时实验为第3方,自签名略) 安装: # yum install httpd mod_ssl 生成key: # openssl genrsa ...