写点什么

造轮子——前端路由

  • 2020-04-03
  • 本文字数:2036 字

    阅读完需:约 7 分钟

造轮子——前端路由

前端路由

现代前端开发中最流行的页面模型,莫过于 SPA 单页应用架构。单页面应用指的是应用只有一个主页面,通过动态替换 DOM 内容并同步修改 url 地址,来模拟多页应用的效果,切换页面的功能直接由前台脚本来完成,而不是由后端渲染完毕后前端只负责显示。前端三驾马车 Angular,Vue,React 均基于此模型来运行的。SPA 能够以模拟多页面应用的效果,归功于其前端路由机制。


前端路由,顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果。angularjs 中的 ui-router,vue 中的 vue-router,以及 react 的 react-router 均是对这种功能的具体实现。


既然前端路由这么牛逼,那必须的好好研究一下。

两种实现方式及其原理

常见的路由插件中两种方式都是支持且可以切换的,例如 angularjs1.x 中就可以通过以下代码从 Hash 模式切换到 H5 模式:


$locationProvider.html5Mode(true);


切换到 HTML5 的路由模式,主要用于避免 url 地址中包含 #而引发的问题。


HashChange


  • 原理

  • HTML 页面中通过锚点定位原理可进行无刷新跳转,触发后 url 地址中会多出 # + 'XXX’的部分,同时在全局的 window 对象上触发 hashChange 事件,这样在页面锚点哈希改变为某个预设值的时候,通过代码触发对应的页面 DOM 改变,就可以实现基本的路由了,基于锚点哈希的路由比较直观,也是一般前端路由插件中最常用的方式。

  • 应用

  • 下面通过一个实例看一下,当点击 angularjs 的连接时,可以看到控制台打印出了相应的信息。




HTML5 HistoryAPI


  • 原理

  • HTML5 的 History API 为浏览器的全局 history 对象增加的扩展方法。一般用来解决 ajax 请求无法通过回退按钮回到请求前状态的问题。


在 HTML4 中,已经支持 window.history 对象来控制页面历史记录跳转,常用的方法包括:


history.forward(); //在历史记录中前进一步history.back(); //在历史记录中后退一步history.go(n): //在历史记录中跳转n步骤,n=0为刷新本页,n=-1为后退一页。
在HTML5中,window.history对象得到了扩展,新增的API包括:history.pushState(data[,title][,url]);//向历史记录中追加一条记录history.replaceState(data[,title][,url]);//替换当前页在历史记录中的信息。history.state;//是一个属性,可以得到当前页的state信息。window.onpopstate;//是一个事件,在点击浏览器后退按钮或js调用forward()、back()、go()时触发。回调函数中可传入一个event对象,event.state即为通过pushState()或replaceState()方法传入的data参数。
复制代码


  • 应用

  • 浏览器访问一个页面时,当前地址的状态信息会被压入历史栈,当调用 history.pushState()方法向历史栈中压入一个新的 state 后,历史栈顶部的指针是指向新的 state 的。可以将其作用简单理解为假装已经修改了 url 地址并进行了跳转 ,除非用户点击了浏览器的前进,回退,或是显式调用 HTML4 中的操作历史栈的方法,否则不会触发全局的 popstate 事件。


在下面的示例中,点击导航按钮,可以看到 url 地址栏发生了变化,且控制台打印出了响应的信息。




hash 和 history API 对比


亲手造一个简单的前端路由插件

造轮子,不是为了把它装在你的车上,而是当你在荒郊野外开车而轮子出了问题时多一种选择。


接下来就自己动手实现一个前端路由的插件吧~


  • 基于 Hash 的前端路由插件 myHashRouter.js


我们希望实现的功能是:


1.引入 MyHashRouter.js 库


2.通过 when()方法来定义若干不同的路由状态


3.通过 init()方法启动路由功能


4.通过点击导航实现前端路由切换


首先编写 js 骨架,如下所示:



完成了路由插件的编写后,我们在 demo 中引入该库,然后使用 when()方法注册几个路由地址,再使用 init()方法启动路由,脚本部分代码如下:



效果:运行附件中的 router-demo-hash.html,点击导航按钮,即可看到 url 地址栏以及内容区域同步更改。


  • 基于 History API 的前端路由插件 myHistoryRouter.js

  • 由于 History API 不支持低于 IE10 以下版本的浏览器(其他大多数现代浏览器基本都支持),所以我们在 init()方法启动时先进行可用性判断,基本代码框架与基于 Hash 的路由插件一致。每个方法的实现并不难写,这里不再赘述,笔者自己的代码实现放在附件 myHistoryRouter.js 中,水平有限,仅供参考。


效果:



  • 集成说明

  • 为方便理解,本例中将两种模式分开编写,如果是插件库的开发,可以模仿 ui-router 增加一个 html5mode()的方法,在 init()方法启动路由时,根据所传的参数生成不同的路由插件的单例,也就是我们常说的工厂模式来实现即可。

后记

造车轮是一个很好的学习方式,虽然自己造的车轮很简陋,但是对于理解工具的底层原理却很有帮助。


本例只是编写了一个路由工具的基本骨架,真正的路由工具还需要做很多功能扩展,个别功能的复杂度也会很高,例如路径的正则匹配,懒加载,组合视图,嵌套视图,路由动画等等,有兴趣的小伙伴可以在本例提供的框架上进行学习扩展。

附件

myHashRouter.js 源码:



本文转载自华为云产品与解决方案公众号。


原文链接:https://mp.weixin.qq.com/s/tsKI3s9G7lSwH0QwyGBgWA


2020-04-03 17:18956

评论

发布
暂无评论
发现更多内容

阿里云:城市大脑数据智能解决方案

不脱发的程序猿

大数据 阿里云 城市大脑 数据智能解决方案 4月日更

一周信创舆情观察(3.22~3.28)

统小信uos

EGG NETWORK阿凡提以“自由匿名竞价”流通市场EFTalk

币圈那点事

区块链电子印章签约平台的搭建,区块链电子签约解决方案

13828808769

区块链 #区块链#

Redis-技术专题-数据日志持久化

码界西柚

redis 持久化 aof rdb

有了人工智能技术,告警管理会发生什么变化?

睿象云

人工智能 事件管理

需求分析是什么?

Simon

架构实战营

答题拿奖两不误:华为云知乎金牌答题官,就是你!

华为云开发者联盟

程序员 华为云 知乎答题 答案 金牌答题官

大厂面试必问!Android彻底组件化方案实践方法!面试总结

欢喜学安卓

android 程序员 面试 移动开发

【LeetCode】笨阶乘Java题解

Albert

算法 LeetCode 4月日更

量化策略系统搭建,马丁策略交易软件

gorm源码阅读之callback

werbenhu

Go 语言 gorm

Redis 期中测试

escray

redis 学习 极客时间 Redis 核心技术与实战 4月日更

4K Video Downloader V6.1.50 版本正式发布

科技猫

产品 软件 行业资讯 开发日志 发布

LiteOS内核源码分析:任务栈信息

华为云开发者联盟

LiteOS 任务栈 栈指针 LOS_StackInfo LOS_Task

微众银行区块链开源基于Rust的Wasm合约语言框架Liquid

Patract

智能合约 rust polkadot Patract Wasm

RTC技术干货 | 音频质量评价体系那些事

拍乐云Pano

音视频 WebRTC RTC 3A算法 音频

区块链电子合同签署平台搭建,区块链电子存证解决方案

13828808769

区块链+ #区块链#

DevEco Studio 2.1 Beta3强势来袭

Geek_283163

华为 鸿蒙 开发

4月日更挑战|初夏开更,新人领书

InfoQ写作社区官方

4月日更 热门活动

一文掌握GaussDB(DWS) SQL进阶技能:全文检索

华为云开发者联盟

sql 全文检索 华为云 GaussDB(DWS) 字段

无人驾驶平台,让IT没有难做的测试

鲸品堂

方法论 无人驾驶

年纪轻轻,为什么要搞中间件开发?“路怎么走,让你们自己挑”

小傅哥

Java 分布式 小傅哥 中间件 架构设计

安卓开发从零开始!分析Android未来几年的发展前景,安卓系列学习进阶视频

欢喜学安卓

android 程序员 面试 移动开发

公安合作作战指挥中心,情报分析研判系统建设

有道云笔记新版编辑器架构设计(下)

有道技术团队

架构 大前端

Apache Flink Meetup · 上海站,超强数据湖干货等你!

Apache Flink

flink 数据湖 iceberg

FloydHub 2020年最佳机器学习书籍之一《可解释机器学习》中文版来啦!

博文视点Broadview

大厂面试必须掌握的 Linux 性能优化题

倪朋飞

Linux 面试 性能优化

Java-技术专题-Synchronized锁的分析

码界西柚

Java synchronized

节能降耗——搭建绿色IDC能耗与管控系统

一只数据鲸鱼

物联网 数据中心 数据可视化 IDC 机房管理

造轮子——前端路由_文化 & 方法_华为云产品与解决方案_InfoQ精选文章