背景：

　　单页 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. LDheatmap | SNP连锁不平衡图（LD）可视化，自己数据实现版！

    本文首发于“生信补给站”,https://mp.weixin.qq.com/s/Gl6BChxSYbSHMo9oMpufPg 连锁不平衡图,用来可视化不同SNP之间的连锁程度,前同事间俗称“倒三角”图 ...

  2. Go语言入门教程系列——函数、循环与分支

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是Golang专题的第四篇,这一篇文章将会介绍golang当中的函数.循环以及选择判断的具体用法. 函数 在之前的文章当中其实我们已经接 ...

  3. Centos7 使用 Ansible 批量安装中文字体

    需求背景 Centos7 下 Java 生成图片水印时中文乱码,原因是没有安装中文字体. 安装中文字体 以下是基于 Centos7 手动安装中文字体的详细步骤.当测试或者生产环境服务器比较多的时候,建 ...

  4. 如何写好、管好单元测试？基于Roslyn+CI分析单元测试，严控产品提测质量

    上一篇文章中,我们谈到了通过Roslyn进行代码分析,通过自定义代码扫描规则,将有问题的代码.不符合编码规则的代码扫描出来,禁止签入,提升团队的代码质量. .NET Core技术研究-通过Roslyn ...

  5. [hdu4300] next数组的应用

    题意:给你一个密文和明文的对应表以及一个密文+明文的字符串,明文可能只出现前面的一部分(也就是说是原明文的前缀),求最短的明文. 思路:首先密文的长度至少占到一半,所以先把那一半解密,问题转化为找一个 ...

  6. mysql5.7 derived_merge=on 影响你的查询了吗?

    衍生表的优化:合并 | 具化 一.mysql优化器对于衍生表的优化处理可以从两方面进行: 将衍生表合并到外部查询 将衍生表具化为内部临时表 1.示例 1: SELECT * FROM (SELECT ...

  7. 2018-07-01 jq效果

    jq效果的实现方法: 1.基本 show(time) -> 显示:相当于display:block hide(time) -> 隐藏:相当于display:none toggle(time ...

  8. 简单mysql存储过程

    直接上代码: CREATE DEFINER=`root`@`localhost` PROCEDURE `sos`( ) BEGIN -- 创建一个临时表 DROP TABLE IF EXISTS fi ...

  9. vim命令备份

    vim命令 vim键盘位置说明 在命令状态下对当前行用 == (连按=两次), 或对多行用 n==(n是自然数)表示自动缩进从当前行起的下面n行. 可以试试把代码缩进任意打乱再用 n== 排版,相当于 ...

  10. mysql小白系列_13 Online DDL

    Online DDL: 一.FIC之前的添加删除二级索引: 1.首先创建临时表,定义目标新表的选项和索引 2.逐行拷贝数据到临时表 3.插入行时更新索引信息 4.数据全部被拷贝到新表后,删除旧表,re ...