背景：

　　单页 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. 2018 USP-ICMC

    简单题 B D F L 中等难度题 E I 更难一点得题 A C G 难题 H K J B. Ugly Number 这个题目很简单,不过我的方法有点点小问题,不过可以改进一下就应该没什么问题了. 这 ...

  2. 自定义IDOC

    目录 1需求场景    4 2配置发送端IDOC    4 2.1定义段(WE31)    4 2.2定义基本类型(WE30)    4 2.3定义消息类型(WE81)    5 2.4定义传输结构  ...

  3. MATLAB1127（传递函数）

    sys=tf(400,[1,50,0]) sys = 400 ---------- s^2 + 50 s 其中,tf()函数的用法.   传递函数 dsys=c2d(sys,ts,'z') dsys ...

  4. [hdu5387 Clock]时钟夹角问题

    题意:给一个时刻,求时针.分钟.秒针三者之间的夹角 思路:确定参照点,求出三者的绝对夹角,然后用差来得到它们之间的夹角,钝角情况用360.减去就行了. #include <map> #in ...

  5. windows定时任务schtasks命令详细解

    SCHTASKS /Create [/S system [/U username [/P [password]]]] [/RU username [/RP password]] /SC schedul ...

  6. php-fpm搜索php.ini很奇怪的一个现象

    php-fpm 找不到 php.ini phpinfo 或者 php -i 上来看,搜索的目录都是/usr/local/php/etc下,但是事实上并没用去找这个目录 bin/php --ini 来看 ...

  7. React组件proptypes, ref

    一.使用props.children访问嵌套数据 import React from 'react'; class Button extends React.Component { render () ...

  8. class.getFields和class.getDeclareFields的区别

    class.getFields的定义 返回类提供的public域包括超类的共有变量; 注: 是public,我们平时定义变量一般用的private,如果用getFields是不会获得. class.g ...

  9. LinkedList详解-源码分析

    LinkedList详解-源码分析 LinkedList是List接口的第二个具体的实现类,第一个是ArrayList,前面一篇文章已经总结过了,下面我们来结合源码,学习LinkedList. 基于双 ...

  10. python3.x 基础四：目录获取及目录规范

    1.获取目录 import os,sys print('程序文件运行相对位置>>',os.path.abspath(__file__)) print('程序文件上级绝对目录>> ...