前端路由原理

对于前端路由应该都很熟悉了,开发过spa应用的应该都用过,只是很少人去查一下前端路由实现的原理。

前端路由的实现核心问题有两个,一个是改变url不刷新,另一个是监听url变化。主要靠的就是hash和history两个方式。

先看看hash,hash属性是url的锚部分,从#开始的部分,以前很多时候用来页面的锚点导航。hash改变,页面不会刷新。js也提供了hashchange事件用来监听urlhash的变化。

先看个效果:

代码:

<a href="#home">home</a>
<a href="#about">about</a>
<div id="app"></div>
window.addEventListener('hashchange', onHashChange);
onHashChange();
function onHashChange() {
  let router = document.getElementById('app');
  router.innerText = location.hash;
}

很简单,监听hash变化,然后做相应的操作。有一点要注意,通过浏览器前进后退、a标签、location这几种情况改变 url的hash 都会触发 hashchange 事件。还有,因为刷新hash是不变的,必须立马执行一次方法,一般监听DOMContentLoaded的时候去执行,我这边是直接执行了。

history实现就比较复杂一些,history提供了pushState和replaceState两个api,通过这两个方法改变url不会刷新页面。但是监听url变化的事件popstate,只能是浏览器前进后退。所以我们要通过其他方法实现监听。

效果:

代码:

<a href="/home">home</a>
<a href="/about">about</a>
<div id="app"></div>
window.addEventListener('popstate', popState);
var router = document.getElementById('app');
popState();
var aList = document.querySelectorAll('a[href]');
for(let i = 0;i < aList.length;i++){
  aList[i].addEventListener('click', function (ev) {
  ev.preventDefault();
  history.pushState(null, '', aList[i].getAttribute('href'))
  popState();
  })
}
function popState() {
  router.innerText = location.pathname;
}

pushState换成replaceState效果是一样的。这边通过监听a标签的点击事件,然后阻止默认事件实现a标签的路由。

其实前端路由实现的原理很简单,只是这最简单的实现在开发中并没什么用,我们还需要加很多方法,比如动态路由、路由传参、子路由等等。

最后附上一段代码:

var arr = []
for (i = 0; i < 10; i++) {
    arr.push(i)
}
console.time('for');
for (i = 0; i < arr.length; i++) {
}
console.timeEnd('for');
console.time('map');
arr.map(function () {
})
console.timeEnd('map');

本人比较喜欢用for,是因为之前看见一句:基于循环的迭代比基于函数的迭代快8倍,现在来说,0.几毫秒的性能其实可以不用考虑,在数量很少的时候差别并不明显,只是个人习惯。确实,那些基于函数的循环使用更方便更快捷。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js沙箱

    沙箱,英文是sandbox,敲程序的应该都听过,或许用过类似理念的只是自己不知道,简单说就是让你的程序运行在一个隔离的环境下,不对外界的其他程序造成影响。沙箱主...

    wade
  • 立即执行函数

    这两种格式都能保证函数立马执行,这也是立即函数的基础常见的格式,()运算符加上匿名函数,还有另外几种格式也能立即执行:

    wade
  • 初识闭包

    闭包,JavaScript语言一个很重要的点,可以说js库和各个框架百分百会用到闭包。那到底什么是闭包?闭包用来做什么?

    wade
  • Linux三剑客之grep简介

    grep,sed和awk被称之为linux三剑客,后面两个在文章中都写过一些,今天先简单写写grep这个命令。

    AsiaYe
  • 大型企业移动信息化 是谁让大象也翩翩起舞?

    企业移动信息化趋势不言而喻,移动设备的快速普及已经让移动办公成为工作新常态。来自CCW研究调查显示,2014年到2015年,企业移动信息化市场规模将从420亿元...

    人称T客
  • 2015年CIO更关注移动ERP 企业移动化从边缘走向核心建设

    上篇我们聊到移动OA已死,移动办公平台将成为企业信息化选型的重点,移动OA这个名词将逐步会淡出CIO的视野,取而代之的是移动办公平台和移动办公门户,而从今年数据...

    人称T客
  • 【聚焦】comScore:2015年网络营销和电子商务展望

    智能手机和平板采用量持续提高使得移动平台参与度急剧增长 ? 过去三年间数字参与度翻一番,主要是由于移动使用量的大规模增加,但是PC参...

    小莹莹
  • 外显子测序简介

    外显子测序,也叫做外显子捕获测序。首先利用序列捕获技术将外显子区域的DNA捕获并富集,然后进行高通量测序。外显子测序主用用来分析基因组上的变异位点,包括SNP和...

    生信修炼手册
  • 解决Pycharm 中遇到Unresolved reference 'sklearn'的问题

    在编程过程中,遇到很多错误,提示都是unresolved reference,在进行先关搜素后,从stackoverflow上的相关问题得到启发,具体步骤如下:

    砸漏
  • MIUI系统5大功能盘点,各个都很实用,竟然现在才知道

    今天我们来说说小米手机MIUI系统,如今MIUI系统已经升级到最新的MIUI10,功能越来越强大,UI设计也是越来越出色,是国内目前最主流的安卓系统之一。可能很...

    科技脑洞在线

扫码关注云+社区

领取腾讯云代金券