本章内容将简单讲述一下 SPA 的相关知识,如有写的不好、错误遗漏的地方,还请海涵!本文将以以下几点讲述 SPA(单页面应用):
- 什么是 “ SPA ”
- SPA和MPA的区别 及 优缺点
- 实现一个SPA
一、什么是 “ 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
具体实际案例: 点击跳转