原文
简书原文：https://www.jianshu.com/p/84323f530223前端
大纲
前言
一、什么是单页面应用程序（SPA）
二、SPA与传统Web应用的区别
三、关于SPA的使用
四、SPA的相关知识
五、服务器端通讯
六、单元测试
七、认识自动化工具程序员
前言
本篇博客以及以后的几篇关于SPA的博客是本人阅读过《SPA设计与架构》以后整理的知识，而且针对一些知识点也查找了相关博客，对其有必定的了解。而我也将我对SPA的认识和理解写出来，但愿对读者能有所帮助。若是有想要深刻了解关于SPA的设计理念的话，我的推荐能够去将整本书通读一下，这样会对如今的流行的框架有进一步的认识和理解。编程
一、什么是单页面应用程序（SPA）
一、SPA是一种Web开发方法，整个应用功能都存在于单个页面中。
二、在SPA应用中，应用加载以后就不会再有整页刷新。相反，展现逻辑预先加载，并有赖于内容Region（区域）中的视图切换来展现内容。
三、SPA客户端与服务器端实行异步通讯。经常使用的数据通讯格式为JSON文本格式。
四、MV*框架提供机制，让SPA应用绑定服务器端请求数据与视图（用户所见并与之交互）。
五、与依赖全局变量和函数不一样的是，SPA中的JavaScript代码经过模块来组织。模块提供了状态和/或数据封装。模块还有助于代码解耦及维护。
六、SPA的优点还包括类桌面应用的呈现效果、解耦的表现层、更快速轻量的符合、更少的用户等待时间以及更好的代码维护性等。json
二、SPA与传统Web应用的区别
SPA：无需刷新浏览器，将须要操做的DOM的变化放在浏览器中，若是页面须要变化的时候，由操做这些变化的JavaScript（已经加载于浏览器中的）来实现操做。
SPA实现的视图的刷新，是局部子容器（Region）的变化，而不是页面的从新加载，无重载页面是单页面应用程序的关键
一、无需刷新浏览器
二、表现逻辑位于客户端
三、服务器端事务处理设计模式
三、关于SPA的使用
3.一、使用模块模式
利用模块模式限制变量和函数做用域为模块自身。避开全局做用域相关的各类陷阱。
模块模式结合其余相关技术管理模块以及其依赖的可行方式，使得程序员可以借助页面构架方法来设计大型、健壮的Web应用程序。浏览器
3.二、SPA的路由选择
为了让用户掌握其导航位置，单页面应用程序一般会在设计中融入路由选择（Routing）的设计思路：接触MV*框架或第三方库的代码实现，将URL风格的路径与功能关联起来。路径一般看起来像相对URL，其充当用户导航时到达特定视图的触发因素。路由器能够动态更新浏览器URL，并容许用户使用前进和后退按钮。这就进一步强化了当屏幕某部分变化时会到达新位置的设计理念。服务器
3.三、SPA建立视图组成与布局
在单页面应用程序中，UI由视图而非新页面构成。内容Region的建立以及视图在这些Region中的位置，决定了应用程序的布局。客户端路由因为链接这些点。全部的这些要素有机结合起来就影响了应用程序的可用性和美感。架构
3.四、利用MV*框架实现SPA架构
一、SPA是一种架构理念，是不一样于传统Web实现的一种架构。传统式的Web架构是前端交互，经过请求服务器获取处理好的新的HTML文件从而进行页面的重载刷新，而SPA式的Web架构设计是用户体验倾向于原生软件开发式的，是让用户决定咱们用的就是一个原生开发式的程序应用，可是这个程序应用又不像软件同样须要下载，须要不断的更新，他就只是一个页面，经过路由器、AJAX等技术实现这样的用户体验的架构设计。
二、SPA只是一种架构理念，是想要达到的某种Web应用的体验。最终实现这样的程序应用须要用到的技术有不少，诸如路由器、AJAX、客户端自动化等等的技术。
三、MV框架就是集成了各类能够实现SPA架构理念的技术的程序集合，这些集合又体现了传统的MVC、MVP、MVVM等设计模式，可是又不局限于某种设计模式，是多种设计模式的集合体，所以咱们称之为MV框架。app
四、SPA的相关知识
4.一、MV*框架
基于SPA架构理念，不少框架应运而生，这些框架不一样程度上的支持了传统的MVC、MVP、MVVM等设计模式，经过各类不一样的技术，如路由器、AJAX实现了SPA架构理念的程序应用，而这些设计模式的框架能够统称为MV*框架。框架
4.二、路由器
传统Web应用中，每次刷新页面都是经过请求服务器，获取处处理好的HTML页面，进而刷新重载当前HTML页面。每次的URL的变化都会致使请求的发送，从而刷新页面，实现展现新的页面，显示新的功能的效果。
可是区别于传统Web应用，SPA架构理念的Web应用是不该该给人以页面跳转的那种效果的，URL的变化虽然一样会发送请求，可是请求的就再也不是整个HTML的页面，HTML页面的变化应该是由本地已经加载好的JS来实现的，而发送的请求只是为了数据的加载。
这样的URL的变化不一样于传统的URL变化以后产生的影响，所以须要经过路由器这样的技术实现，从而从传统的URL路由向客户端路由转变，从而实现单页面导航的效果
4.三、模块化编程
也许在MV*框架中的不少知识并非SPA架构理念应用的实现的最本质的技术，可是经过这些技术能够更好的实现SPA架构理念的Web应用，而模块化编程即是其中之一。
经过模块化编程，可让整个Web应用变成一个又一个功能模块，经过功能模块的调用从而实现某个视图的需求。经过URL的变化从而得知须要展现的视图，不一样的视图调用不一样的模块从而达到功能的实现，这就是模块化编程的意义，编写一个个功能模块，经过路由器的控制，进而经过js实现页面的变化，经过调用模块实现功能。
4.四、服务器端通讯
基于异步加载数据的服务器端通讯是实现SPA架构理念的Web应用重点之一，由于若是没有异步的实现，加载数据时程序应用停滞，那么给用户的体验就不可能和所谓原生的无缝对接相相似了
4.五、单元测试
单元测试是实现代码更优化的实现途径之一，经过单元测试能够将一些bug扼杀在最初的时候，避免以后代码功能实现，可是又因为bug的出现而不得不修改某块单元代码，进而又影响到整个功能块从而不得不重构整个代码
4.六、客户端自动化
客户端自动化能够简便程序开发中不少繁杂的工做，让开发更像一个工程的开发，更智能，更快捷
五、服务器端通讯
服务器端通讯的数据类型——互联网媒体类型
为了SPA应用客户端与服务器端间可以通讯，两端都须要有可以对上话的共同语言。首要任务就是决定发送与接收数据的类型
JSON是SPA应用程序与服务器端通讯时的经常使用格式(尽管数据类型能够是从纯文本到XML、文件的各类格式)
尽管使用JSON格式文本做为通用数据交换格式，但它只不过是系统原生对象的表述形式。要让文本能为我所用，两端都须要对其进行转换。
调用服务器端时，请求能够包括合适的互联网媒体类型(Internet Media Type,MIME)相关信息，由于资源可用于各类语言及媒体类型。以后服务端就能够相应其认为最合适的某个版本的请求资源。这叫作内容协商(Content Negotiation)。对于JSON，能够为数据交换显示声明一种application/json的互联网媒体类型。
六、单元测试
从广义上来讲，单元测试指在应用程序的最小可测部分上执行测试。此类测试是在开发阶段由开发人员执行的低层次测试。此外，无论测试主体是MV*对象仍是一个普通模块，单元测试一般都会对代码行为方式进行断言。
单元测试还能够经过它与其余类型测试的关系来表述。按照诸如范围、时间及规模的度量，一般用一个金字塔结构来描述不一样测试类型。因为单元测试的关注点和范围较窄、可以快速执行并易于管理，并且可以快速反馈结果，所以其处于金字塔底层。
七、认识自动化工具
在软件开发中，常常会发现本身再整个开发周期里不断重复某些任务。这些任务包括针对给定语言执行特定开发步骤、运行测试以及建立构建过程等。为了实现这些任务的自动化，许多基于任务的自动化工具（或Task Runner）纷纷涌现。 在现代Web应用程序中，如咱们的SPA应用程序，JavaScript专业人员须要的不只仅是一个构建工具。当代开发人员面临的现实至关繁杂，同时要求Task Runner可以自动化面向开发的大量任务。