左海春

跨平臺(tái)移動(dòng)輕量級(jí)動(dòng)態(tài)裝配式軟件開(kāi)發(fā)框架設(shè)計(jì)研究

左海春

(廣州南洋理工職業(yè)學(xué)院信息工程學(xué)院,廣東 廣州 510925)

隨著進(jìn)入移動(dòng)互聯(lián)時(shí)代,越來(lái)越多的開(kāi)發(fā)者致力于移動(dòng)應(yīng)用app開(kāi)發(fā)。但是，由于移動(dòng)端各類(lèi)操作系統(tǒng)的差異，導(dǎo)致應(yīng)用移植困難、開(kāi)發(fā)周期長(zhǎng)等問(wèn)題。本文通過(guò)分析現(xiàn)有的移動(dòng)跨平臺(tái)技術(shù)，結(jié)合web技術(shù)和設(shè)計(jì)模式，提出跨平臺(tái)移動(dòng)輕量級(jí)動(dòng)態(tài)裝配式軟件開(kāi)發(fā)框架的解決方案。對(duì)該框架從總體設(shè)計(jì)到詳細(xì)設(shè)計(jì)進(jìn)行了深入探討與研究。該框架對(duì)關(guān)鍵技術(shù)進(jìn)行了優(yōu)化設(shè)計(jì)，具有實(shí)現(xiàn)過(guò)程簡(jiǎn)單，開(kāi)發(fā)成本低、周期短、性能優(yōu)、體驗(yàn)優(yōu)、動(dòng)態(tài)易構(gòu)等特點(diǎn)，并適合主流移動(dòng)平臺(tái),具有良好的跨平臺(tái)性。

移動(dòng)設(shè)計(jì)；跨平臺(tái)；開(kāi)發(fā)框架；設(shè)計(jì)模式

1 現(xiàn)有移動(dòng)跨平臺(tái)開(kāi)發(fā)實(shí)現(xiàn)方法分析

1.1 虛擬機(jī)的應(yīng)用模型

虛擬機(jī)通過(guò)軟件模擬出一個(gè)完整的計(jì)算機(jī)系統(tǒng)，運(yùn)行在虛擬機(jī)上應(yīng)用軟件,不受真機(jī)的系統(tǒng)軟件與硬件的影響，使應(yīng)用軟件具有跨平臺(tái)性。例如Adobe AIR應(yīng)用虛擬機(jī)，是最典型的利用虛擬機(jī)實(shí)現(xiàn)的跨平臺(tái)應(yīng)用，可以在不同的操作系統(tǒng)中高效運(yùn)行，其主要特點(diǎn):系統(tǒng)資源占用率低，具有豐富的互聯(lián)網(wǎng)應(yīng)用，其表現(xiàn)良好的運(yùn)行速度和順暢動(dòng)畫(huà)視覺(jué)。例如java虛擬機(jī)，它是java語(yǔ)言的運(yùn)行環(huán)境，軟件運(yùn)行在虛擬機(jī)上，而不是真機(jī)上，因此使用java程序應(yīng)用非常廣泛。由于它具有很好的跨平臺(tái)性，使得java最具吸引力。在移動(dòng)應(yīng)用領(lǐng)域，運(yùn)行基于AIR平臺(tái)及基于java虛擬機(jī)平臺(tái)上開(kāi)發(fā)的應(yīng)用程序必須在客戶(hù)端安裝虛擬機(jī)，受制于硬件及系統(tǒng)平臺(tái)的支持,給客戶(hù)端帶來(lái)負(fù)擔(dān)。目前，ios平臺(tái)已宣布將不提供支持Flash技術(shù)的web引擎，而基于移動(dòng)平臺(tái)java虛擬機(jī)實(shí)現(xiàn)較困難。

1.2 B/S的應(yīng)用模型

web app開(kāi)發(fā)是一種基于HTML5框架開(kāi)發(fā)模式，這種模式下的應(yīng)用程序ui通過(guò)瀏覽器來(lái)解析呈現(xiàn)，具有天生的跨平臺(tái)優(yōu)勢(shì)。該模式S端為HTML5云服務(wù)器,B端為APP應(yīng)用客戶(hù)端。app開(kāi)發(fā)只需安裝客戶(hù)應(yīng)用的框架部份，而ui則通過(guò)網(wǎng)絡(luò)去云端取數(shù)據(jù)呈現(xiàn)給移動(dòng)用戶(hù)。bootstrap的ui，看起來(lái)還是網(wǎng)頁(yè)風(fēng)格，不像原生app的ui控件，用戶(hù)體驗(yàn)差；國(guó)內(nèi)現(xiàn)有流行mui框架，以ios 7的ui為基礎(chǔ)，補(bǔ)充了部分android系統(tǒng)特有的ui控件，比較接近原生app的ui體驗(yàn)，但無(wú)法調(diào)用手機(jī)終端的硬件設(shè)備。

2 移動(dòng)跨平臺(tái)動(dòng)態(tài)裝配式開(kāi)發(fā)框架總體設(shè)計(jì)

本框架的設(shè)計(jì)與實(shí)現(xiàn)是基于B/S體系和虛擬技術(shù)相給合，通過(guò)創(chuàng)新改良客戶(hù)組件技術(shù)，引入虛擬DOM技術(shù)，云數(shù)據(jù)引擎技術(shù)，以及移動(dòng)設(shè)備JS API接口設(shè)計(jì)，提出了跨平臺(tái)移動(dòng)輕量級(jí)動(dòng)態(tài)裝配式軟件開(kāi)發(fā)框架。它具有B/S和虛擬技術(shù)開(kāi)發(fā)優(yōu)點(diǎn),同時(shí)有更高的開(kāi)發(fā)效率與開(kāi)發(fā)學(xué)習(xí)低成本,真正實(shí)現(xiàn)原生ui體驗(yàn)。

2.1 總體設(shè)計(jì)思想

本框架是基于跨平臺(tái)輕量級(jí)動(dòng)態(tài)裝配式移動(dòng)軟件開(kāi)發(fā),這種模式中云服務(wù)器負(fù)責(zé)業(yè)務(wù)處理，客戶(hù)端只負(fù)責(zé)視圖，業(yè)務(wù)與視圖通過(guò)雙向數(shù)據(jù)通道相連。該框架專(zhuān)注于MVC架構(gòu)中的V，實(shí)現(xiàn)視圖組件化。從ui出發(fā)抽象出不同的組件，然后客戶(hù)端軟件界面像搭積木一樣把它們拼裝起來(lái)。本框架總體設(shè)計(jì)如圖1所示。本框架分七層體系設(shè)計(jì)，引入組件庫(kù)，數(shù)據(jù)模塊，頁(yè)面模塊,數(shù)據(jù)引擎，虛擬DOM，組件渲染引擎，移動(dòng)設(shè)備JS API接口等分布在不同層次。各個(gè)組成部分相互之間采用松耦合的設(shè)計(jì)方法，盡量減少它們之間的關(guān)系。例如虛擬DOM，開(kāi)發(fā)者操作虛擬DOM，將它們渲染到真正的 DOM上，這樣改善了原DOM加載慢問(wèn)題，提高程序性能。同時(shí)也引入不同平臺(tái)的渲染引擎，如將應(yīng)用代碼渲染到云服務(wù)端的DOM，或者ios/android平臺(tái)組件,實(shí)現(xiàn)跨平臺(tái)移動(dòng)軟件開(kāi)發(fā)。例如組件庫(kù)技術(shù)，開(kāi)發(fā)人員可以根據(jù)組件規(guī)范，擴(kuò)展開(kāi)發(fā)出個(gè)性化的組件,應(yīng)用于自己的應(yīng)用程序,這種設(shè)計(jì)，幫助開(kāi)發(fā)人員提高開(kāi)發(fā)效率，并提高開(kāi)發(fā)項(xiàng)目的穩(wěn)定性?？傮w上，本框架是一個(gè)松耦性框架，各個(gè)組成部分相對(duì)獨(dú)立，也能自我擴(kuò)展，個(gè)性化應(yīng)用。

圖1 跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)框架 圖2 組件庫(kù)模型

2.2 組件庫(kù)設(shè)計(jì)

如圖2所示，基于組件體系設(shè)計(jì)，開(kāi)發(fā)者可以像搭積木一樣制作移動(dòng)應(yīng)用程序，組件也可以嵌套子組件形成新的組件，新的組件又可以當(dāng)作子組件嵌套至任意組件形成新的組件，由于組件根據(jù)規(guī)范，可以擴(kuò)展功能，也可以自定義組件，新開(kāi)發(fā)的組件可以放入組件庫(kù)中，也可上傳到云組件庫(kù)共享，這樣組件功能越來(lái)越豐富，組件越來(lái)越多，這樣開(kāi)發(fā)人員可用組件越來(lái)越多，節(jié)省了UI組件開(kāi)發(fā)設(shè)計(jì)的時(shí)間成本，提高了開(kāi)發(fā)效率。本框架組件設(shè)計(jì)，通過(guò)虛擬DOM及VIEW組件渲染技術(shù),實(shí)現(xiàn)在B/S模式下原生app的用戶(hù)體驗(yàn)。

2.3 移動(dòng)設(shè)備JSAPI接口設(shè)計(jì)

通過(guò)javascript腳本調(diào)用本地設(shè)備JS API，采用異常通信技術(shù)發(fā)送請(qǐng)求，實(shí)現(xiàn)對(duì)底層設(shè)備的操作，設(shè)備接收到處理消息后通過(guò)執(zhí)行腳本組件的loadinit方法來(lái)實(shí)現(xiàn)腳本的回調(diào)。這一設(shè)計(jì)實(shí)現(xiàn)了對(duì)不同移動(dòng)設(shè)備操作DOM不帶來(lái)影響。是本框架具有強(qiáng)大的跨平臺(tái)能力原因之一。其本質(zhì)是使用異步方式與設(shè)備通信，在不需要下載插件或者小程序的情況下，使應(yīng)用程序具有非常迅速的響應(yīng)能力,改善了程序性能。

3 移動(dòng)跨平臺(tái)動(dòng)態(tài)裝配式開(kāi)發(fā)框架層次設(shè)計(jì)

本框架設(shè)計(jì)成七個(gè)層次，各個(gè)層次之間是相互獨(dú)立與相互協(xié)作。移動(dòng)開(kāi)發(fā)人員根據(jù)框架規(guī)范進(jìn)行配置(配置模塊)，在不需了解框架內(nèi)部結(jié)構(gòu)情況下就能高效地開(kāi)發(fā)出跨平臺(tái)的移動(dòng)應(yīng)用系統(tǒng)。利用本框架開(kāi)發(fā)，第一步，加載輕量級(jí)javascript引擎，進(jìn)行頁(yè)面初始化。第二步，在云服務(wù)器下載組件或自己開(kāi)發(fā)設(shè)計(jì)組件，經(jīng)過(guò)配置，然后通過(guò)拖曳方式設(shè)計(jì)移動(dòng)用戶(hù)程序界面。第三步，配置數(shù)據(jù)引擎，運(yùn)行應(yīng)用程序，從云服務(wù)器端異步加載組件數(shù)據(jù)，對(duì)于大數(shù)據(jù)可以本地緩存,再呈現(xiàn),如表格組件中的數(shù)據(jù)，可以設(shè)置成在緩沖中加載數(shù)據(jù)，當(dāng)緩沖中數(shù)據(jù)不夠或失效時(shí)，數(shù)據(jù)引擎會(huì)自動(dòng)向云服務(wù)器取數(shù)據(jù)。第四步，優(yōu)化與測(cè)式，通過(guò)測(cè)試網(wǎng)絡(luò)加載性能，優(yōu)化配置參數(shù)，例如去掉不必請(qǐng)求連接，提高加載速度，達(dá)到軟件最優(yōu)狀態(tài)。現(xiàn)對(duì)框架中的虛擬DOM，數(shù)據(jù)引擎進(jìn)行詳細(xì)設(shè)計(jì)說(shuō)明。

3.1 虛擬DOM詳細(xì)設(shè)計(jì)

用javascript對(duì)象表示DOM 信息和結(jié)構(gòu)，當(dāng)狀態(tài)變更的時(shí)候，重新渲染這個(gè) javascript 的對(duì)象結(jié)構(gòu)。虛擬DOM是保留了Element之間的層次關(guān)系和一些基本屬性。虛擬DOM里每一個(gè)Element實(shí)際上只設(shè)置有用的幾個(gè)屬性，所以比BW DOM快很多。具體算法實(shí)現(xiàn)：(1)用 javascript 對(duì)象結(jié)構(gòu)表示 DOM 樹(shù)的結(jié)構(gòu)；然后用這個(gè)樹(shù)構(gòu)建一個(gè)真正的 DOM 樹(shù)，插到文檔當(dāng)中;(2)當(dāng)狀態(tài)變更的時(shí)候，重新構(gòu)造一棵新的對(duì)象樹(shù)。然后用新的樹(shù)和舊的樹(shù)進(jìn)行比較，記錄兩棵樹(shù)差異;(3)把所記錄的差異應(yīng)用到步驟(1)所構(gòu)建的真正的DOM樹(shù)上，視圖就更新了。

3.2 數(shù)據(jù)引擎詳細(xì)設(shè)計(jì)

客戶(hù)端組件到云服務(wù)器端的數(shù)據(jù)傳遞由數(shù)據(jù)引擎來(lái)完成，客戶(hù)端的數(shù)據(jù)獲取與存儲(chǔ)也是由數(shù)據(jù)引擎完成。數(shù)據(jù)引擎在客戶(hù)端與服務(wù)器間形成一條數(shù)據(jù)通道，實(shí)現(xiàn)對(duì)客戶(hù)組件數(shù)據(jù)抽注?？蛻?hù)端提交請(qǐng)求的數(shù)據(jù)先提交給數(shù)據(jù)引擎存儲(chǔ)，然后再將數(shù)據(jù)發(fā)送給服務(wù)器。在服務(wù)器對(duì)應(yīng)的業(yè)務(wù)程序被執(zhí)行，然后把需要返回的數(shù)據(jù)存儲(chǔ)到數(shù)據(jù)引擎中，最后通過(guò)解析，由客戶(hù)端展示顯示出來(lái)。

數(shù)據(jù)引擎由單獨(dú)的一個(gè)類(lèi)設(shè)計(jì)而成，執(zhí)行算法如下：

(1)執(zhí)行then方法，CDEngine異步操作成功時(shí),執(zhí)行回調(diào)方法進(jìn)入callbacks隊(duì)列；(2)創(chuàng)建CDEngine實(shí)例時(shí)傳入的函數(shù)賦予給另一函數(shù)的參數(shù)，即resolve，參數(shù)value表示異步操作返回的結(jié)果，當(dāng)then方法執(zhí)行成功后，將調(diào)用resolve方法，這時(shí)候?qū)allbacks隊(duì)列中的回調(diào)函數(shù)將全部執(zhí)行。

4 結(jié)語(yǔ)

本文通過(guò)分析現(xiàn)有的跨平臺(tái)技術(shù)，結(jié)合web技術(shù)和設(shè)計(jì)模式，提出跨平臺(tái)移動(dòng)輕量級(jí)動(dòng)態(tài)裝配式軟件開(kāi)發(fā)框架的解決方案。本框架實(shí)現(xiàn)前后端高度解耦,前端的所有邏輯處理均使用JS進(jìn)行處理，而后端為純粹的業(yè)務(wù)邏輯處理;前端開(kāi)發(fā)面向組件對(duì)象化,通過(guò)JS面向?qū)ο筇匦赃M(jìn)行簡(jiǎn)單封裝，在業(yè)務(wù)邏輯數(shù)據(jù)請(qǐng)求的處理上，與后端數(shù)據(jù)類(lèi)型、實(shí)體結(jié)構(gòu)以及處理邏輯上保持一致;由于該框架對(duì)關(guān)鍵技術(shù)進(jìn)行優(yōu)化設(shè)計(jì)，運(yùn)用該框架開(kāi)發(fā)，具有實(shí)現(xiàn)過(guò)程簡(jiǎn)單，開(kāi)發(fā)成本低、周期短、性能優(yōu)、體驗(yàn)優(yōu)、動(dòng)態(tài)易構(gòu)等特點(diǎn)，并適合主流移動(dòng)平臺(tái),具有良好的跨平臺(tái)性。

[1] 劉玉.基于跨平臺(tái)的移動(dòng)應(yīng)用開(kāi)發(fā)框架研究[D].北京交通大學(xué)，2014.

[2] 劉海巖,梁建龍.基于中間件的分布式系統(tǒng)開(kāi)發(fā)過(guò)程的研究[J].計(jì)算機(jī)應(yīng)用研究，2004，(01).

[3] 劉林.基于多模式的軟件項(xiàng)目開(kāi)發(fā)過(guò)程管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[D].山東大學(xué)，2014.

Researchondevelopmentframeworkdesignofcross-platformmobilelight-weightdynamicfabricatedsoftware

ZUOHai-chun

(GuangzhouNanyanPolytechnic,GuangzhouGuangdong510925,China)

As the era of mobile internet is ushering in，an increasing number of developers are engaged in development of mobile applications.Because of different operational systems in mobile terminals，all applications face the problems such as transplantation difficulty and long development cycle.This paper，based on the existing cross-platform mobile technology and combined with web technology and design pattern，put forward a solution to development framework design of cross-platform mobile light-weight dynamic fabricated software.The overall and detailed designs of the framework are explored and studied deeply in this paper.The framework optimizes the key technology，using it for development has advantages of low cost，short cycle，excellent performance，great experience，and dynamic reframing，so that it will suit the mainstream mobile platform and have good cross-platform ability.

Mobile design；Cross-platform;Development framework;Design pattern

2017-08-07

左海春(1977-),男，碩士,高級(jí)工程師，主要研究方向:軟件工程,軟件應(yīng)用研究,網(wǎng)絡(luò)安全研究.

1001-9383(2017)03-0007-04

TP311

A