2024年前端最全SPA 中前端路由基本原理与实现方式，面试必知必会

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

This is info page

This is detail page

This is show page

This is contact page

为了好看我们加上 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:

page1

page2

page3

paga4-1

paga4-2

我们修改了 a 标签的 href，这样的链接看上去才不是锚点了，不过这个过程我们要处理比较多的工作。首先为了简单一些，我们的这里仅仅对 .html 或没有扩展名结尾的链接设置前端路由：

// 通过委托的方法组织默认事件

var routerRxp = /.htmlKaTeX parse error: Undefined control sequence: \/ at position 2: |\̲/̲[^.]*|/;

$(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’);

});

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。