基于JavaScript的动态Web应用系统设计
赵书田+刘海姣
摘 要： 当前桌面动态Web应用系统存在移动设备屏幕小、带宽低、不方便输入等弊端，在工作中可能会出现布局混乱、功能失效的问题，用户体验性不好。为此，设计了一种新的基于JavaScript的动态Web应用系统，给出动态Web应用系统体系结构，其由用户层、JavaScript引擎层、Web服务层及数据层构成，介绍了系统总体结构和硬件架构。详细分析了S3C44BOX芯片，给出JTAG接口和RS 485通信模块的设计过程。实验结果表明，该系统加载性能和程序执行效率高，安全性强。
关键词： JavaScript； 动态Web； 应用系统； 通信模块设计
中图分类号： TN915?34； TP311.3 文献标识码： A 文章编号： 1004?373X（2017）15?0044?03
Abstract： The current desktop dynamic Web application systems have the problems （such as chaotic layout and disabled function） at work and poor user experience due to the disadvantages of small screen of mobile device， low bandwidth and inconvenient input. Therefore a new dynamic Web application system based on JavaScript was designed. The system architecture of the dynamic Web application system is composed of the user layer， JavaScript engine layer， Web service layer and data layer. The overall structure and hardware architecture of the system are introduced. The S3C44BOX chip is analyzed in detail. The design process of JTAG interface and RS 485 communication module is given. The experimental results show that the proposed system has high system loading performance， high execution efficiency， and strong security.
Keywords： JavaScript； dynamic Web； application system； communication module design
0 引 言
近年来，Web技术发展迅猛，网络逐渐走进人们的生活和工作中。Web应用系统的用户量众多，且终端类型繁杂，用户需求各异[1?2]。怎样使Web应用系统适应PC、手机及ipad等各种硬件设备和不同浏览器平台的访问，达到用户要求，是当前亟需解决的问题[3]。尤其是在3G业务发展迅速的今天，迫切需要一种有效的、适应能力强的Web应用系统[4]。
本文设计了一种新的基于JavaScript的动态Web应用系统，给出所设计动态Web应用系统体系结构，介绍了系统总体结构和硬件架构。实验结果表明，所提系统加载性能和程序执行效率高，安全性强。
1 基于JavaScript的动态Web应用系统设计
1.1 基于JavaScript的Web体系结构
JavaScript是一种依据对象和事件驱动的脚本语言，其主要是为了和HTML结合使用，和页面元素进行互动，防止高频率的页面刷新，为用户提供更好的服务。JavaScript是通过嵌入至标准HTML语言中实现的，其能够避免HTML语言自身的弊端，性能很高[5?6]。
JavaScript的主要优势如下：
（1） JavaScript属于解释性脚本语言，便于编写，无需预先编译；
（2） JavaScript是面向对象的，能够依据其建立所需的对象进行开发，还可使用其内置对象；
（3） JavaScript具有事件驱动特性，能够达到Web应用系统前端开发交互页面的要求；
（4） JavaScript安全性较高，代码仅可在用户客户端浏览器运行；
（5） JavaScript具有平台无关性，这是由于其通过浏览器解释执行，在各种操作平台下均可运行。
动态Web应用系统的设计宗旨为尽可能提高用户的服务质量，当前用户的要求越来越高，本节依据JavaScript的优点，将其作为动态Web应用系统的设计语言。
基于JavaScript的动态Web应用系统体系结构主要包括用户层、JavaScript引擎层、Web 服务层及数据层四层，用图1进行描述。
用户层作为客户端，主要用于显示用户请求、Web服务层返回的数据以及矢量数据。JavaScript引擎层和用户层及Web服务层相连，主要用于完成和Web 服务层的通信、应用开发等任务，为整个体系的核心。Web服务层主要用于对JavaScript引擎层异步请求、业务請求和响应进行处理。数据层主要用于数据库的管理。
1.2 动态Web应用系统总体设计
本文设计的基于JavaScript的动态Web应用系统主要由硬件和软件部分构成。硬件是动态Web应用系统软件环境运行的基础，其为系统软件的工作提供平台与信息交换接口。而系统软件是整个Web应用系统的控制核心，能够对系统的正常工作进行控制，为人机交互提供信息[7]。图2描述的是基于JavaScript的动态Web应用系统的总体结构。
1.3 系统硬件架构设计
系统硬件架构如图3所示。JTAG45接口和以太网相连，以实现端口测试。通过外部SRAM对已经接收到的和即将要发送的数据以及系统中的变量进行保存，通过FLASH对MAC地址、IP地址等信息进行保存。系统开始运行时，首先对MAC地址、IP地址等信息进行读取，再对网卡芯片RTL8019AS进行初始化处理，等待数据抵达[8]。在网卡芯片RTL8019AS接收到请求数据包后，系統将出现外部中断，依据当前接收数据包中含有的帧的类型进行相应处理，同时将对应的回答帧传输至以太网控制器，通过以太网控制器传输至以太网络。完成上述处理后，系统等待接收下一个数据包，继续进行上述过程，如此循环。整个系统的通信是通过通信电路实现的。
1.4 MUC S3C44BOX芯片介绍
三星公司生产的S3C44BOX是常用的ARM7TDMI内核的片上系统，该芯片稳定性高、整体性能强大，是一种高性价比的微处理器。S3C44BOX采用全新的SAMBAI总线结构，不仅有ARM7TDMI内核的基本功能，还有丰富的外围功能，设计人员可忽略复杂的外围电路，成本低、效率高[9]。
1.5 JTAG接口设计
JTAG接口是一种国际标准测试协议，用于测试访问端口。JTAG通过对可编程控制器在线编程，以及对寄存器进行边界扫描实现系统的调试，提高了系统开发效率。JTAG接口有16引脚与20引脚，本节选用16引脚的方式，其电路图用图4进行描述，图中JTAG接口引脚处和电阻相连，主要是为了保证调试时的安全稳定性。
在进行调试时，JTAG可按照需要确定访问处理器的内核还是片上外设，选择依据取决于NRESET，若该引脚是高电平，则对片上外设进行访问；反之，若该引脚是低电平，则对处理器内核进行访问，而NRESET高低电平之间的转换是利用跳线完成的。
1.6 通信模块设计
本节依据MODBUS协议，选用RS 485通信方式，这主要是因为RS 485通信方式成本低、结构简单且数据传输速度快。本节选择最高传输速率可达560 KB/s的RS 485通信芯片ADM2483作为通信模块的核心芯片，其电路图如图5所示。该芯片的驱动器为限摆率驱动器，减少了不合理的终端匹配以及接头形成的误码。ADM2483芯片具有失效保护功能，驱动器可对短路电流进行约束，同时能够利用热关断电路把驱动器输出置为高阻状态，避免能耗过大。
2 实验结果分析
本节从Web应用加载性能和程序执行效率两个方面对本文方法的有效性进行验证。实验将HTML Web应用系统和C++ Web应用系统作为对比进行实验。
2.1 Web应用加载性能测试
Web应用和本地应用最大的差异是即时下载性。受网络传输速率的约束，若一次下载的文件过大，则下载时间将很长，用户满意度将大大降低，导致网站访问量下降。所以，Web应用加载性能可通过文件大小的增长率进行衡量。
本节对Calculator，5lnARow，RGB三款应用进行测试，对实验前文件大小进行记录。分别将本文系统、HTML Web应用系统和C++ Web应用系统应用于三款应用中，对应用后的文件大小进行记录，求出文件大小的增长因子，并对程序中关键代码段的路径空间规模进行记录。实验结果如表1所示。
分析表1可以看出，应用本文系统后文件大小降低，而应用HTML Web应用系统和C++ Web应用系统后，文件大小增加，空间需求加大，且本文系统路径空间规模最大，会给攻击者带来不确定性，降低攻击者的攻击能力，大大增加了攻击难度，提高系统安全性。
2.2 执行效率测试
本节将html5_demo与html5_demo_Pro作为研究对象，从运行结果对本文系统的执行效率进行验证。html5_demo与html5_demo_Pro是绘图应用，将其帧速率设置成50 f/s，运行时间设置成8 s，执行后会在显示屏上显示已经绘制的图像个数，通过图像个数对执行效率进行衡量。共运行5次，记录5次本文系统、HTML Web应用系统和C++ Web应用系统绘制的图像数量，结果如表2所示。
分析表2可以看出，针对同一次测试、两种应用，本文系统绘制数量一直高于HTML Web应用系统和C++ Web应用系统，说明本文系统有很高的执行效率。
3 结 论
本文设计了一种新的基于JavaScript的动态Web应用系统，给出系统体系结构，介绍了系统总体结构和硬件架构。实验结果表明，本文系统加载性能和程序执行效率高，安全性强。
参考文献
[1] 李晶莹，王方雄，侯英姿，等.基于HTML5/JavaScript的WebGIS功能界面设计与开发[J].微型机与应用，2016，35（7）：19?21.
[2] 姜艳.一种基于JavaScript框架的混合应用开发技术[J].网络新媒体技术，2016，5（4）：59?64.
[3] 刘秀秀，潘梁，郭志川，等.基于Web运行环境的Android原生应用管理研究[J].网络新媒体技术，2015，4（4）：35?40.
[4] 房鼎益，党舒凡，王怀军，等.具有时间多样性的JavaScript代码保护方法[J].计算机应用，2015，35（1）：72?76.
[5] 年雁云，翟世常，薛晨光.基于WebGIS的渤海渔业服务系统设计与开发[J].遥感技术与应用，2015，30（2）：391?398.
[6] 周晓，郑定超，方玖琳.基于UM220的北斗接收机及WEB终端设计[J].计算机测量与控制，2016，24（3）：238?240.
[7] 孙晓鹏，文学虎，王蕾，等.基于Web的地理国情监测统计图制作系统设计与实现[J].价值工程，2015，34（9）：309?310.
[8] 姚瑶，王战红，石磊.基于页面聚类的Web概念化模型研究[J].科学技术与工程，2014，14（25）：272?276.
[9] 李洁，俞研，吴家顺.基于动态污点分析的DOM XSS漏洞检测算法[J].计算机应用，2016，36（5）：1246?1249.
摘 要： 当前桌面动态Web应用系统存在移动设备屏幕小、带宽低、不方便输入等弊端，在工作中可能会出现布局混乱、功能失效的问题，用户体验性不好。为此，设计了一种新的基于JavaScript的动态Web应用系统，给出动态Web应用系统体系结构，其由用户层、JavaScript引擎层、Web服务层及数据层构成，介绍了系统总体结构和硬件架构。详细分析了S3C44BOX芯片，给出JTAG接口和RS 485通信模块的设计过程。实验结果表明，该系统加载性能和程序执行效率高，安全性强。
关键词： JavaScript； 动态Web； 应用系统； 通信模块设计
中图分类号： TN915?34； TP311.3 文献标识码： A 文章编号： 1004?373X（2017）15?0044?03
Abstract： The current desktop dynamic Web application systems have the problems （such as chaotic layout and disabled function） at work and poor user experience due to the disadvantages of small screen of mobile device， low bandwidth and inconvenient input. Therefore a new dynamic Web application system based on JavaScript was designed. The system architecture of the dynamic Web application system is composed of the user layer， JavaScript engine layer， Web service layer and data layer. The overall structure and hardware architecture of the system are introduced. The S3C44BOX chip is analyzed in detail. The design process of JTAG interface and RS 485 communication module is given. The experimental results show that the proposed system has high system loading performance， high execution efficiency， and strong security.
Keywords： JavaScript； dynamic Web； application system； communication module design
0 引 言
近年来，Web技术发展迅猛，网络逐渐走进人们的生活和工作中。Web应用系统的用户量众多，且终端类型繁杂，用户需求各异[1?2]。怎样使Web应用系统适应PC、手机及ipad等各种硬件设备和不同浏览器平台的访问，达到用户要求，是当前亟需解决的问题[3]。尤其是在3G业务发展迅速的今天，迫切需要一种有效的、适应能力强的Web应用系统[4]。
本文设计了一种新的基于JavaScript的动态Web应用系统，给出所设计动态Web应用系统体系结构，介绍了系统总体结构和硬件架构。实验结果表明，所提系统加载性能和程序执行效率高，安全性强。
1 基于JavaScript的动态Web应用系统设计
1.1 基于JavaScript的Web体系结构
JavaScript是一种依据对象和事件驱动的脚本语言，其主要是为了和HTML结合使用，和页面元素进行互动，防止高频率的页面刷新，为用户提供更好的服务。JavaScript是通过嵌入至标准HTML语言中实现的，其能够避免HTML语言自身的弊端，性能很高[5?6]。
JavaScript的主要优势如下：
（1） JavaScript属于解释性脚本语言，便于编写，无需预先编译；
（2） JavaScript是面向对象的，能够依据其建立所需的对象进行开发，还可使用其内置对象；
（3） JavaScript具有事件驱动特性，能够达到Web应用系统前端开发交互页面的要求；
（4） JavaScript安全性较高，代码仅可在用户客户端浏览器运行；
（5） JavaScript具有平台无关性，这是由于其通过浏览器解释执行，在各种操作平台下均可运行。
动态Web应用系统的设计宗旨为尽可能提高用户的服务质量，当前用户的要求越来越高，本节依据JavaScript的优点，将其作为动态Web应用系统的设计语言。
基于JavaScript的动态Web应用系统体系结构主要包括用户层、JavaScript引擎层、Web 服务层及数据层四层，用图1进行描述。
用户层作为客户端，主要用于显示用户请求、Web服务层返回的数据以及矢量数据。JavaScript引擎层和用户层及Web服务层相连，主要用于完成和Web 服务层的通信、应用开发等任务，为整个体系的核心。Web服务层主要用于对JavaScript引擎层异步请求、业务請求和响应进行处理。数据层主要用于数据库的管理。
1.2 动态Web应用系统总体设计
本文设计的基于JavaScript的动态Web应用系统主要由硬件和软件部分构成。硬件是动态Web应用系统软件环境运行的基础，其为系统软件的工作提供平台与信息交换接口。而系统软件是整个Web应用系统的控制核心，能够对系统的正常工作进行控制，为人机交互提供信息[7]。图2描述的是基于JavaScript的动态Web应用系统的总体结构。
1.3 系统硬件架构设计
系统硬件架构如图3所示。JTAG45接口和以太网相连，以实现端口测试。通过外部SRAM对已经接收到的和即将要发送的数据以及系统中的变量进行保存，通过FLASH对MAC地址、IP地址等信息进行保存。系统开始运行时，首先对MAC地址、IP地址等信息进行读取，再对网卡芯片RTL8019AS进行初始化处理，等待数据抵达[8]。在网卡芯片RTL8019AS接收到请求数据包后，系統将出现外部中断，依据当前接收数据包中含有的帧的类型进行相应处理，同时将对应的回答帧传输至以太网控制器，通过以太网控制器传输至以太网络。完成上述处理后，系统等待接收下一个数据包，继续进行上述过程，如此循环。整个系统的通信是通过通信电路实现的。
1.4 MUC S3C44BOX芯片介绍
三星公司生产的S3C44BOX是常用的ARM7TDMI内核的片上系统，该芯片稳定性高、整体性能强大，是一种高性价比的微处理器。S3C44BOX采用全新的SAMBAI总线结构，不仅有ARM7TDMI内核的基本功能，还有丰富的外围功能，设计人员可忽略复杂的外围电路，成本低、效率高[9]。
1.5 JTAG接口设计
JTAG接口是一种国际标准测试协议，用于测试访问端口。JTAG通过对可编程控制器在线编程，以及对寄存器进行边界扫描实现系统的调试，提高了系统开发效率。JTAG接口有16引脚与20引脚，本节选用16引脚的方式，其电路图用图4进行描述，图中JTAG接口引脚处和电阻相连，主要是为了保证调试时的安全稳定性。
在进行调试时，JTAG可按照需要确定访问处理器的内核还是片上外设，选择依据取决于NRESET，若该引脚是高电平，则对片上外设进行访问；反之，若该引脚是低电平，则对处理器内核进行访问，而NRESET高低电平之间的转换是利用跳线完成的。
1.6 通信模块设计
本节依据MODBUS协议，选用RS 485通信方式，这主要是因为RS 485通信方式成本低、结构简单且数据传输速度快。本节选择最高传输速率可达560 KB/s的RS 485通信芯片ADM2483作为通信模块的核心芯片，其电路图如图5所示。该芯片的驱动器为限摆率驱动器，减少了不合理的终端匹配以及接头形成的误码。ADM2483芯片具有失效保护功能，驱动器可对短路电流进行约束，同时能够利用热关断电路把驱动器输出置为高阻状态，避免能耗过大。
2 实验结果分析
本节从Web应用加载性能和程序执行效率两个方面对本文方法的有效性进行验证。实验将HTML Web应用系统和C++ Web应用系统作为对比进行实验。
2.1 Web应用加载性能测试
Web应用和本地应用最大的差异是即时下载性。受网络传输速率的约束，若一次下载的文件过大，则下载时间将很长，用户满意度将大大降低，导致网站访问量下降。所以，Web应用加载性能可通过文件大小的增长率进行衡量。
本节对Calculator，5lnARow，RGB三款应用进行测试，对实验前文件大小进行记录。分别将本文系统、HTML Web应用系统和C++ Web应用系统应用于三款应用中，对应用后的文件大小进行记录，求出文件大小的增长因子，并对程序中关键代码段的路径空间规模进行记录。实验结果如表1所示。
分析表1可以看出，应用本文系统后文件大小降低，而应用HTML Web应用系统和C++ Web应用系统后，文件大小增加，空间需求加大，且本文系统路径空间规模最大，会给攻击者带来不确定性，降低攻击者的攻击能力，大大增加了攻击难度，提高系统安全性。
2.2 执行效率测试
本节将html5_demo与html5_demo_Pro作为研究对象，从运行结果对本文系统的执行效率进行验证。html5_demo与html5_demo_Pro是绘图应用，将其帧速率设置成50 f/s，运行时间设置成8 s，执行后会在显示屏上显示已经绘制的图像个数，通过图像个数对执行效率进行衡量。共运行5次，记录5次本文系统、HTML Web应用系统和C++ Web应用系统绘制的图像数量，结果如表2所示。
分析表2可以看出，针对同一次测试、两种应用，本文系统绘制数量一直高于HTML Web应用系统和C++ Web应用系统，说明本文系统有很高的执行效率。
3 结 论
本文设计了一种新的基于JavaScript的动态Web应用系统，给出系统体系结构，介绍了系统总体结构和硬件架构。实验结果表明，本文系统加载性能和程序执行效率高，安全性强。
参考文献
[1] 李晶莹，王方雄，侯英姿，等.基于HTML5/JavaScript的WebGIS功能界面设计与开发[J].微型机与应用，2016，35（7）：19?21.
[2] 姜艳.一种基于JavaScript框架的混合应用开发技术[J].网络新媒体技术，2016，5（4）：59?64.
[3] 刘秀秀，潘梁，郭志川，等.基于Web运行环境的Android原生应用管理研究[J].网络新媒体技术，2015，4（4）：35?40.
[4] 房鼎益，党舒凡，王怀军，等.具有时间多样性的JavaScript代码保护方法[J].计算机应用，2015，35（1）：72?76.
[5] 年雁云，翟世常，薛晨光.基于WebGIS的渤海渔业服务系统设计与开发[J].遥感技术与应用，2015，30（2）：391?398.
[6] 周晓，郑定超，方玖琳.基于UM220的北斗接收机及WEB终端设计[J].计算机测量与控制，2016，24（3）：238?240.
[7] 孙晓鹏，文学虎，王蕾，等.基于Web的地理国情监测统计图制作系统设计与实现[J].价值工程，2015，34（9）：309?310.
[8] 姚瑶，王战红，石磊.基于页面聚类的Web概念化模型研究[J].科学技术与工程，2014，14（25）：272?276.
[9] 李洁，俞研，吴家顺.基于动态污点分析的DOM XSS漏洞检测算法[J].计算机应用，2016，36（5）：1246?1249.
