背景：

　　单页 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页面的更多相关文章

  1. SPA页面初试

    之前一直很好奇,SPA应用到底是怎么实现的,昨天无意间看到了有一篇介绍的文章,就想着来试一下水(以下根据我的理解所写,可能会让你看的云里雾里,如果想加深了解,最好先了解下window.location ...

  2. requirejs+angularjs搭建SPA页面应用

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...

  3. Html - SPA页面收集（有图）

    场景,左图,又字段的布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  4. SPA页面缓存再优化二

    部署到线上的步骤: 拿到打包之后的文件,删除服务器上的文件,再放上去的. 测试1: 更改js文件,删除并上传新包. 额外发现1:如果用户在上传期间,仍然在系统之内,此时即使将服务器上的包删除掉,用户不 ...

  5. SPA页面性能优化

    1. 快速启动 —— 极大提升加载速度(important) 快速启动应用,并行发起 Bundle 加载&拉取初始数据.相信大家已经发现了,SPA 初始化时候,不得不等待 bundle 返回并 ...

  6. 通过Blazor使用C#开发SPA单页面应用程序(2)

    今天我们尝试创建一个默认的Blazor应用. 1.安装 .Net Core 3.0需要Visual Studio 2019 的支持. 安装.Net Core 3.0 预览版 SDK版本,注意预览版对应 ...

  7. 基于puppeteer模拟登录抓取页面

    关于热图 在网站分析行业中,网站热图能够很好的反应用户在网站的操作行为,具体分析用户的喜好,对网站进行针对性的优化,一个热图的例子(来源于ptengine) 上图中能很清晰的看到用户关注点在那,我们不 ...

  8. [vue]spa单页开发及vue-router基础

    - 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...

  9. 进一步优化SPA的首屏打开速度（模块化与懒载入） by 嗡

    前言 单页应用的优点在于一次载入全部页面资源,利用本地计算能力渲染页面.提高页面切换速度与用户体验.但缺点在于全部页面资源将被一次性下载完,此时封装出来的静态资源包体积较大,使得第一次打开SPA页面时 ...

随机推荐

  1. C - A Plug for UNIX POJ - 1087 网络流

    You are in charge of setting up the press room for the inaugural meeting of the United Nations Inter ...

  2. 李婷华 201771010113 《面向对象程序设计（java）》 第三周学习总结

    第一部分:理论知识回顾 第一章 再次了解了java“白皮书”的关键术语,java的常见术语,对于“白皮书”的关键术语依然环游不太理解的. 第二章 在使用命令行工具运行java程序的过程中,依然会有环境 ...

  3. 【GISER&&规划】我这二三年

    从从参加工作到现在,已经接近三年了.在这不长不短的时间里,我的职业规划犹如正余弦函数一样变化,一直游离在前端和后端之间. 第一年入职,被安排维护和拓展一套基于JAVA实现的地图瓦片生产工艺程序,不算复 ...

  4. JVM垃圾回收器（三）

    垃圾回收知识点 引用计数 给对象添加一个引用计数器,每当一个地方引用这个对象,这个计算器就加1.如果引用失效,那计算器就减1.如果计算器数量为0,那这个对象就是失效的. 但是如果2个对象虽然不用了,但 ...

  5. JS字符串截取 “指定字符” 前面和后面的内容！

    JS字符串截取 “指定字符” 前面和后面的内容! var string= "07/12" var before = string.split('/')[0] var after = ...

  6. 在Qsys中创建用户自定义IP

    在SOC FPGA的设计中,必须使用Qsys软件才能将ARM和FPGA之间的接口引入到FPGA设计中.为了设计上的方便,客户经常希望将Qsys中的一些接口信号引入到FPGA顶层设计文件中.本文以Ava ...

  7. python3语法学习第五天--函数（1）

    函数:函数能提高应用的模块性,和代码的重复利用率,是一段可重复使用的代码块 自定义函数: 1.函数代码块以 def 关键词开头,后接函数标识符名称和圆括号 (). 2.任何传入参数和自变量必须放在圆括 ...

  8. SpringData:关联查询

    一.查询方式 1.导航式查询 使用“对象.属性”   进行查询:对于多的查询, 默认就是延迟加载,添加注解@Transactional 在OneToMany 注解中需要添加属性   fetch:值:F ...

  9. java-> 利用IO操作与递归实现目录的复制

    public class CopyDir { public static void main(String[] args) { copyDir(new File("d:\\a"), ...

  10. SpringBoot教程——检视阅读

    SpringBoot教程--检视阅读 参考 SpringBoot教程--一点--蓝本--springboot2.1.1 SpringBoot教程--易百--springboo2.0.5.RELEASE ...