Vue系列(1):单页面应用程序
2019-08-06

前言:关于页面上的知识点,如有侵权,请看 这里 。

关键词: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#page2http://xxx.com/page1.htmlhttp://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 新手上路,大家一起加油鸭!