框架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框架开发一个最简单的幻灯效果
随机推荐
- manjaroLinux-xfce4设置显示桌面快捷键
1.打开窗口快捷键 2.寻找显示桌面 3.设置快捷键 啊!简单的我都不想写了,这不是为让像以前的"我"--小白,食用性更好一点吗?
- Web Audio API 第1章 基础篇
Web Audio API 第1章 基础篇 我查了一下 Web Audio API 蝙蝠书居然在 2013 年就出版了 我又看了一下我的"豆瓣读书"频道内,这本书加入到" ...
- Eclipse之各个版本的区别
经常用到的是前五个版本: Eclipse IDE for Java EE Developers:是为J2EE开发的版本: Eclipse Classic:是Eclipse的经典版本,没有安装任何插件, ...
- ElasticSearch 准实时原理
Elasticsearch 是一个基于 Lucene 库的搜索引擎.它提供了一个准实时的.分布式.支持多租户的全文搜索引擎. ----维基百科 那么问题来了,为啥 Elasticsearch 不是实时 ...
- iOS模拟器 Unable to boot the Simulator —— Ficow笔记
本文首发于 Ficow Shen's Blog,原文地址: iOS模拟器 Unable to boot the Simulator -- Ficow笔记. 内容概览 前言 终结模拟器进程 命令行改权限 ...
- 不用写一行代码！Python最强自动化神器！
1.Playwright介绍 Playwright是一个由Microsoft开发的开源自动化测试工具,它可以用于测试Web应用程序.Playwright支持多种浏览器,包括Chrome.Firefox ...
- C# 二维码生成、识别
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- KingbaseES自动生成列介绍
在KingbaseES中create table语句支持GENERATED column(生成列). 生成列是一种特别的列类型,它的值基于其他列的值计算得出.因此,生成列之于列,有点像视图之于表的关系 ...
- Python正则表达式提取方法
- PyQt5 GUI编程(QMainWindow与QWidget模块结合使用)
一.简介 QWidget是所有用户界面对象的基类,而QMainWindow用于创建主应用程序窗口的类.它是QWidget的一个子类,提供了创建具有菜单栏.工具栏.状态栏等的主窗口所需的功能.上篇主要介 ...