基于DOM的移動(dòng)終端布局解析器的設(shè)計(jì)與實(shí)現(xiàn)*

陳天偉

基于DOM的移動(dòng)終端布局解析器的設(shè)計(jì)與實(shí)現(xiàn)*

陳天偉

（四川城市職業(yè)學(xué)院，四川 成都 610101）

為了優(yōu)化移動(dòng)終端交互界面的用戶體驗(yàn)，采用DOM技術(shù)，分析交互頁(yè)面的布局特性，改進(jìn)頁(yè)面交互算法，設(shè)計(jì)了一種基于DOM的移動(dòng)終端頁(yè)面交互的適配方法，將可視化適配器應(yīng)用于手機(jī)軟件開發(fā)項(xiàng)目中，發(fā)現(xiàn)在多用戶操作下，通過(guò)可視化適配器可平均減少57%的工作量，提高了代碼復(fù)用率。

DOM 可視化 移動(dòng)終端

1 引言

隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，對(duì)用戶體驗(yàn)要求越來(lái)越高，移動(dòng)終端APP（Application）的可視化需求也越來(lái)越迫切。在移動(dòng)終端的可視化需求中，由于用戶數(shù)量大而且個(gè)性化需求多，所以用戶頁(yè)面布局的修改工作量一般比較大，這會(huì)涉及到代碼的修改，開發(fā)成本較高，影響應(yīng)用的擴(kuò)展性和靈活性。為解決這類問(wèn)題，研究了一種基于DOM（Document Object Model）移動(dòng)終端APP布局解析器的設(shè)計(jì)思路及實(shí)現(xiàn)方法。

2 設(shè)計(jì)思路

主流的APP應(yīng)用的頁(yè)面布局一般是通過(guò)HTML方式展示。用戶交互信息通常直接以HTML代碼方式保存在頁(yè)面文件中，頁(yè)面文件通過(guò)與編程語(yǔ)言結(jié)合成動(dòng)態(tài)頁(yè)面編程語(yǔ)言，如JSP（Java Server Page），ASP（Active Server Pages），PHP（Hypertext Preprocessor），再通過(guò)關(guān)系數(shù)據(jù)庫(kù)連接，在數(shù)據(jù)庫(kù)與Web服務(wù)器之間完成數(shù)據(jù)連接，實(shí)現(xiàn)用戶數(shù)據(jù)的信息展示。

在應(yīng)用系統(tǒng)的業(yè)務(wù)功能增加時(shí)，一般頁(yè)面的需求也會(huì)變更，這樣頁(yè)面布局也會(huì)要求改變，由于頁(yè)面文件是由程序語(yǔ)言合成的動(dòng)態(tài)頁(yè)面編程語(yǔ)言，故需要開發(fā)人員才可以完成，工作量相對(duì)比較大。提出了基于DOM的頁(yè)面可視化布局的設(shè)計(jì)和實(shí)現(xiàn)，經(jīng)過(guò)應(yīng)用實(shí)踐，非開發(fā)人員可以靈活地進(jìn)行布局設(shè)計(jì)和頁(yè)面可視化的工作。頁(yè)面布局結(jié)構(gòu)圖如圖1所示：

DOM[1]文件是標(biāo)記的內(nèi)容和標(biāo)記構(gòu)成的文本文件。DOM可靈活處理頁(yè)面布局、相關(guān)屬性、功能數(shù)據(jù)等信息[2]。在實(shí)際工作中，采用DOM方式進(jìn)行頁(yè)面相關(guān)信息的存儲(chǔ)是一種可行的方式[3]。

布局文件[4]由移動(dòng)終端APP欄目和模板[5]組成。模板定義了樣式，包括頂部導(dǎo)航（top），中間內(nèi)容（content）和下部信息（footer）。

步驟一：把模板中的內(nèi)容保存在DOM文件中；

步驟二：編輯器對(duì)可視化界面進(jìn)行操作和修改；

步驟三：輸出客戶端，通過(guò)瀏覽器進(jìn)行解析。具體解析流程如圖2所示。

圖2的編輯器[6]采用可視化操作，對(duì)功能數(shù)據(jù)進(jìn)行操作。解析器實(shí)現(xiàn)兩個(gè)功能：（1）對(duì)DOM文件進(jìn)行解析，通過(guò)DOM文件中的標(biāo)記，解析其中的用戶數(shù)據(jù)，組裝成所需的信息；（2）根據(jù)布局的要求，將組裝所需的信息生成頁(yè)面代碼，通過(guò)瀏覽器的方式與用戶進(jìn)行交互。

3 算法思想

圖2 解析流程圖

傳統(tǒng)的DOM算法包括標(biāo)記化和樹構(gòu)建[7]。遇到多用戶大數(shù)據(jù)量的情況，可能會(huì)產(chǎn)生內(nèi)存溢出和性能低下的情況。針對(duì)這種情況，在處理過(guò)程中引入了定時(shí)預(yù)先和排序優(yōu)先的機(jī)制來(lái)改進(jìn)這個(gè)問(wèn)題。

3.1 標(biāo)記化通過(guò)標(biāo)記化，分析輸入內(nèi)容，進(jìn)行解析頁(yè)面。頁(yè)面標(biāo)記包括起始標(biāo)記、結(jié)束標(biāo)記、屬性名稱和屬性值等。在算法中加入定時(shí)函數(shù)，對(duì)標(biāo)記塊進(jìn)行跟蹤和記錄。算法標(biāo)記如圖3所示。

3.2 樹構(gòu)建

通過(guò)樹構(gòu)建器來(lái)處理標(biāo)記生成器發(fā)送的節(jié)點(diǎn)，將節(jié)點(diǎn)數(shù)據(jù)添加到DOM樹中。在樹構(gòu)建時(shí)采用排序優(yōu)先的方法，糾正嵌套錯(cuò)誤，處理未關(guān)閉的標(biāo)記。

4 實(shí)現(xiàn)

4.1 DOM文件

由DOM元素和屬性節(jié)點(diǎn)構(gòu)成的樹結(jié)構(gòu)如圖4所示。

圖3 算法標(biāo)記圖

圖4 DOM樹

通過(guò)DOM設(shè)置布局和定義內(nèi)容，以下設(shè)計(jì)一個(gè)節(jié)點(diǎn)：

……

ID表示與底層數(shù)據(jù)記錄ID號(hào)對(duì)應(yīng)，TEXT表示內(nèi)容、圖文、位置、時(shí)間、長(zhǎng)度、空間等信息。

4.2 編輯器

編輯器[8]是在頁(yè)面布局中進(jìn)行操作更新的。其中，節(jié)點(diǎn)對(duì)應(yīng)模塊，更新模塊，改變布局；每個(gè)樹形結(jié)構(gòu)對(duì)應(yīng)一類頁(yè)面布局樣式。

4.3 解析器

解析器原理是通過(guò)節(jié)點(diǎn)的內(nèi)容，規(guī)劃布局頁(yè)面，生成HTML代碼，在瀏覽器上進(jìn)行解析運(yùn)行，實(shí)現(xiàn)可視化[9]布局操作。

以XML文件為例，DOM[10]將移動(dòng)終端APP欄目解析為節(jié)點(diǎn)樹[11]，如圖5所示：

圖5 樹形節(jié)點(diǎn)

5 應(yīng)用

以某高職院校的畢業(yè)生人才評(píng)估為例，通過(guò)可視化適配器，并對(duì)人才測(cè)評(píng)模型和目標(biāo)考評(píng)指標(biāo)進(jìn)行設(shè)置[12]，之前需要重新編寫代碼，花費(fèi)較大人力物力，工作量較大。80個(gè)終端用戶并發(fā)使用時(shí)，引入可視化適配器，發(fā)現(xiàn)可復(fù)用模塊增多，代碼工作量大幅減少，原來(lái)10萬(wàn)行左右的代碼，目前有6萬(wàn)行左右的代碼，整體工作量平均減少了57%，提高了代碼復(fù)用率，縮短了項(xiàng)目開發(fā)周期，提升了開發(fā)的工作效率，節(jié)省了開發(fā)成本。工作量對(duì)比圖如圖6所示：

圖6 工作量對(duì)比圖

6 結(jié)束語(yǔ)

實(shí)踐證明，基于DOM的移動(dòng)終端可視化適配器的設(shè)計(jì)，實(shí)現(xiàn)了動(dòng)態(tài)頁(yè)面布局設(shè)置[13]，可應(yīng)對(duì)不同用戶交互場(chǎng)景下對(duì)可視化的需求[14]。下一步的工作需要加強(qiáng)對(duì)已有系統(tǒng)的集成，對(duì)跨平臺(tái)的測(cè)試等問(wèn)題進(jìn)行細(xì)化，包括對(duì)不同瀏覽器的測(cè)試和適應(yīng)性測(cè)試，并對(duì)用戶交互流程進(jìn)行細(xì)化和改進(jìn)。

[1] 李濤濤,劉連忠,陳夢(mèng)東. 基于XML技術(shù)實(shí)現(xiàn)表格的靈活構(gòu)建[J]. 計(jì)算機(jī)應(yīng)用研究, 2004,21(1)： 54-56.

[2] 李軍懷,周明全. XML在異構(gòu)數(shù)據(jù)集成中的應(yīng)用研究[J]. 計(jì)算機(jī)應(yīng)用, 2002,22(9)： 10-12.

[3] 張輝,陳雷,任志宏. 基于GMF的流程分析工具的設(shè)計(jì)與實(shí)現(xiàn)[EB/OL]. (2007-11-08)[2017-02-10]. http：// www.ibm.com/developerworks/cn/opensource/os-cn-eclipse-gmf2/part2/.

[4] CRNKOVIC I. Component-based software engineering new challenges in software development[J]. Software Focus, 2001,2(4)： 127-133.

[5] NAKHIMOVSKY A, MYERS T. Professional Java XML programming with servlets and JSP[M]. Birmingham： Peer Information Inc.,1999： 201-284.

[6] 蒲策. 基于XML的移動(dòng)終端可視化布局設(shè)計(jì)與實(shí)現(xiàn)[J].成都大學(xué)學(xué)報(bào)：自然科學(xué)版, 2015,34(4)： 371-373.

[7] 陳天偉. 基于DOM的可視化布局解析器的設(shè)計(jì)與實(shí)現(xiàn)[J]. 計(jì)算機(jī)時(shí)代, 2017,32(3)： 58-60.

[8] 劉強(qiáng)波. 一種面向界面模式的用戶界面生成技術(shù)研究[D]. 西安： 西北大學(xué), 2014.

[9] 王振輝,王振鐸,謝膺白,等. 基于XML的Web數(shù)據(jù)庫(kù)安全中間件研究與設(shè)計(jì)[J]. 計(jì)算機(jī)應(yīng)用與軟件, 2015,32(8)： 38-42.

[10] 鄧澤,劉汪洋,陳丹. 一種面向動(dòng)態(tài)連續(xù)查詢的查詢索引[J]. 計(jì)算機(jī)應(yīng)用與軟件, 2015,32(12)： 8-11.

[11] 趙艷妮,郭華磊. 基于XML的數(shù)據(jù)遷移技術(shù)在信息系統(tǒng)升級(jí)中的研究與實(shí)現(xiàn)[J]. 計(jì)算機(jī)應(yīng)用與軟件, 2014,31(12)： 52-54.

[12] 覃焌翔. 業(yè)務(wù)獨(dú)立的桌面應(yīng)用開發(fā)框架的設(shè)計(jì)和實(shí)現(xiàn)[D]. 北京： 北京郵電大學(xué), 2015.

[13] 李騰. 基于Open XML的WEB可視化報(bào)表的研究與應(yīng)用[D]. 南昌： 南昌大學(xué), 2015.

[14] 陳天偉. 基于J2EE的電子政務(wù)應(yīng)用安全設(shè)計(jì)與實(shí)現(xiàn)[D]. 成都： 電子科技大學(xué), 2007.★

Design and Implementation of Mobile Terminal Layout Parser Based DOM

CHEN Tianwei
(Urban Vocational College of Sichuan, Chengdu 610101, China)

In order to optimize the user experience of the interactive interface of the mobile terminal, DOM technique was adopted to analyze the layout characteristics of the interactive page, improve the page interaction algorithm and design an adaptation method of the page interaction of the mobile terminal based on DOM. The visual adaptor was applied to the development project of the mobile phone software. It is concluded that the visual adaptor can reduce 57% of the workload on average and enhance the code reuse rate for the multi-user operation.

DOM visualization mobile terminal

作者簡(jiǎn)介

10.3969/j.issn.1006-1010.2017.16.017

TP319

A

1006-1010(2017)16-0086-04

陳天偉. 基于DOM的移動(dòng)終端布局解析器的設(shè)計(jì)與實(shí)現(xiàn)[J]. 移動(dòng)通信, 2017,41(16): 86-89.

四川省教育廳重點(diǎn)項(xiàng)目（17ZA0236）

2017-02-15

責(zé)任編輯：劉妙 liumiao@mbcom.cn

陳天偉：高級(jí)工程師，碩士畢業(yè)于電子科技大學(xué)，現(xiàn)任職于四川城市職業(yè)學(xué)院，主要研究方向?yàn)橐苿?dòng)通信和互聯(lián)網(wǎng)技術(shù)。