现代职业教育杂志社 > 论文中心 >

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

2020-04-02  |  作者:现代职业教育杂志  |  栏目:论文中心

作者:施莹 本文字数:2473
  [摘           要]  精心编写的单页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编写,可以使编程环境保持一致,并能简化全栈开发。

相关文章:
  • 1 例谈小学数学教学中数形结合思想的渗透与应用
  • 2 核心素养在小学美术课堂中的重要性
  • 3 小学数学知识生活化教学研究
  • 4 浅谈小学道德与法治教学策略研究
  • 5 设计有效问题,引领数学教学
  • 6 教育游戏在小学英语教学中的应用探究
  • 7 小学英语自然拼读教育教学的研究
  • 8 “群文阅读”教学模式在小学语文阅读教学中的应用实践
  • 9 “导读议探结”教学模式在小学语文阅读教学中的应用探
  • 10 把儒雅的种子根植于孩子的心田
  • 现代职业教育杂志论文在线投稿
    刊物简介
    期刊目录
    杂志动态
    最近更新