前端路由以及浏览器回退，hash & history & location

1、前言

其实不止一次想监听浏览器的回退方法，好比

在 list.html 页滚动加载了几页列表，点到 detail.html 看详情，反回来时又得从新加载几页

H5 有背景音乐的，跳页就得从新放，体验实在不妙，等等

再其余就是体验上的优化了，虽然能够添加返回按钮，但手机的回退键仍是很经常使用的。

再加上 ajax 的无刷新体验，单页面应用可谓是一大装逼利器。

 

2、前端路由的好处

(伪)换页面时还能够添加动画，丝滑流畅的操做体验实在不能更棒，另外相较后端路由，前端路由也算是减轻了服务区负荷...

也正基于此，根据不一样 url 渲染不一样视图这种路由的概念被提上台面，让渲染哪个能够获得方便的管理。

 

3、前端路由的坏处

前端路由也是有利有弊，它的不足在于

1. 安全性，改改路由就能跳到某页面，肆意进入不一样流程，想一想仍是有点瘆人的

2. 状态恢复，好比第一页添了表单，跳到第二页再返回，这些表单可能得清空之类的问题

 

4、实现前端路由

其实路由也就两步，实现 url 变化 & 捕捉变化进行不一样的页面逻辑

1. 改变 url

location api 的 reload / replace 方法，修改 href / hash / search 等属性等，

history api 的 back / go 方法，以及比较新的 pushState / replaceState 方法...

改变 url 的方式太多了，

须要注意的是哪些是会刷新页面的，哪些是会改 url 但不刷新页面的...

2. 捕捉 url 变化

主要得靠 window 的事件 hashchange 和 popstate

用 setInterval 持续监听（每 100ms 比较 oldUrl 和 nowUrl）也不是不能够，但你也懂得性能是个好东西

注意：pushState / replaceState 不会触发 popstate 事件，其余是否触发问题你能够继续尝试

3. 简单的实现与封装

易懂的封装：

function Router() {
    this.routes = {};
    window.addEventListener('load', this.resolve.bind(this), false);
    window.addEventListener('hashchange', this.resolve.bind(this), false);
}
Router.prototype.route = function(path, callback) {
    this.routes[path] = callback || function(){};
}
Router.prototype.resolve = function() {
    this.curHash = location.hash.slice(1) || '/';
    typeof this.routes[this.curHash] === 'function' && this.routes[this.curHash]();
}

简单的案例：

<ul>
    <li><a href="#blue">蓝色</a></li>
    <li><a href="#yellow">黄色</a></li>
</ul>
<ul>
    <li><a href="#red">红色</a></li>
</ul>

var router = new Router();
router.route('blue', function(){
    document.body.style.background = 'lightblue';
});
router.route('yellow', function(){
    document.body.style.background = 'yellow';
});
router.route('red', function(){
    document.body.style.background = 'red';
});

DEMO1: https://foreverz133.github.io/demos/single/router.html 

DEMO2: https://foreverz133.github.io/demos/single/history.html

 

5、其余

1. 不是全部页面都须要改变 url，由于它会牵扯到回退

2. 浏览器的回退在体验上对前端是道比较难回答的题，好比回退两页，不返回登陆/支付等

3. 在转场之间加上动画，固然要完成这效果就得使用 click 和 transitionEnd 等事件了

4. 状态控制，最便捷(并不是最佳)的办法是全局一个对象去保存这些状态，每次进行判断和初始化操做

5. 固然若是你会 ReactJS 等模块化渲染的话，路由还能够更厉害

6. 还要比往常遇到更多优化上的问题，好比资源加载/数据更新/操做流畅度等

7. 梳理逻辑和肯定状态，这些前期的事远比书写更重要，否则你会被改死的，讲真！

 

本文所提路由还太狭隘，毕竟路由是先后端都有的东西，url 也仅仅是指向某资源，因此它还会涵盖处理数据/数据传递等更多方面

 

6、总结

单页面应用(SPA)对前端的要求成倍增长，对开发者来讲实际上是好事，

有挑战进度会更快，不过和后端/策划的契合度也要相应提升才行。