基于JavaScript的動(dòng)態(tài)Web應(yīng)用系統(tǒng)設(shè)計(jì)

趙書(shū)田+劉海姣

摘 要： 當(dāng)前桌面動(dòng)態(tài)Web應(yīng)用系統(tǒng)存在移動(dòng)設(shè)備屏幕小、帶寬低、不方便輸入等弊端，在工作中可能會(huì)出現(xiàn)布局混亂、功能失效的問(wèn)題，用戶(hù)體驗(yàn)性不好。為此，設(shè)計(jì)了一種新的基于JavaScript的動(dòng)態(tài)Web應(yīng)用系統(tǒng)，給出動(dòng)態(tài)Web應(yīng)用系統(tǒng)體系結(jié)構(gòu)，其由用戶(hù)層、JavaScript引擎層、Web服務(wù)層及數(shù)據(jù)層構(gòu)成，介紹了系統(tǒng)總體結(jié)構(gòu)和硬件架構(gòu)。詳細(xì)分析了S3C44BOX芯片，給出JTAG接口和RS 485通信模塊的設(shè)計(jì)過(guò)程。實(shí)驗(yàn)結(jié)果表明，該系統(tǒng)加載性能和程序執(zhí)行效率高，安全性強(qiáng)。

關(guān)鍵詞： JavaScript； 動(dòng)態(tài)Web； 應(yīng)用系統(tǒng)； 通信模塊設(shè)計(jì)

中圖分類(lèi)號(hào)： TN915?34； TP311.3 文獻(xiàn)標(biāo)識(shí)碼： A 文章編號(hào)： 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 引 言

近年來(lái)，Web技術(shù)發(fā)展迅猛，網(wǎng)絡(luò)逐漸走進(jìn)人們的生活和工作中。Web應(yīng)用系統(tǒng)的用戶(hù)量眾多，且終端類(lèi)型繁雜，用戶(hù)需求各異[1?2]。怎樣使Web應(yīng)用系統(tǒng)適應(yīng)PC、手機(jī)及ipad等各種硬件設(shè)備和不同瀏覽器平臺(tái)的訪(fǎng)問(wèn)，達(dá)到用戶(hù)要求，是當(dāng)前亟需解決的問(wèn)題[3]。尤其是在3G業(yè)務(wù)發(fā)展迅速的今天，迫切需要一種有效的、適應(yīng)能力強(qiáng)的Web應(yīng)用系統(tǒng)[4]。

本文設(shè)計(jì)了一種新的基于JavaScript的動(dòng)態(tài)Web應(yīng)用系統(tǒng)，給出所設(shè)計(jì)動(dòng)態(tài)Web應(yīng)用系統(tǒng)體系結(jié)構(gòu)，介紹了系統(tǒng)總體結(jié)構(gòu)和硬件架構(gòu)。實(shí)驗(yàn)結(jié)果表明，所提系統(tǒng)加載性能和程序執(zhí)行效率高，安全性強(qiáng)。

1 基于JavaScript的動(dòng)態(tài)Web應(yīng)用系統(tǒng)設(shè)計(jì)

1.1 基于JavaScript的Web體系結(jié)構(gòu)

JavaScript是一種依據(jù)對(duì)象和事件驅(qū)動(dòng)的腳本語(yǔ)言，其主要是為了和HTML結(jié)合使用，和頁(yè)面元素進(jìn)行互動(dòng)，防止高頻率的頁(yè)面刷新，為用戶(hù)提供更好的服務(wù)。JavaScript是通過(guò)嵌入至標(biāo)準(zhǔn)HTML語(yǔ)言中實(shí)現(xiàn)的，其能夠避免HTML語(yǔ)言自身的弊端，性能很高[5?6]。

JavaScript的主要優(yōu)勢(shì)如下：

（1） JavaScript屬于解釋性腳本語(yǔ)言，便于編寫(xiě)，無(wú)需預(yù)先編譯；

（2） JavaScript是面向?qū)ο蟮模軌蛞罁?jù)其建立所需的對(duì)象進(jìn)行開(kāi)發(fā)，還可使用其內(nèi)置對(duì)象；

（3） JavaScript具有事件驅(qū)動(dòng)特性，能夠達(dá)到Web應(yīng)用系統(tǒng)前端開(kāi)發(fā)交互頁(yè)面的要求；

（4） JavaScript安全性較高，代碼僅可在用戶(hù)客戶(hù)端瀏覽器運(yùn)行；

（5） JavaScript具有平臺(tái)無(wú)關(guān)性，這是由于其通過(guò)瀏覽器解釋執(zhí)行，在各種操作平臺(tái)下均可運(yùn)行。

動(dòng)態(tài)Web應(yīng)用系統(tǒng)的設(shè)計(jì)宗旨為盡可能提高用戶(hù)的服務(wù)質(zhì)量，當(dāng)前用戶(hù)的要求越來(lái)越高，本節(jié)依據(jù)JavaScript的優(yōu)點(diǎn)，將其作為動(dòng)態(tài)Web應(yīng)用系統(tǒng)的設(shè)計(jì)語(yǔ)言。

基于JavaScript的動(dòng)態(tài)Web應(yīng)用系統(tǒng)體系結(jié)構(gòu)主要包括用戶(hù)層、JavaScript引擎層、Web 服務(wù)層及數(shù)據(jù)層四層，用圖1進(jìn)行描述。

用戶(hù)層作為客戶(hù)端，主要用于顯示用戶(hù)請(qǐng)求、Web服務(wù)層返回的數(shù)據(jù)以及矢量數(shù)據(jù)。JavaScript引擎層和用戶(hù)層及Web服務(wù)層相連，主要用于完成和Web 服務(wù)層的通信、應(yīng)用開(kāi)發(fā)等任務(wù)，為整個(gè)體系的核心。Web服務(wù)層主要用于對(duì)JavaScript引擎層異步請(qǐng)求、業(yè)務(wù)請(qǐng)求和響應(yīng)進(jìn)行處理。數(shù)據(jù)層主要用于數(shù)據(jù)庫(kù)的管理。

1.2 動(dòng)態(tài)Web應(yīng)用系統(tǒng)總體設(shè)計(jì)

本文設(shè)計(jì)的基于JavaScript的動(dòng)態(tài)Web應(yīng)用系統(tǒng)主要由硬件和軟件部分構(gòu)成。硬件是動(dòng)態(tài)Web應(yīng)用系統(tǒng)軟件環(huán)境運(yùn)行的基礎(chǔ)，其為系統(tǒng)軟件的工作提供平臺(tái)與信息交換接口。而系統(tǒng)軟件是整個(gè)Web應(yīng)用系統(tǒng)的控制核心，能夠?qū)ο到y(tǒng)的正常工作進(jìn)行控制，為人機(jī)交互提供信息[7]。圖2描述的是基于JavaScript的動(dòng)態(tài)Web應(yīng)用系統(tǒng)的總體結(jié)構(gòu)。

1.3 系統(tǒng)硬件架構(gòu)設(shè)計(jì)

系統(tǒng)硬件架構(gòu)如圖3所示。JTAG45接口和以太網(wǎng)相連，以實(shí)現(xiàn)端口測(cè)試。通過(guò)外部SRAM對(duì)已經(jīng)接收到的和即將要發(fā)送的數(shù)據(jù)以及系統(tǒng)中的變量進(jìn)行保存，通過(guò)FLASH對(duì)MAC地址、IP地址等信息進(jìn)行保存。系統(tǒng)開(kāi)始運(yùn)行時(shí)，首先對(duì)MAC地址、IP地址等信息進(jìn)行讀取，再對(duì)網(wǎng)卡芯片RTL8019AS進(jìn)行初始化處理，等待數(shù)據(jù)抵達(dá)[8]。在網(wǎng)卡芯片RTL8019AS接收到請(qǐng)求數(shù)據(jù)包后，系統(tǒng)將出現(xiàn)外部中斷，依據(jù)當(dāng)前接收數(shù)據(jù)包中含有的幀的類(lèi)型進(jìn)行相應(yīng)處理，同時(shí)將對(duì)應(yīng)的回答幀傳輸至以太網(wǎng)控制器，通過(guò)以太網(wǎng)控制器傳輸至以太網(wǎng)絡(luò)。完成上述處理后，系統(tǒng)等待接收下一個(gè)數(shù)據(jù)包，繼續(xù)進(jìn)行上述過(guò)程，如此循環(huán)。整個(gè)系統(tǒng)的通信是通過(guò)通信電路實(shí)現(xiàn)的。

1.4 MUC S3C44BOX芯片介紹

三星公司生產(chǎn)的S3C44BOX是常用的ARM7TDMI內(nèi)核的片上系統(tǒng)，該芯片穩(wěn)定性高、整體性能強(qiáng)大，是一種高性?xún)r(jià)比的微處理器。S3C44BOX采用全新的SAMBAI總線(xiàn)結(jié)構(gòu)，不僅有ARM7TDMI內(nèi)核的基本功能，還有豐富的外圍功能，設(shè)計(jì)人員可忽略復(fù)雜的外圍電路，成本低、效率高[9]。

1.5 JTAG接口設(shè)計(jì)

JTAG接口是一種國(guó)際標(biāo)準(zhǔn)測(cè)試協(xié)議，用于測(cè)試訪(fǎng)問(wèn)端口。JTAG通過(guò)對(duì)可編程控制器在線(xiàn)編程，以及對(duì)寄存器進(jìn)行邊界掃描實(shí)現(xiàn)系統(tǒng)的調(diào)試，提高了系統(tǒng)開(kāi)發(fā)效率。JTAG接口有16引腳與20引腳，本節(jié)選用16引腳的方式，其電路圖用圖4進(jìn)行描述，圖中JTAG接口引腳處和電阻相連，主要是為了保證調(diào)試時(shí)的安全穩(wěn)定性。

在進(jìn)行調(diào)試時(shí)，JTAG可按照需要確定訪(fǎng)問(wèn)處理器的內(nèi)核還是片上外設(shè)，選擇依據(jù)取決于NRESET，若該引腳是高電平，則對(duì)片上外設(shè)進(jìn)行訪(fǎng)問(wèn)；反之，若該引腳是低電平，則對(duì)處理器內(nèi)核進(jìn)行訪(fǎng)問(wèn)，而NRESET高低電平之間的轉(zhuǎn)換是利用跳線(xiàn)完成的。

1.6 通信模塊設(shè)計(jì)

本節(jié)依據(jù)MODBUS協(xié)議，選用RS 485通信方式，這主要是因?yàn)镽S 485通信方式成本低、結(jié)構(gòu)簡(jiǎn)單且數(shù)據(jù)傳輸速度快。本節(jié)選擇最高傳輸速率可達(dá)560 KB/s的RS 485通信芯片ADM2483作為通信模塊的核心芯片，其電路圖如圖5所示。該芯片的驅(qū)動(dòng)器為限擺率驅(qū)動(dòng)器，減少了不合理的終端匹配以及接頭形成的誤碼。ADM2483芯片具有失效保護(hù)功能，驅(qū)動(dòng)器可對(duì)短路電流進(jìn)行約束，同時(shí)能夠利用熱關(guān)斷電路把驅(qū)動(dòng)器輸出置為高阻狀態(tài)，避免能耗過(guò)大。

2 實(shí)驗(yàn)結(jié)果分析

本節(jié)從Web應(yīng)用加載性能和程序執(zhí)行效率兩個(gè)方面對(duì)本文方法的有效性進(jìn)行驗(yàn)證。實(shí)驗(yàn)將HTML Web應(yīng)用系統(tǒng)和C++ Web應(yīng)用系統(tǒng)作為對(duì)比進(jìn)行實(shí)驗(yàn)。

2.1 Web應(yīng)用加載性能測(cè)試

Web應(yīng)用和本地應(yīng)用最大的差異是即時(shí)下載性。受網(wǎng)絡(luò)傳輸速率的約束，若一次下載的文件過(guò)大，則下載時(shí)間將很長(zhǎng)，用戶(hù)滿(mǎn)意度將大大降低，導(dǎo)致網(wǎng)站訪(fǎng)問(wèn)量下降。所以，Web應(yīng)用加載性能可通過(guò)文件大小的增長(zhǎng)率進(jìn)行衡量。

本節(jié)對(duì)Calculator，5lnARow，RGB三款應(yīng)用進(jìn)行測(cè)試，對(duì)實(shí)驗(yàn)前文件大小進(jìn)行記錄。分別將本文系統(tǒng)、HTML Web應(yīng)用系統(tǒng)和C++ Web應(yīng)用系統(tǒng)應(yīng)用于三款應(yīng)用中，對(duì)應(yīng)用后的文件大小進(jìn)行記錄，求出文件大小的增長(zhǎng)因子，并對(duì)程序中關(guān)鍵代碼段的路徑空間規(guī)模進(jìn)行記錄。實(shí)驗(yàn)結(jié)果如表1所示。

分析表1可以看出，應(yīng)用本文系統(tǒng)后文件大小降低，而應(yīng)用HTML Web應(yīng)用系統(tǒng)和C++ Web應(yīng)用系統(tǒng)后，文件大小增加，空間需求加大，且本文系統(tǒng)路徑空間規(guī)模最大，會(huì)給攻擊者帶來(lái)不確定性，降低攻擊者的攻擊能力，大大增加了攻擊難度，提高系統(tǒng)安全性。

2.2 執(zhí)行效率測(cè)試

本節(jié)將html5_demo與html5_demo_Pro作為研究對(duì)象，從運(yùn)行結(jié)果對(duì)本文系統(tǒng)的執(zhí)行效率進(jìn)行驗(yàn)證。html5_demo與html5_demo_Pro是繪圖應(yīng)用，將其幀速率設(shè)置成50 f/s，運(yùn)行時(shí)間設(shè)置成8 s，執(zhí)行后會(huì)在顯示屏上顯示已經(jīng)繪制的圖像個(gè)數(shù)，通過(guò)圖像個(gè)數(shù)對(duì)執(zhí)行效率進(jìn)行衡量。共運(yùn)行5次，記錄5次本文系統(tǒng)、HTML Web應(yīng)用系統(tǒng)和C++ Web應(yīng)用系統(tǒng)繪制的圖像數(shù)量，結(jié)果如表2所示。

分析表2可以看出，針對(duì)同一次測(cè)試、兩種應(yīng)用，本文系統(tǒng)繪制數(shù)量一直高于HTML Web應(yīng)用系統(tǒng)和C++ Web應(yīng)用系統(tǒng)，說(shuō)明本文系統(tǒng)有很高的執(zhí)行效率。

3 結(jié) 論

本文設(shè)計(jì)了一種新的基于JavaScript的動(dòng)態(tài)Web應(yīng)用系統(tǒng)，給出系統(tǒng)體系結(jié)構(gòu)，介紹了系統(tǒng)總體結(jié)構(gòu)和硬件架構(gòu)。實(shí)驗(yàn)結(jié)果表明，本文系統(tǒng)加載性能和程序執(zhí)行效率高，安全性強(qiáng)。

參考文獻(xiàn)

[1] 李晶瑩，王方雄，侯英姿，等.基于HTML5/JavaScript的WebGIS功能界面設(shè)計(jì)與開(kāi)發(fā)[J].微型機(jī)與應(yīng)用，2016，35（7）：19?21.

[2] 姜艷.一種基于JavaScript框架的混合應(yīng)用開(kāi)發(fā)技術(shù)[J].網(wǎng)絡(luò)新媒體技術(shù)，2016，5（4）：59?64.

[3] 劉秀秀，潘梁，郭志川，等.基于Web運(yùn)行環(huán)境的Android原生應(yīng)用管理研究[J].網(wǎng)絡(luò)新媒體技術(shù)，2015，4（4）：35?40.

[4] 房鼎益，黨舒凡，王懷軍，等.具有時(shí)間多樣性的JavaScript代碼保護(hù)方法[J].計(jì)算機(jī)應(yīng)用，2015，35（1）：72?76.

[5] 年雁云，翟世常，薛晨光.基于WebGIS的渤海漁業(yè)服務(wù)系統(tǒng)設(shè)計(jì)與開(kāi)發(fā)[J].遙感技術(shù)與應(yīng)用，2015，30（2）：391?398.

[6] 周曉，鄭定超，方玖琳.基于UM220的北斗接收機(jī)及WEB終端設(shè)計(jì)[J].計(jì)算機(jī)測(cè)量與控制，2016，24（3）：238?240.

[7] 孫曉鵬，文學(xué)虎，王蕾，等.基于Web的地理國(guó)情監(jiān)測(cè)統(tǒng)計(jì)圖制作系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].價(jià)值工程，2015，34（9）：309?310.

[8] 姚瑤，王戰(zhàn)紅，石磊.基于頁(yè)面聚類(lèi)的Web概念化模型研究[J].科學(xué)技術(shù)與工程，2014，14（25）：272?276.

[9] 李潔，俞研，吳家順.基于動(dòng)態(tài)污點(diǎn)分析的DOM XSS漏洞檢測(cè)算法[J].計(jì)算機(jī)應(yīng)用，2016，36（5）：1246?1249.