框架hash/history实现简单原理
1.hahs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hash模式</title>
</head>
<body>
<a href="#/home">home</a>
<a href="#/about">about</a>
<div id="content">default</div>
<script>
window.addEventListener('hashchange', () => {
const content = document.getElementById('content')
// 路径匹配显示
window.location.hash === '#/home'
? (content.innerHTML = 'home')
: (content.innerHTML = 'about')
})
</script>
</body>
</html>
2.history
<!--
* @Description: 需要在在服务器访问(可以使用anywhere建立一个文件服务器,或者vscode插件Live Server),否则无效
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>history</title>
</head>
<body>
<a href="/home">home</a>
<a href="/about">about</a>
<button onclick="test()">test</button>
<button onclick="back()">back</button>
<div id="content">default</div>
<script>
function back() {
history.back()
}
function test(e) {
console.log(' ssss')
window.history.pushState({}, 'title', '/test')
}
const content = document.getElementById('content')
const aEls = document.getElementsByTagName('a')
;[...aEls].forEach(item => {
item.addEventListener('click', e => {
// 阻止默认跳转时间
e.preventDefault()
const href = item.getAttribute('href')
// 修改url
history.pushState({}, '', href)
// 修改显示内容
content.innerHTML = href
})
})
window.onpopstate = () => {
// 会导致循环 back => pop => back => pop
// history.back()
console.log('hist', history)
content.innerHTML = 'back'
}
let oldPushState = window.history.pushState
window.history.pushState = function (state, title, path) {
oldPushState.call(history, state, title, path)
window.onpushstate && window.onpushstate(state, title, path)
}
window.onpushstate = window.onpopstate = function (state, title, path) {
// back 的时候依然需要根据路径进行对应的渲染处理
content.innerHTML = location.pathname
}
</script>
</body>
</html>框架hash/history实现简单原理的更多相关文章
- Spring框架系列(2) - Spring简单例子引入Spring要点
上文中我们简单介绍了Spring和Spring Framework的组件,那么这些Spring Framework组件是如何配合工作的呢?本文主要承接上文,向你展示Spring Framework组件 ...
- Spring框架系列(13) - SpringMVC实现原理之DispatcherServlet的初始化过程
前文我们有了IOC的源码基础以及SpringMVC的基础,我们便可以进一步深入理解SpringMVC主要实现原理,包含DispatcherServlet的初始化过程和DispatcherServlet ...
- Spring框架系列(14) - SpringMVC实现原理之DispatcherServlet处理请求的过程
前文我们有了IOC的源码基础以及SpringMVC的基础,我们便可以进一步深入理解SpringMVC主要实现原理,包含DispatcherServlet的初始化过程和DispatcherServlet ...
- java中异常处理机制的简单原理
以上是自认为的java异常处理的简单原理,如有不妥之处还请各位大神帮忙指点,谢谢!
- Spring框架-IOC和AOP简单总结
参考博客: https://blog.csdn.net/qq_22583741/article/details/79589910 1.Spring框架是什么,为什么,怎么用 1.1 Spring框架是 ...
- [转帖]linux 清空history以及记录原理
linux 清空history以及记录原理 自己的linux 里面总是一堆 乱七八槽输错的命令 用这个办法 可以清空 linux的内容. 清爽一些. 1.当前session执行的命令,放置缓存中,执行 ...
- 研究一下Spark Hash Shuffle 和 SortShuffle 原理机制
研究一下Spark Hash Shuffle 和 SortShuffle 原理机制研究一下Spark Hash Shuffle 和 SortShuffle 原理机制研究一下Spark Hash Shu ...
- java——关于异常处理机制的简单原理和应用
异常处理机制的简单原理和应用 一.Execption可以分为java标准定义的异常和程序员自定义异常2种 (1)一种是当程序违反了java语规则的时候,JAVA虚拟机就会将发生的错误表示为一个异常.这 ...
- MUI框架-05-用MUI做一个简单App
MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...
- jQuery框架开发一个最简单的幻灯效果
在线演示 在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果. 立刻观看互动课程:jQuery框架开发一个最简单的幻灯效果 阅读原文:jQuery框架开发一个最简单的幻灯效果
随机推荐
- 微信小程序直播，腾讯云直播+微信小程序实现实时直播
一:小程序代码端 小程序直播使用小程序组件 live-pusher 组件和live-player组件 首先开通直播权限 小程序开发工具内进行推流拉流都不会成功,所以需要使用两个手机进行推拉流测试: 1 ...
- 本地锁 & 分布式锁
引子: 解决缓存击穿问题 synchronized (this){代码块} public synchronized Map<String,List<Catelog2Vo>> g ...
- vscode 格式化 vue 等文件的 配置 eslint vetur prettier Beautify
需求 自动格式化需求 多行回车 合并一行,去分号 最后一个逗号,自动删除,符合eslint 结果 虽然能用了,但是 百度好几个方案,也不知道哪个对哪个,太忙没时间弄了. 配置文件记录 eslint 得 ...
- manjaro安装微信deepin-wine-wechat后启动不了
直接将主目录下载的 .deepinwine 删除! 随后,点击图标,重新安装!
- PRD（产品需求文档）与SRS（软件需求规格说明书）的区别
需求分析是软件开发过程中很重要的一个环节,目前需求分析完成后输出的文档有2种体系,一个是SRS(Software Requirements Specification,软件需求规格说明书),一个是PR ...
- 说JS作用域，就不得不说说自执行函数
一个兜兜转转,从"北深"回到三线城市的小码农,热爱生活,热爱技术,在这里和大家分享一个技术人员的点点滴滴.欢迎大家关注我的微信公众号:果冻想 前言 不得不吐槽,学个JS,这个概念也 ...
- View之invalidate，requestLayout，postInvalidate
目录介绍 01.invalidate,requestLayout,postInvalidate区别 02.invalidate深入分析 03.postInvalidate深入分析 04.request ...
- Python爬虫实战系列4：天眼查公司工商信息采集
Python爬虫实战系列1:博客园cnblogs热门新闻采集 Python爬虫实战系列2:虎嗅网24小时热门新闻采集 Python爬虫实战系列3:今日BBNews编程新闻采集 Python爬虫实战系列 ...
- 记录--怎么实现一个3d翻书效果
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 本篇主要讨论以下两种翻书动画的实现: 第一种是整页翻转的效果: 这种整页翻转的效果主要是做rotateY的动画,并结合一些CSS的3d属性 ...
- KDE算法解析
核密度估计(Kernel Density Estimation, KDE)算法通过样本估计这些样本所属的概率密度函数,是non-parametric方法,也就是在进行估计时无需假设分布的具体形式.本文 ...