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

---

本章内容将简单讲述一下 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 点击跳转