背景：

　　单页 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. 惠普服务器ipmi配置方法

    个人感觉惠普ipmi搞的比戴尔的好 惠普的ipmi口在服务器上的端口名称叫ilo 1.开机按F8进入ilo. 注:按晚了,会进入磁盘阵列配置页面,开机画面显示出来ilo相关的信息之后就要按F8. 2. ...

  2. vue项目兼容ie

    一.兼容ES6 Vue 的核心框架 vuejs 本身,以及官方核心插件(VueRouter.Vuex等)均可以在 ie9 上正常使用.但ie不兼容es6,所以需要安装插件将“Promise”等高级语法 ...

  3. Oracle的pl/sql变量类型

    pl/sql定义 sql是结构化查询语言.sql是不是一个编程语言?编程语言一般都能够声明变量,写条件判断,循环.sql不具备这些特征,所有sql不是一门编程语言.我们在实际的开发中,有这种需要,把s ...

  4. LTE基站开局流程脚本的具体含义

    1.全局参数配置MOD ENODEB(修改基站): ENODEBID=2015(基站标识2015), NAME="安职-1"(基站名称), ENBTYPE=DBS3900_LTE( ...

  5. 异常： java.lang.ClassNotFoundException: org.springframework.web.util.IntrospectorCleanupListener

    如果出现这个错误信息,如果你的项目是Maven结构的,那么一般都是你的项目的Maven Dependencies没有添加到项目的编译路径下 解决办法: ①选中项目->右键Properties-& ...

  6. ssh暴力破解解决方案(Centos7更改端口)

    服务器默认ssh远程连接端口为22端口,通常通过22远程连接的话,容易有ssh暴力破解的风险,给我们造成一定的损失.下面是更换ssh端口过程: 1.添加ssh端口 vim /etc/ssh/sshd_ ...

  7. search（12）- elastic4s-聚合=桶+度量

    这篇我们介绍一下ES的聚合功能(aggregation).聚合是把索引数据可视化处理成可读有用数据的主要工具.聚合由bucket桶和metrics度量两部分组成. 所谓bucket就是SQL的GROU ...

  8. [csu1605]数独（精确覆盖问题）

    题意 :给定数独的某些初始值,规定每个格子的得分,求得分最大的数独的解. 思路:这是某年的noip的原题,高中时就写过,位运算也就是那个时候学会的--.这题明显是暴搜,但是需要注意两点,一是需要加一些 ...

  9. js 获取URL后面传的参数

    function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new O ...

  10. Linux中的vi编辑器使用

    总是忘记,我就谢谢 touch XXX文件名 vi XXX文件名 敲击 i 进入编辑模式 敲击ESC 退出编辑模式 退出编辑模式后 输入:wq!保存并退出 输入:q!不保存退出 查看文件:cat XX ...