基于原生JS的单页Web应用的架构设计

施莹

[摘           要]  精心编写的单页Web应用具有互动和快速响应的界面，还伴有访问网络的功能。在很长一段时间内，Flash和Java都是客户端平台上使用最为广泛的单页Web应用，因为它们的功能、速度和一致性，都超过了那些使用JavaScript（JS）和浏览器来渲染的应用。但是最近，JS和浏览器渲染达到了一个引爆点，它们克服了最大的缺陷，比其他客户端平台具有显著优势。关注使用原生的JS和浏览器渲染来构建单页Web应用，并提供一个基于常见JS技术架构单页应用的解决方案。

[关    键   词]  单页Web应用;JavaScript;浏览器;架构设计

[中图分类号]  TP393                    [文献标志码]  A                    [文章编号]  2096-0603（2019）36-0266-02

流行的MVC框架关注的是为客户端提供一页页的静态内容，这是传统网站慢的原因之一。例如，当浏览者在某个传统网站上点击链接时，页面会“闪白”，过几秒钟后所有的东西都会重新加载：导航条、广告、标题、文本和文档底部都会重新渲染，唯一改变的东西只是一些图片或描述性文字。这些旋转图标所消耗的时间成本是惊人的。更糟糕的是，当页面中的某些元素可用的时候，却没有任何提示。对经验越来越丰富的Web浏览者来说，这种迟钝的、不一致的体验就变得难以接受。

单页Web应用（Single Page Web Application，SPA）是目前网站开发技术的热点，是另一种更好的开发Web应用的方法。很多传统网站都在或者已经转型为单页Web应用，新的单页Web应用网站（包括移动平台上的）也大量涌现，如Gmail、Coding、Cloud9等。

一、单页Web应用

单页Web应用是只有一张Web页面的应用，它就是浏览器中运行的桌面应用，在使用期间页面不会重新加载。它适合放在单个可滚动网页上的Web应用程序或网站，它们会动态地加载合适的内容来响应用户操作。它们支持在单个页面上与多个组件进行丰富的交互，具有快速响应的体验。

单页Web应用像所有的应用一样，旨在帮助用户完成任务，比如“编写内容”或者“管理Web服务器”。可以认为单页Web应用是一种从Web服务器加载的富客户端。

二、原生的JavaScript单页应用

JavaScript（JS）经过很长一段时间的发展，它的大部分缺点被缓解了，它的价值优势也水涨船高，目前已成为全球最热门的编程语言之一。JS具有部署简单、支持跨平台开发、运行速度快等优点，尤其适用于绝大多数的单页Web应用。在超过数十亿计的支持现代Web浏览器的设备上，都能见到基于JS的单页应用，并且不需要专有的插件。只要稍许多做点工作，它就可以支持运行很多不同操作系统的各种设备。

原生的JavaScript单页Web应用，从前端到后端都使用JavaScript来开发，业务和显示逻辑皆使用JavaScript来编写，由浏览器执行，如图1所示。JavaScript利用浏览器技术来渲染界面，如HTML5、CSS3、Canvas或者SVG，从而构建具有吸引力的、稳健的、可扩展的和易于维护的单页Web应用。

三、单页Web应用的架构设计

相较于传统网站，单页Web应用最主要的变革发生在浏览器端，浏览器一开始会加载必需的HTML、CSS、JavaScript，之后所有的操作都在这张页面上完成，这一切都由JavaScript来控制。因此，单页Web应用会包含大量的JavaScript代码，复杂度可想而知，模块化开发和架构设计的重要性不言而喻。

單页Web应用可以使用许多服务器技术，但如果将Web应用转移到了浏览器端，对服务器的要求就大大降低了。图2展示了单页Web应用中数据库、服务器、客户端（浏览器）的三层分工，与传统网站相比，业务逻辑和HTML的生成从服务器迁移到了客户端（浏览器）。

（一）客户端

在客户端（浏览器），使用用来操作DOM的jQuery，包括历史管理和事件处理的插件，同时使用TaffyDB2来提供高性能的、以数据为中心的模型，使用Socket.IO提供在服务端和客户端之间无缝的、近实时的消息传输。随着单页Web应用的崛起，各种JavaScript框架也层出不穷，如Backbon.js，Ember.js，Angular.js等，还有RequireJS等模块加载器。但是各个框架有其自身的限制，一旦不符合框架本身的设计哲学，结果可能适得其反。不管是否使用框架库，单页Web应用的设计思想都是适用的。

（二）Web服务器端

单页Web应用服务器最常见的职责是认证与授权、数据验证和数据的存储与同步。在服务器端，使用Node.js作为基于事件的Web服务器，Node.js使用Google V8 JavaScript引擎，擅长处理成千上万的并发连接。在Web服务器上也使用了Socket.IO，这样可以实现在客户端和服务器之间快速响应和轻量的全双工通信。由于单页Web应用的大多数代码都在客户端，后端可以用任何语言编写，只要它能很好地满足应用的要求即可。后端使用JavaScript编写，可以使编程环境保持一致，并能简化全栈开发。

（三）数据库

使用数据库服务器，为数据提供可靠的持久存储。数据库要放在服务端，因为客户端的数据存储是临时的，且容易发生应用错误、用户错误或篡改用户。在数据库端，可使用MongoDB数据库，它是一种NoSQL数据库，使用JSON来保存数据和通信，包含JavaScript API和命令行接口。JSON是一種JavaScript原生的数据格式，客户端使用的也是相同的数据格式。

当然，单页Web应用可以使用很多其他的服务端和数据库技术，可以不选择JavaScript这种方式，不管后端使用的是什么技术，大部分单页Web应用的架构思想和开发技术都是相通的。

四、原生的JavaScript单页应用优缺点分析

（一）优点

单页Web应用具有桌面应用的即时性，也同时具有网站的可移植性和可访问性。单页Web应用的最主要的优点是：它提供了更加吸引人的用户体验。

1.使用单一的JavaScript语言

在整个开发过程中，使用的语言是JavaScript，使用的数据格式是JSON，使用了单一的语言，这就提供了在客户端和服务器之间移动并共享代码的机会，大大减少了代码的体积和复杂度，同时节省了开发人员的时间，避免了混乱，因为几乎没有了语言和数据格式之间的环境切换。

2.单页Web应用可以和桌面应用一样渲染

单页Web应用只需重绘界面上需要变化的部分。相比之下，传统网站的许多用户操作都会重绘整张页面。如果页面很大，服务器又繁忙，或者网络连接很慢，当浏览器从服务器获取数据时，页面会持续好几秒或者更长时间的“闪白”等待。

3.单页Web应用可以拥有和桌面应用一样的响应速度

单页Web应用尽可能地把工作数据和处理过程从服务端转移到浏览器端，在本地拥有大多数需要决策判断的数据和业务逻辑，只有数据验证、授权和持久存储必须要放在服务端，因此响应时间大幅缩减。传统网站的大多数应用逻辑在服务端，对大部分的用户输入的响应，必须等待一个“请求—响应—重绘”的循环周期。

4.单页Web应用可以和桌面应用一样，把它的状态通知给用户

当单页Web应用必须等待服务器响应时，可以动态地显示进度条或繁忙指示器，用户不会因为延时而困惑。

5.单页Web应用与网站一样，可以随处访问且跨平台

和大多数桌面应用不一样，精心编写的单页Web应用可以在提HTML5浏览器的任何操作系统上运行，用户可以通过任何网络连接来访问单页Web应用，包括智能手机、平板电脑、电视、笔记本电脑和台式计算机。

（二）缺点

1.单页Web应用目前遇到最大的挑战就是对搜索引擎不友好，JavaScript生成的页面内容不能被搜索。搜索引擎为网站建立索引的时候，爬虫机器人并不会执行单页Web应用用来生成内容的JavaScript，这样用户就无法通过搜索引擎找到所需的东西。这对单页Web应用非常不利，如果不能出现在搜索引擎上，意味着可能会对业务造成打击。这个棘手的SEO问题需要搜索引擎公司和开发人员的不断尝试和配合。

2.单页Web应用要在一个页面上为用户提供产品的所有功能，这个页面首次加载的时候，需要生成大量的静态资源，这个加载时间相对比较长。

3.单页Web应用开发难度相对较高，开发者需要同时对组件化、设计模式有所认识。由于单页Web应用的很多逻辑从服务器转移到了浏览器端，开发单页Web应用所需要编写的JavaScript代码，在规模上至少要比传统网站大一个数量级。开发人员所面对的不再是一个简单的网页，而是一个运行在浏览器环境中的桌面软件。

五、总结

单页Web应用的发展造就了H5更为接近原生APP的体验。对想要保持尽量好的用户体验的同时，又要节省研发成本的团队而言，无疑是一个不错的选择。单页Web应用的开发会遇到很多挑战，但随着技术的不断发展和开发者的不断努力，这些挑战会被一一突破。

参考文献：

[1]埃米顿.A.斯科特.SPA设计与架构：理解单页面Web应用[M].北京：电子工业出版社，2016：8-9.

[2]本·雷迪.Serverless架构：无服务器单页应用开发[M].北京：电子工业出版社出版，2017：306-308.

[3]彭玲玲，李诗莹，冯爽.基于前端的Web性能优化[J].电子技术与软件工程，2017（24）.

[4]仇晶，黄岩，柴瑜晗.基于Node.js中间层Web开发的研究与实现：以微信图书借阅平台为例[J].河北工业科技，2017（2）.

◎编辑 赵瑞峰