前言：关于页面上的知识点，如有侵权，请看 这里 。
关键词：SPA、单个 HTML 文件、全靠 JS 操作、Virtual DOM、hash/history api 路由跳转、ajax 响应、按需加载、MVVM
SPA
我们先来看一下在百科上面的解释吧，emmmm，一般呢，我每次搜索一些不懂的词，都会习惯先去看百科里面的解释，反正我从来都不奢望能看懂，只是指望有个大概的框架的，哈哈~
“单页面应用（SPA：single-page application），就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的web应用程序。” -- from 百度百科
“单页应用（英语：single-page application，缩写 SPA）是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断用户体验，使应用程序更像一个桌面应用程序。在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面。尽管可以用位置散列或HTML5历史API来提供应用程序中单独逻辑页面的感知和导航能力，但页面在过程中的任何时间点都不会重新加载，也不会将控制转移到其他页面。与单页应用的交互通常涉及到与网页伺服器后端的动态通信。” -- from 维基百科
是不是云里雾里？
What：SPA是什么？
简单点~说话的方式简单点~
- 整个 webapp 只有单个HTML文件，所有操作都在这张页面上完成，由 js 来按需加载 HTML、CSS 和 JS
- 多个HTML页面文件的幻觉呢，都是通过 js 来操作 dom 节点来动态实现的（所以跳转到一个新页面实质上就是，删除本页面 dom 节点，新增新页面 dom 节点。从这里呢引出了一个虚拟 dom 的概念，这个以后会说到的）
- 不同页面之间的跳转幻觉呢，也是通过 js 控制 hash 或者 history api（go、back） 来进行路由 （这就是一个更加明确前后端分离的卖点了）
- 最后通过 ajax 拉取数据实现响应功能
特点：
- 速度：更好的用户体验，让用户在 webapp 感受到 native app 的速度和流畅
- MVVM：经典的 MVVM 开发模式，，前后端各负其责
- ajax：业务逻辑全部都在本地操作，数据都需要通过 ajax 同步提交
- 路由：在 URL 中采用 # 号来作为当前视图的地址（http://xxx.com/#/），改变 # 号后的参数来载入不同的页面片段。（页面并不会重载！）
优点：
- 分离前后端关注点，前端负责界面显示，包括页面跳转逻辑；后端则只负责数据管理（存储和计算），各司其职，不会把前后端的逻辑混杂在一起。
- 减轻服务器的压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力提高好几倍。
- 同一套后端程序代码/接口，可以多处复用，不仅是同一个应用不用修改就可以用于web界面、手机、平板等多种客户端，同时也可以复用在不同应用上。
缺点：
- SEO问题：对 SEO 不友好，但是可以通过 Prerender 等技术解决一部分
- 前进、后退、地址栏等，需要程序进行管理
- 书签，需要程序来进行控制
Why：为什么要用SPA？
SPA 与 MPA 的对比：
| 单页应用程序（SPA） | 多页应用程序（MPA） | |
|---|---|---|
SPA如图 : 
MPA如图 : |
||
| 应用组成 | 一个外壳页面和多个页面片段组成 | 由多个完整页面构成 |
| 跳转方式 | 片段跳转：把一个页面片段删除或者隐藏，加载另一个页面片段并显示出来。这是片段之间的模拟跳转，并没有离开壳页面 | 页面跳转：从一个页面跳转到另一个页面 |
| URL模式 | http://xxx.com/index.html#page1 http://xxx.com/index.html#page2 |
http://xxx.com/page1.html http://xxx.com/page2.html |
| 刷新方式 | 页面片段局部刷新 | 整页刷新 |
| 跳转后公共资源是否重载 | 否 | 是 |
| 页面间传递数据 | 因为在一个页面上，所以可以设置全局常量来记录这些固定的数据，所以页面片段传递数据很容易实现 | 依赖 URL, cookie, localStorage,实现麻烦 |
| 页面切换转场画面 | 容易实现 | 无法实现 |
| 用户体验 | 页面片段间切换快，转场画面佳，用户体验好，包括在移动设备上 | 页面间切换加载慢，不流畅，用户体验差，特别是在移动设备上 |
| SEO | 需要单独方案做，有点麻烦 | 可以直接做 |
| 特别适用范围 | 对体验要求高的应用，特别是移动应用 | 需要对搜索引擎友好的网站 |
| 开发难度 | 高一些，MVVM 模式框架 | 低一些，框架选择容易 |
| 维护成本 | 相对容易 | 相对复杂 |
How：怎么实现 SPA ？
MVVM框架： 诸如 AngularJS、Vue.js、React、Ember.js、Meteor.js、ExtJS 等面向网页浏览器的 JavaScript 框架采纳了单页应用（SPA）原则。
目前听到最多的还是前面的三大框架：Angular、Vue 和 React。
当然，本系列我们还是主要讨论Vue，而且我也还要一边巩固熟练使用 Vue ，一边 Angular 新手上路，大家一起加油鸭！
原文地址：https://www.cnblogs.com/chayin/p/9738686.html
时间： 2024-11-06 10:52:36