前端路由以及浏览器回退,hash history location
一、前言
其实不止一次想监听浏览器的回退方法,比如
在 list.html 页滚动加载了几页列表,点到 detail.html 看详情,反回来时又得重新加载几页
H5 有背景音乐的,跳页就得重新放,体验实在不妙,等等
再其他就是体验上的优化了,虽然可以添加返回按钮,但手机的回退键还是很常用的。
再加上 ajax 的无刷新体验,单页面应用可谓是一大装逼利器。
二、前端路由的好处
(伪)换页面时还可以添加动画,丝滑流畅的操作体验实在不能更棒,另外相较后端路由,前端路由也算是减轻了服务区负荷...
也正基于此,根据不同 url 渲染不同视图这种路由的概念被提上台面,让渲染哪一个可以得到方便的管理。
三、前端路由的坏处
前端路由也是有利有弊,它的不足在于
1. 安全性,改改路由就能跳到某页面,肆意进入不同流程,想想还是有点瘆人的
2. 状态恢复,比如第一页添了表单,跳到第二页再返回,这些表单可能得清空之类的问题
四、实现前端路由
其实路由也就两步,实现 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
五、其他
1. 不是所有页面都需要改变 url,因为它会牵扯到回退
2. 浏览器的回退在体验上对前端是道比较难回答的题,比如回退两页,不返回登录/支付等
3. 在转场之间加上动画,当然要完成这效果就得使用 click 和 transitionEnd 等事件了
4. 状态控制,最便捷(并非最佳)的办法是全局一个对象去保存这些状态,每次进行判断和初始化操作
5. 当然如果你会 ReactJS 等模块化渲染的话,路由还可以更厉害
6. 还要比往常遇到更多优化上的问题,比如资源加载/数据更新/操作流畅度等
7. 梳理逻辑和确定状态,这些前期的事远比书写更重要,不然你会被改死的,讲真!
本文所提路由还太狭隘,毕竟路由是前后端都有的东西,url 也仅仅是指向某资源,所以它还会涵盖处理数据/数据传递等更多方面
六、总结
单页面应用(SPA)对前端的要求成倍增加,对开发者来说其实是好事,
有挑战进度会更快,不过和后端/策划的契合度也要相应提高才行。
转载于:https://www.cnblogs.com/foreverZ/p/6398704.html
前端路由以及浏览器回退,hash history location相关推荐
- 【前端路由】Vue-router 中hash模式和history模式的区别 a标签跳转
[前端路由]Vue-router 中hash模式和history模式的区别 咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个 ...
- 【前端路由】Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
- 单页面应用(SPA)前端路由hash 模式 VS history 模式
文章目录 单页面应用(SPA) 前端路由的由来 前端路由 hash 模式 history 模式 hash.history优缺点 单页面应用(SPA) 简单的说 SPA 就是一个WEB项目只有一个 HT ...
- javascript基础修炼——前端路由的基本原理
前端路由,顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果. [造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十 ...
- Vue学习杂记(八)——SPA模式和前端路由
SPA模式和前端路由 一.SPA模式介绍 二.前端路由工作原理 三.配置前端路由 三.路由的其他使用方式 四.动态路由与参数说明 五.导航卫士 一.SPA模式介绍 SPA(single pag ...
- 路由【前端路由和后端路由】(在这吹不出褶皱的平静日子,你也在闪闪发光)
1.路由:程序开发的路由顾名思义:分为前端路由和后端路由. 2.后端路由:常说的后端路由通过用户请求的url分布到具体的处理程序,服务器接受到之后,返回HTML页面或直接渲染HTNL模板 简单点来说: ...
- 前端路由(一) 路由,hash,history
从vue-router回溯相关原理和知识点 前端路由(二)hash实现路由示例 什么是路由 路由是URL解析对应的函数的映射 从用户的角度看: 记录当前页面状态,例如保存当前页的url再次打开url时 ...
- 前端路由之hash路由与history路由 Orz
什么是路由 路由这个概念最先是后端出现的.在以前用模板引擎开发页面时,经常会看到这样 http://hometown.xxx.edu.cn/bbs/forum.php 有时还会有带.asp或.html ...
- 前端路由hash和history
路由: 路由是根据不同的 url 地址展示不同的内容或页面. 后端路由 前端通过不同URL请求后端,后端框架有专门的路由模块用来匹配URL地址,然后根据不同地址和参数调用相关处理程序并返回html页面 ...
最新文章
- 黄煦涛教授逝世:获誉华人AI视觉鼻祖、一代宗师,完美家庭楷模
- python路径拼接问题
- 无论腾讯是自主开放还是被开放,我们都表示欢迎和支持
- 算法提高课-搜索-DFS之连通性模型-AcWing 1112. 迷宫:dfs和bfs两种解法
- 用 Hadoop 进行分布式并行编程, 第 1 部分 基本概念与安装部署
- CF809C Find a car
- 【经验】刚读硕士怎么感觉学机器学习和深度学习越学越不懂?
- php 整数转换为32 位,PHP哈希函数返回一个整数(32位int)(PHP hashing function that returns an integer (32bit int))...
- 使用xdebug+webgrind分析php性能
- 数据结构实验六 综合数据处理
- 利用swoole coroutine协程实现redis异步操作
- Hi3520d 网卡驱动源码分析
- VC++6.0下编译xvidcore1.1.0
- 遗传算法解决车辆路径问题
- 虚拟机ip、主机ip、代理ip
- 哈希值 是什么?哈希值是什么东西啊?具体怎么识别?怎么用?
- 打工人年终的自我犒赏,一人食火锅走起
- Maxcompute Sql性能调优(1)
- appium通过坐标定位元素
- Android文字跑马灯简单实现的三种方法
热门文章
- 网络推广外包——网络推广外包专员升级用户使用体验有方法
- 促使网站关键词排名稳定的技巧有哪些?
- java数据安全_java数据安全(一)
- 开发日记-20190605 关键词 读书笔记《鸟哥的Linux私房菜-基础学习篇》
- RCNN 目标识别基本原理
- TLS就是SSL的升级版+网络安全——一图看懂HTTPS建立过程——本质上就是引入第三方监管,web服务器需要先生成公钥和私钥,去CA申请,https通信时候浏览器会去CA校验CA证书的有效性...
- NumPy和Pandas常用库
- Iphone 安装 ppsspp
- ant-design圣诞彩蛋
- Linux防火墙命令