文章目录

一、什么是 “ SPA ”
- 含义
- 举个栗子
二、SPA和MPA的区别
- > 单页应用与多页应用的区别
- > 单页应用优缺点
实现一个SPA
- > 原理
- > 案例代码（仅供理解，无法运行）
- - hash 模式
  - history模式
参考文献

本章内容将简单讲述一下 SPA 的相关知识，如有写的不好、错误遗漏的地方，还请海涵！本文将以以下几点讲述 SPA（单页面应用）：

什么是 “ SPA ”
SPA和MPA的区别及优缺点
实现一个SPA

一、什么是 “ SPA ”

含义

SPA（single-page application），直译过来：就是单页应用程序。SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面。

举个栗子

来讲就是一个多功能煮锅，你想吃火锅的时候，可以用来煮火锅；想吃清蒸鱼，可以用来煮清蒸鱼。诸如此类，能够用一个不变的“ 容器 ” 装载不一样的内容，结构如下图：

我们熟知的 Javascript 框架如vue, react，angular, ember 都属于SPA。

二、SPA和MPA的区别

上个小节讲述了 “ 什么是SPA ” ，相信大致都能理解 SPA的意思了。下面来讲讲多页应用MPA（MultiPage-page application），翻译过来就是多页应用。

在MPA中，每个页面都是一个主页面，都是独立的当我们在访问另一个页面的时候，都需要重新加载html、css、js文件，公共文件则根据需求按需加载。 如下图：

> 单页应用与多页应用的区别

	SPA单页面应用	MPA 多页面应用
组成	一个主页面和多个页面片段	多个主页面
刷新方式	局部刷新	整页刷新
URL模式	哈希模式（`hash`）	历史模式（`history`）
SEO搜索引擎优化	难实现，可使用`SSR`方式改善	容易实现
数据传递	容易	通过`url`、`cookie`、`localStorage`等传递
页面切换	速度快，用户体验良好	切换加载资源，速度慢，用户体验差
维护成本	相对容易	相对复杂

> 单页应用优缺点

优点：

具有桌面应用的即时性、网站的可移植性和可访问性；
用户体验好、快，内容的改变不需要重新加载整个页面；
良好的前后端分离，分工更明确；

缺点：

不利于搜索引擎的抓取
首次渲染速度相对较慢

实现一个SPA

> 原理

监听地址栏中hash变化驱动界面变化，用pushsate记录浏览器的历史，驱动界面发送变化。

> 案例代码（仅供理解，无法运行）

hash 模式

核心通过监听url中的hash来进行路由跳转

// 定义 Router
class Router {  constructor () {  this.routes = {}; // 存放路由path及callback  this.currentUrl = '';  // 监听路由change调用相对应的路由回调  window.addEventListener('load', this.refresh, false);  window.addEventListener('hashchange', this.refresh, false);  }  route(path, callback){  this.routes[path] = callback;  }  push(path) {  this.routes[path] && this.routes[path]()  }
}  // 使用 router
window.miniRouter = new Router();
miniRouter.route('/', () => console.log('page1'))
miniRouter.route('/page2', () => console.log('page2'))  miniRouter.push('/') // page1
miniRouter.push('/page2') // page2

history模式

history 模式核心借用 HTML5 history api，api 提供了丰富的 router 相关属性，先了解以下几个 history api 常用API：

history.pushState 浏览器历史纪录添加记录；
history.replaceState 修改浏览器历史纪录中当前纪录；
history.popState 当 history 发生变化时触发；

// 定义 Router
class Router {  constructor () {  this.routes = {};  this.listerPopState()  }  init(path) {  history.replaceState({path: path}, null, path);  this.routes[path] && this.routes[path]();  }  route(path, callback){  this.routes[path] = callback;  }  push(path) {  history.pushState({path: path}, null, path);  this.routes[path] && this.routes[path]();  }  listerPopState () {  window.addEventListener('popstate' , e => {  const path = e.state && e.state.path;  this.routers[path] && this.routers[path]()  })  }
}  // 使用 Router  window.miniRouter = new Router();
miniRouter.route('/', ()=> console.log('page1'))
miniRouter.route('/page2', ()=> console.log('page2'))  // 跳转
miniRouter.push('/page2')  // page2

具体实际案例：点击跳转

参考文献

参考文献一：掘金SPA讲解点击跳转
参考文献二：如何快速开发SPA 点击跳转

＜谈谈对 SPA（单页面应用）的理解＞相关推荐

[vue] 说说你对SPA单页面的理解，它的优缺点分别是什么？
[vue] 说说你对SPA单页面的理解,它的优缺点分别是什么? 介绍:SPA应用就是一个web应用,可理解为:是一种只需要将单个页面加载到服务器之中的web应用程序.当浏览器向服务器发出第一个请求时, ...
（25）：SPA单页面的理解
对SPA单页面的理解,它的优缺点分别是什么,如何实现SPA应用一.什么是SPA 1.SPA(single-page application),翻译过来就是单页应用 2.SPA是一种网络应用程序或网站 ...
通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design
通过Blazor使用C#开发SPA单页面应用程序(1) 通过Blazor使用C#开发SPA单页面应用程序(2) 通过Blazor使用C#开发SPA单页面应用程序(3) 前面学习了Blazor的特点.环 ...
[vue] SPA单页面的实现方式有哪些？
[vue] SPA单页面的实现方式有哪些? 1.监听地址栏中hash变化驱动界面变化2.用pushsate记录浏览器的历史,驱动界面发送变化3.直接在界面用普通事件驱动界面变化它们都是遵循同一种原则: ...
SPA单页面应用首屏加载速度提升方法
SPA单页面应用首屏加载速度提升方法首屏加载计算首屏加载时间公式解决方法减少入口文件体积静态资源本地缓存 UI框架按需加载避免组件重复打包图片资源压缩开启GZip压缩首屏加载首屏加 ...
spa单页面应用html缓存问题
一.背景浏览器的http请求都有一个缓存机制,简单点说就是同路径同名文件会默认被缓存下来,提升下次访问时的速度,默认只有刷新页面或长时间未访问时才会刷新缓存. 而spa单页面应用是通过路由切换来访问 ...
Java快速开发平台，JEECG 3.7.5 Vue SPA单页面应用版本发布
JEECG 3.7.5 Vue SPA单页面应用版本发布导读 ⊙ Vue+ElementUI SPA单页面应用 ⊙Datagrid标签快速切换BootstrapTable列表风 ...
当spa单页面应用遇上SEO，蛋痛的经历
spa单页面应用优点当然毋庸置疑:效果酷炫,我在视觉和产品面前无从反驳:性能高速度快,全JS嘛当然快,我在运维和产品面前无言以对:运算分散,异步加载,又省硬件又省流量,我在开发和产品面前彻底投降:JS ...
通过Blazor使用C#开发SPA单页面应用程序(1)
2019年9月23--25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Co ...
SPA(单页面应用)和MPA(多页面应用)
单页面应用第一次进入页面时会请求一个html文件,刷新清除一下,切换到其他组件,此时路径也相应变化,但是并没有新的html文件请求,页面内容却变化了. 原理:js会感知到url的变化,通过这一点可以 ...

＜谈谈对 SPA（单页面应用）的理解＞

文章目录

一、什么是 “ SPA ”

含义

举个栗子

二、SPA和MPA的区别

> 单页应用与多页应用的区别

> 单页应用优缺点

实现一个SPA

> 原理

> 案例代码（仅供理解，无法运行）

hash 模式

history模式

参考文献

＜谈谈对 SPA（单页面应用）的理解＞相关推荐

最新文章

热门文章

＜ 谈谈对 SPA（单页面应用）的理解 ＞

文章目录

一、什么是 “ SPA ”

含义

举个栗子

二、SPA和MPA的区别

> 单页应用与多页应用的区别

> 单页应用优缺点

实现一个SPA

> 原理

> 案例代码（仅供理解，无法运行）

hash 模式

history模式

参考文献

＜ 谈谈对 SPA（单页面应用）的理解 ＞相关推荐

最新文章

热门文章

＜谈谈对 SPA（单页面应用）的理解＞

＜谈谈对 SPA（单页面应用）的理解＞相关推荐