SPA页面
背景:
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用,它将所有的活动均局限于一个Web页面中;这就表示Web应用被加载出来之后,Web中所有的交互和跳转均不会与服务器发生交互,而是使用JS转换HTML中的内容。
实现的原理:
1. 使用 hashchange 可以检测路由的变化情况
2. 使用 location.hash 路由,然后根据路由选择需要渲染的页面内容
SPA Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SPA Demo</title>
<style>
.box {
width: 300px;
height: 300px;
background: lightyellow;
margin: 0 auto;
}
.content {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
<button>下一页</button>
</div>
<script>
const renderHtml = (text) => {
let element = document.querySelector('.content')
element.innerHTML = text
}
const responseForPath = (path) => {
let mapper = {
'/0': `<h3>第一个界面</h3>`,
'/1': `<h3>第二个界面</h3>`,
'/2': `<h3>第三个界面</h3>`,
'/3': `<h3>第四个界面</h3>`,
}
if (path in mapper) {
return mapper[path]
} else {
return 'not found'
}
}
// 获取当前的路由,然后根据路由选择需要渲染的内容
const render = () => {
console.log(location.hash)
// 根据路由选择相应的内容
let r = responseForPath(location.hash.slice(1))
// 渲染内容
renderHtml(r)
}
const bindEvents = () => {
// 给当前窗口绑定 hashchange 事件
window.addEventListener('hashchange', (event) => {
render()
})
}
// 给按钮绑定事件,实现页面路由的更换
const buttonBindEvent = () => {
let ele = document.querySelector('button')
ele.addEventListener('click', (event) => {
let x = location.hash
// console.log(x)
if (x === '') {
location.hash = '/0'
} else {
console.log(x)
let temp = x.slice(2)
console.log(temp)
temp = (Number(temp) + 1) % 4
location.hash = `/${temp}`
}
})
}
const __main = () => {
bindEvents()
render()
buttonBindEvent()
} // DOMContentLoaded 事件表示 HTML 已经加载(渲染)到页面中, 这个时候操作 DOM 元素就没有问题
document.addEventListener('DOMContentLoaded', () => {
__main()
})
</script>
</body>
</html>
参考资料:
1. 如何快速开发SPA应用:https://www.cnblogs.com/constantince/p/5586851.html
SPA页面的更多相关文章
- SPA页面初试
之前一直很好奇,SPA应用到底是怎么实现的,昨天无意间看到了有一篇介绍的文章,就想着来试一下水(以下根据我的理解所写,可能会让你看的云里雾里,如果想加深了解,最好先了解下window.location ...
- requirejs+angularjs搭建SPA页面应用
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...
- Html - SPA页面收集(有图)
场景,左图,又字段的布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- SPA页面缓存再优化二
部署到线上的步骤: 拿到打包之后的文件,删除服务器上的文件,再放上去的. 测试1: 更改js文件,删除并上传新包. 额外发现1:如果用户在上传期间,仍然在系统之内,此时即使将服务器上的包删除掉,用户不 ...
- SPA页面性能优化
1. 快速启动 —— 极大提升加载速度(important) 快速启动应用,并行发起 Bundle 加载&拉取初始数据.相信大家已经发现了,SPA 初始化时候,不得不等待 bundle 返回并 ...
- 通过Blazor使用C#开发SPA单页面应用程序(2)
今天我们尝试创建一个默认的Blazor应用. 1.安装 .Net Core 3.0需要Visual Studio 2019 的支持. 安装.Net Core 3.0 预览版 SDK版本,注意预览版对应 ...
- 基于puppeteer模拟登录抓取页面
关于热图 在网站分析行业中,网站热图能够很好的反应用户在网站的操作行为,具体分析用户的喜好,对网站进行针对性的优化,一个热图的例子(来源于ptengine) 上图中能很清晰的看到用户关注点在那,我们不 ...
- [vue]spa单页开发及vue-router基础
- 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...
- 进一步优化SPA的首屏打开速度(模块化与懒载入) by 嗡
前言 单页应用的优点在于一次载入全部页面资源,利用本地计算能力渲染页面.提高页面切换速度与用户体验.但缺点在于全部页面资源将被一次性下载完,此时封装出来的静态资源包体积较大,使得第一次打开SPA页面时 ...
随机推荐
- 【Swift】获取UILabel中点击的某个功能标签文字并作出响应动作
1.需求 首先.针对UILabel中显示的多个功能标签,作出颜色标记提示. 其次.对关键字作出点击响应动作. 如图所示: 解决: 1.使用正则匹配到关键字 public static var hash ...
- Django 配置JWT认证方式
1. 安装 rest_framework + djangorestframework_simplejwt 安装djangorestframework_simplejwt :pip install dj ...
- 玩转FPGA边缘视觉——4k视频图像抓取
随着现代图像及视频处理技术的不断发展,人们对图像处理提出了新的要求,最近几年,图像的分辨率和扫描频率都有了较大范围的提升,1080P分辨率的视频已经非常流行,2K甚至4K分辨率的图像也在火热发展中. ...
- 【Kafka】配置文件说明
目录 server.properties producer.properties consumer.properties server.properties # broker的全局唯一编号,不能重复 ...
- dp规划之矩阵连乘问题
问题描述:给定n个矩阵{A1,A2,...,An},其中Ai与Ai+1是可乘的,我们要计算这n个矩阵的最少计算次数. 将多个矩阵连乘抽象为最后一次计算即两个矩阵相乘. public static v ...
- windows中的项目拷贝到linux中,部分数据不显示的原因
linux严格区分大小写,可能是数据表名大小写导致的. 如上传文件不成功,可能是系统权限导致的.
- Wfuzz使用学习
工具用了不总结,使用命令很容易生疏,今天就把笔记梳理总结一下. 0x01 简介 WFuzz是用于Python的Web应用程序安全性模糊工具和库.它基于一个简单的概念:它将给定有效负载的值替换对FUZZ ...
- Spring初学笔记(二):Bean的注入
关于Bean的注入 在上一篇中,已经说到虽然注入确实可以降低类与类之间的耦合,但并没有解决调用者必须知道类的创建方法的问题,也可以说是没有实现调用者与类实现的解耦,我们也提到,为了实现两者的解耦,可以 ...
- Java 集合排序策略接口 Comparator
1. 前言 最近用到了集合排序(基于 Java 8).现在我能用 Stream 的就用 Stream ,真香!排序可以这么写: List<People> peoples = new Arr ...
- Vue Element-UI使用第三方icon图标(转)
转载自:https://www.jianshu.com/p/59dd28f0b9c9 1.打开阿里icon,注册 >登录>图标管理>我的项目 2.新建项目 3. 添加icon到项 ...