背景：

　　单页 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. Spring Cloud学习 之 Spring Cloud Ribbon（负载均衡器源码分析）

    文章目录 AbstractLoadBalancer: BaseLoadBalancer: DynamicServerListLoadBalancer: ServerList: ServerListUp ...

  2. node常用插件使用

    1.nodemon 用于热更新,随时监控文件的变化 安装npm i -g nodemon 使用nodemon index.js 2.nvm nvm用于nodejs版本管理,我们在开发过程中,不同的项目 ...

  3. 安卓集成Unity开发示例(一)

    本项目目的是在移动端的 Native App 中以库的形式集成已经写好的 Unity 工程,利用 Unity 游戏引擎便捷的开发手段进行跨平台开发. Unity官方文档 Unity as a Libr ...

  4. 基于ELK搭建MySQL日志平台的要点和常见错误

    第一部分 概括 ELK是集分布式数据存储.可视化查询和日志解析于一体的日志分析平台.ELK=elasticsearch+Logstash+kibana,三者各司其职,相互配合,共同完成日志的数据处理工 ...

  5. git工作中最常用的用法教程，不走命令行

    ·1.1 git的概述 Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理.  Git 是 Linus Torvalds 为了帮助管理 Lin ...

  6. extract变量覆盖

    0x01 extract变量覆盖 <?php $flag='xxx'; extract($_GET); if(isset($shiyan)) { $content=trim(file_get_c ...

  7. android 压缩图片大小，防止OOM

    android开发中,图片的处理是非常普遍的,经常是需要将用户选择的图片上传到服务器,但是现在手机的分辨率越来越好了,随便一张照片都是2M或以上,如果直接显示到ImageView中,是会出现OOM的, ...

  8. 基于hexo创建博客(Github托管)

    基于hexo的博客 搭建好的博客网站 dengshuo7412.com 搭建步骤 1.依赖文件下载 Node.js 2.Hexo的安装 3.部署到Github 4.Hexo创建博客基本操作 5.Hex ...

  9. java读取文件内容常见几种方式

    ①随机读取文件内容 ②以行为单位读取文件,常用于读面向行的格式化文件 ③以字符为单位读取文件,常用于读文本,数字等类型的文件 ④以字节为单位读取文件,常用于读二进制文件,如图片.声音.影像等文件 pa ...

  10. css中文字两端对齐兼容IE

    text-align: justify; text-justify:inter-ideograph;