单页面应用(SPA)是指在浏览器中所运行 Web 应用的一种表现形式,它们在使用期间不会重新加载页面。

SPA-bg

传统的 Web 应用程序

在以往的 Web 应用程序使用过程中,许多用户频繁的操作都会在客户端重绘整张页面,重复的获取脚本,这其中包括(HTML,CSS,JS及重复请求的数据),导致浏览器从服务器获取数据时,页面会假死并有“闪烁”现象。

如果页面很大,服务器又繁忙,或者网络连接很慢,这种“闪烁”现象会持续好几秒钟甚至是更长时间,用户只得猜测页面什么时候才可以再次使用;这对现在以用户体验为导向的产品格局中,无非是最为致命的。

传统的 Web 架构

img

初识 SPA

单页面应用(SPA,single page web application),是指单个页面的 Web 应用,与传统的 Web 应用不同的是,所有的操作都在这张页面上完成,都由 JavaScript 来控制。

通俗的讲,在单页应用之前的开发可以归类成系统,而单页应用更像一个跑在浏览器端的 “APP”。

单页应用的架构

img

我们都知道,单页应用在一个页面上集成多种功能,甚至整个系统就只有入口一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上,而用户的操作会时刻的改变它的状态,这个状态可以是数据的状态,也可以是路由的状态。

spa-1

特点

用户体验:桌面应用的即时性和网站的可移植性和可访问性,可以说,单页应用的出现,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用户体验,再结合 HTML5 的离线存储的特性,使在浏览器端运行的应用程序,可以媲美手机 APP。

速度:更好的用户体验,让用户在web app感受 native app 的速度和流畅。

MVC:经典 MVC 开发模式,前后端人员各司其职,所谓的 MVC 的开发模式,让程序员更专注于自己的舒适区,更高效的开发,而所谓的 MVC 在单页应用中,主要有以下的分工模式,服务端的程序员减轻了工作,只做专职的数据提供商(M),而前端人员负责 VC 层,主导用户体验和交互设计方面。

Ajax:重前端,业务逻辑全部在本地操作,数据都需要通过 AJAX 同步、提交。

路由:在浏览器地址栏中采用 # 号来作为当前视图的地址,改变 # 号后的参数,页面并不会重载。

优点

  • 分离前后端关注点,前端负责界面显示,后端负责数据存储和计算,各司其职,不会把前后端的逻辑混杂在一起
  • 减轻服务器压力,服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍
  • 同一套后端程序代码,不用修改就可以用于Web界面、手机、平板等多种客户端

薄弱点

  • 初次加载耗时多
  • 框架学习曲线陡峭,可维护成本高,(需要相应的维护文档)
  • 团队经验水平不同时,不宜使用
  • SEO 问题,现在可以通过 Prerender 等技术解决一部分
  • 前进、后退、地址栏等,需要程序进行管理
  • 书签,需要程序来提供支持
  • 对代码抽象的能力要求高,否则适得其反

MVVM

早期 MVC 的开发模式,是为了更方便的统一管理页面上的事件、数据和视图内容,也可以认为是一种设计模式,其基本思路是将 DOM 交互的过程分为调用事件、获取数据、管理视图;

将之前所有的事件、数据、视图分别统一管理。用 Model 来存放数据请求和数据操作,视图来存放对视图的操作和改变,controller 用来管理各种事件绑定;

MVVM 概念可以认为是一个自动化的管理者,也这个时候进一步弱化了 Controller 层,任何操作都通过 viewModel 来驱动。

Controller 层最终在页面上的行为通过 Directives 的形式体现,通过对 Directives 的识别来注册事件,这样管理起来就更清晰了。

SPA 就鼓励视图、逻辑、数据分层。

对于单页应用来讲,有以下特点:

  • 可复用的 业务逻辑 模板 (JS、HTML)
  • 文件按需加载,提高性能
  • 极少代码量,完成较多的业务
  • 各组件间的通信

单页应用框架

适用场景

  • 构建基于数据操作较多的应用,例:后台管理系统(监控中心)
  • 随着业务改动小的项目
  • 企业级应用系统(重业务,轻视觉)

组件化

单页应用最合适使用组件化架构去构建项目,感兴趣可以阅读这篇文章 组件化架构漫谈

代码合并与加载策略

路由与状态的管理

渲染机制

缓存与本地存储

服务端通信

内存管理

编写中…