蔡 璟，丁宗銀

（江蘇電力信息技術(shù)有限公司，江蘇 南京 210024）

0 引 言

隨著移動(dòng)互聯(lián)網(wǎng)的迅猛發(fā)展，互聯(lián)網(wǎng)開啟了“Web2.0”時(shí)代。隨著信息化的推進(jìn)，公眾能從多渠道獲取信息，以低成本傳播，并高效地與之互動(dòng)。信息化程度的提升降低了社會(huì)的不透明度，提高了公眾的自我意識(shí)。如何充分利用移動(dòng)互聯(lián)網(wǎng)技術(shù)提高企業(yè)管理水平和客戶服務(wù)質(zhì)量，成為電網(wǎng)企業(yè)信息化建設(shè)工作的一項(xiàng)重要課題。

在國(guó)網(wǎng)公司的科學(xué)領(lǐng)導(dǎo)下，結(jié)合移動(dòng)信息化發(fā)展趨勢(shì)與國(guó)內(nèi)外領(lǐng)先實(shí)踐，江蘇電力信息技術(shù)有限公司于2014年承建了國(guó)網(wǎng)移動(dòng)平臺(tái)的建設(shè)。經(jīng)過2年時(shí)間的不斷完善，已完成企業(yè)級(jí)移動(dòng)信息化規(guī)劃與頂層設(shè)計(jì)，重點(diǎn)解決國(guó)網(wǎng)各業(yè)務(wù)部門獨(dú)立推進(jìn)移動(dòng)化帶來的缺少戰(zhàn)略指引、重復(fù)建設(shè)、各業(yè)務(wù)間難以有效集成、標(biāo)準(zhǔn)規(guī)范不統(tǒng)一、安全保障與控制力度不足和技術(shù)路線多樣等問題。目前，移動(dòng)平臺(tái)為業(yè)務(wù)應(yīng)用提供了大量基礎(chǔ)開發(fā)組件，包括終端設(shè)備訪問組件、數(shù)據(jù)存取組件和網(wǎng)絡(luò)通信組件等，為移動(dòng)業(yè)務(wù)應(yīng)用提供了統(tǒng)一跨平臺(tái)開發(fā)接口，方便了移動(dòng)應(yīng)用的開發(fā)。

隨著外部環(huán)境和內(nèi)部業(yè)務(wù)的變化，國(guó)網(wǎng)公司提出支撐移動(dòng)業(yè)務(wù)應(yīng)用“短、平、快”的構(gòu)建要求。項(xiàng)目組針對(duì)此要求提出移動(dòng)應(yīng)用開發(fā)框架的建設(shè)，以快捷高效地構(gòu)建移動(dòng)應(yīng)用，提升移動(dòng)應(yīng)用的安全性和穩(wěn)定性。目前，常規(guī)的移動(dòng)開發(fā)技術(shù)如基于標(biāo)準(zhǔn)的前端HTML5框架，不能夠?qū)崿F(xiàn)動(dòng)態(tài)加載。不僅導(dǎo)致了頁(yè)面的錯(cuò)綜復(fù)雜，還消耗了終端設(shè)備過多的流量和電量，不利于用戶體驗(yàn)。另外，這些框架編程不靈活且耦合性高，尤其涉及到展現(xiàn)處理、文件配置和庫(kù)的讀取等方面時(shí)，缺少模塊化開發(fā)方式。在終端適配方面，由于移動(dòng)端尺寸多，不同終端需要單獨(dú)匹配，而不同分辨率需要適配等帶來了各種問題。沒有統(tǒng)一的標(biāo)準(zhǔn)和框架來制定，使得開發(fā)的代碼量不斷增多且效率低下。同樣，移動(dòng)端缺少公共組件封裝（驗(yàn)證插件、彈窗插件、圖形插件、下拉刷新上拉加載插件、滑動(dòng)插件、省市區(qū)選擇插件、時(shí)間插件等），導(dǎo)致開發(fā)周期長(zhǎng)，可維護(hù)性低。

通過構(gòu)建基于移動(dòng)應(yīng)用平臺(tái)的開發(fā)框架，以模塊化方式構(gòu)建移動(dòng)應(yīng)用，并提供豐富的表單、圖表等移動(dòng)端常用界面，以便業(yè)務(wù)應(yīng)用開發(fā)，提高移動(dòng)應(yīng)用開發(fā)效率，縮短建設(shè)周期，降低建設(shè)成本。同時(shí)，結(jié)合移動(dòng)互聯(lián)網(wǎng)環(huán)境下的特定限制，如網(wǎng)絡(luò)環(huán)境穩(wěn)定性差、個(gè)人移動(dòng)流量有限等，構(gòu)建動(dòng)態(tài)加載技術(shù)，增強(qiáng)移動(dòng)應(yīng)用的可用性和穩(wěn)定性，通過延遲加載技術(shù)提升人機(jī)界面的交互順暢度，提升用戶體驗(yàn)。

1 國(guó)內(nèi)外研究水平綜述

1.1 國(guó)內(nèi)外研究情況

隨著移動(dòng)技術(shù)如火如荼的開展，各大互聯(lián)網(wǎng)企業(yè)都在從不同角度考慮如何降低移動(dòng)應(yīng)用的開發(fā)成本，打造生態(tài)鏈。通過版本的快速迭代，挖掘用戶需求，體現(xiàn)商業(yè)價(jià)值，并通過構(gòu)建開發(fā)框架提升效率。就國(guó)內(nèi)而言，2015年移動(dòng)應(yīng)用開發(fā)框架和開發(fā)工具發(fā)展迅猛，各種開發(fā)工具和開發(fā)框架層出不窮。快速響應(yīng)用戶需求，降低開發(fā)成本，已經(jīng)成為各大公司的發(fā)展方向之一。隨著移動(dòng)應(yīng)用開發(fā)對(duì)降低開發(fā)成本、降低開發(fā)難度的需求日益提升，參照國(guó)內(nèi)外移動(dòng)開發(fā)的經(jīng)驗(yàn)，應(yīng)用開發(fā)框架化成為解決問題的關(guān)鍵。

1.2 Bootstrap移動(dòng)應(yīng)用開發(fā)框架

Bootstrap是由Twitter公司發(fā)起建設(shè)的開源產(chǎn)品。它主要是基于HTML、CSS和JavaScript語言進(jìn)行開發(fā)，在jQuery基礎(chǔ)上進(jìn)行相關(guān)改進(jìn)，形成一套具有獨(dú)立風(fēng)格的、用于快速開發(fā)Web應(yīng)用程序和網(wǎng)站的前端開源框架。目前，Twitter官網(wǎng)已全面使用bootstrap框架進(jìn)行開發(fā)。除此之外，如Ghost、Ghost中文網(wǎng)和Laravel等一些優(yōu)秀的網(wǎng)站，也都使用bootstrap框架進(jìn)行開發(fā)與搭建。該框架的優(yōu)點(diǎn)是可以快速適配PC端、移動(dòng)端的界面展示，具有兼容性高、響應(yīng)式布局和柵格式設(shè)計(jì)等特點(diǎn)。該框架的不足是無法滿足移動(dòng)應(yīng)用開發(fā)動(dòng)態(tài)加載的需求，而且沒有完善的公用組件庫(kù)供開發(fā)調(diào)用。

1.3 Amaze UI移動(dòng)應(yīng)用開發(fā)框架

Amaze UI是由北京美通云動(dòng)公司開發(fā)的國(guó)內(nèi)首款開源跨屏、輕量級(jí)和高性能的前端框架。該框架以移動(dòng)優(yōu)先為理念，從小屏逐步擴(kuò)展到大屏，能夠適配大部分設(shè)備屏幕。結(jié)合CSS3技術(shù)，實(shí)現(xiàn)了動(dòng)畫交互，使得展現(xiàn)效果更加平滑、高效，Web應(yīng)用加載速度更快。同時(shí)，該框架包含豐富的CSS、Js和Web組件，可以快速構(gòu)建出體驗(yàn)出色的跨屏界面。相比國(guó)外前端框架，Amaze UI可以根據(jù)用戶自行設(shè)置代理調(diào)整字體和排版，實(shí)現(xiàn)更好、更舒適的體驗(yàn)效果。Amazeui官網(wǎng)已經(jīng)全面采用該框架進(jìn)行設(shè)計(jì)。此外，如國(guó)內(nèi)的天狗論壇、我最靠譜和無聊等網(wǎng)站，都采用了Amazeui框架進(jìn)行開發(fā)與設(shè)計(jì)。該框架的不足也是不具備動(dòng)態(tài)加載技術(shù)，且沒有模塊快構(gòu)建技術(shù)。

1.4 jQueryMobile移動(dòng)應(yīng)用開發(fā)框架

jQueryMobile是Alexander Schmitz領(lǐng)導(dǎo)的團(tuán)隊(duì)開發(fā)的開源項(xiàng)目。它主要是在流行的jQuery和用戶界面基礎(chǔ)上進(jìn)行構(gòu)建，為移動(dòng)應(yīng)用開發(fā)人員提供了一個(gè)可在不同移動(dòng)平臺(tái)實(shí)現(xiàn)界面風(fēng)格統(tǒng)一的開發(fā)框架。jQuery具有良好的兼容性，支持高端設(shè)備和低端設(shè)備，可為不支持javascript的設(shè)備提供最好的體驗(yàn)。該框架還提供一個(gè)主題系統(tǒng)，允許開發(fā)人員自定義界面樣式。jQueryMobile框架目前已經(jīng)得到了國(guó)內(nèi)外眾多網(wǎng)站開發(fā)商的認(rèn)可，如photowise、touch-gallery和coldfusionjedi等知名網(wǎng)站，都使用了JqueryMobile框架進(jìn)行開發(fā)。但是，該框架的不足在于它無法實(shí)現(xiàn)不同設(shè)備的分辨率和尺寸適配問題，而且不具備動(dòng)態(tài)加載技術(shù)。

2 存在的問題

國(guó)網(wǎng)公司關(guān)于移動(dòng)應(yīng)用的構(gòu)建要求快速，運(yùn)行時(shí)要節(jié)省移動(dòng)端資源，并要能夠快速適配不同終端屏幕大小。而目前Bootstrap、amazeui和jQueryMobile等移動(dòng)應(yīng)用框架僅解決某一個(gè)具體移動(dòng)應(yīng)用場(chǎng)景，如Bootstrap僅解決終端屏幕適配，但解決不了構(gòu)建快速需求。因此，一套經(jīng)過整合的移動(dòng)應(yīng)用開發(fā)框架，是移動(dòng)應(yīng)用開發(fā)人員實(shí)現(xiàn)移動(dòng)應(yīng)用快速開發(fā)并支持應(yīng)用靈活適配、輕量化運(yùn)行的前提。

2.1 Web框架的動(dòng)態(tài)加載技術(shù)

針對(duì)移動(dòng)互聯(lián)網(wǎng)環(huán)境下的移動(dòng)端內(nèi)存、流量、電池資源有限，通過使用動(dòng)態(tài)加載技術(shù)，將程序文件打散成多個(gè)小文件，以延遲加載技術(shù)實(shí)現(xiàn)按需加載，以提升用戶體驗(yàn)，降低移動(dòng)端的資源使用率。在業(yè)務(wù)和樣式上，前端開發(fā)人員只需要在代碼塊頭部引用需要的插件庫(kù)和樣式代碼即可。在邏輯上，開發(fā)人員只需調(diào)用后端提供的接口進(jìn)行讀取與顯示。對(duì)于不同項(xiàng)目在不同服務(wù)器上有不同的部署要求，這樣動(dòng)態(tài)加載成為了一個(gè)難點(diǎn)。所以，在模塊的引用上，需做到路徑的統(tǒng)一與規(guī)則的一致。

2.2 模塊化構(gòu)建技術(shù)

在前端人員開發(fā)移動(dòng)應(yīng)用項(xiàng)目的基礎(chǔ)上，通過使用模塊化構(gòu)建技術(shù)，將每個(gè)頁(yè)面分成多個(gè)功能進(jìn)行分塊化處理。這樣既可快速實(shí)現(xiàn)移動(dòng)端的頁(yè)面獲取，也可在移動(dòng)端調(diào)試時(shí)快速定位相關(guān)問題。通過定義多個(gè)模塊相互調(diào)用，既保證了各個(gè)模塊之間不發(fā)生沖突，又提高了開發(fā)人員的編碼效率。針對(duì)多個(gè)模塊化的調(diào)用、區(qū)分較復(fù)雜，在建立不同模塊化的同時(shí)，必須嚴(yán)格規(guī)定模塊名稱及其信息。另外，開發(fā)人員在創(chuàng)建模塊時(shí)如何對(duì)模塊的類型進(jìn)行分類，成為開發(fā)時(shí)的難點(diǎn)。

2.3 多分辨率、多尺寸移動(dòng)終端界面適配技術(shù)

針對(duì)移動(dòng)端的各個(gè)終端設(shè)備，在基于bootstrap框架的基礎(chǔ)上，通過媒體查詢功能設(shè)置統(tǒng)一的樣式，通過視窗屬性內(nèi)容、設(shè)置等比例窗口，實(shí)現(xiàn)了不同手機(jī)型號(hào)的不同分辨率、不同尺寸終端無法適配的問題，進(jìn)一步減少了代碼的冗余和再次開發(fā)。在各種手機(jī)型號(hào)與尺寸呈現(xiàn)多元化的時(shí)代，前端無法做到所有手機(jī)的分辨率一致，只能滿足部分手機(jī)的適配，這將是本框架需要研究解決的難題[1]。

2.4 移動(dòng)端公用組件的封裝

基于bootstrap框架下的一些組件封裝的有限性，可通過對(duì)時(shí)間插件、彈窗插件、圖形插件、下拉刷新上拉加載插件、滑動(dòng)插件、省市區(qū)選擇插件和提示信息插件等一些插件進(jìn)行封裝，按需調(diào)用，按需加載，以做到不同頁(yè)面引用不同的插件，實(shí)現(xiàn)組件的調(diào)用，大幅減少前端開發(fā)人員的時(shí)間，同時(shí)提高用戶體驗(yàn)。

3 框架設(shè)計(jì)

3.1 Web框架的動(dòng)態(tài)加載技術(shù)

動(dòng)態(tài)加載技術(shù)是按照依賴關(guān)系的遞歸執(zhí)行文檔創(chuàng)建腳本庫(kù)的過程，具體通過獲取模塊代碼方法中的內(nèi)容去創(chuàng)建其中的腳本以實(shí)現(xiàn)動(dòng)態(tài)加載。通過回調(diào)函數(shù)分段加載，按照依賴就近原則遞歸執(zhí)行腳本，從上到下依次加載文件，通過動(dòng)態(tài)加載的文件獲取回調(diào)函數(shù)進(jìn)行邏輯判斷實(shí)現(xiàn)分段加載。如此既減少了網(wǎng)絡(luò)請(qǐng)求，也提升了用戶體驗(yàn)。

3.2 模塊化構(gòu)建技術(shù)

模塊化是按照預(yù)先配置、適時(shí)加載、主模塊調(diào)用子模塊、子模塊再調(diào)用依賴模塊進(jìn)行構(gòu)建的一種技術(shù)。業(yè)務(wù)邏輯的模塊化開發(fā)，前端開發(fā)人員可以定義多個(gè)模塊來相互調(diào)用，而各個(gè)模塊之間不發(fā)生沖突行為。所有用到的插件都必須放在模型層下面，配置別名時(shí)直接書寫對(duì)應(yīng)的路徑即可。其他頁(yè)面引用時(shí)可直接獲取，必須嚴(yán)格按照格式來書寫，且定義的別名不能重復(fù)。

3.3 多分辨率、多尺寸移動(dòng)終端界面適配技術(shù)

研究多分辨率、多尺寸移動(dòng)終端界面適配技術(shù)，將移動(dòng)端瀏覽器進(jìn)行等比設(shè)置，按照各個(gè)手機(jī)尺寸進(jìn)行等比例加載。在框架開發(fā)的代碼中，僅需設(shè)置寬度和視口設(shè)置內(nèi)容等必須屬性，即可適配移動(dòng)端各個(gè)設(shè)備、各個(gè)型號(hào)的手機(jī)，做到一套代碼多次利用，一套框架適用整個(gè)前端。框架設(shè)計(jì)采用通用樣式，用于控制不同的展現(xiàn)形式；可通過修改配置文件里面默認(rèn)的加載順序控制展現(xiàn)效果。同時(shí)，對(duì)彈出效果、用戶等待效果和數(shù)據(jù)加載效果等，做統(tǒng)一展現(xiàn)形式的設(shè)計(jì)[2]。

Sea.js追求簡(jiǎn)單、自然的代碼書寫和組織方式，具有以下核心特性：

（1）簡(jiǎn)單友好的模塊定義規(guī)范：Sea.js遵循CMD規(guī)范，可以像Node.js一般書寫模塊代碼。

（2）自然直觀的代碼組織方式：依賴的自動(dòng)加載、配置的簡(jiǎn)潔清晰，可以讓我們更多地享受編碼的樂趣。

（3）Sea.js還提供常用插件，非常有助于開發(fā)調(diào)試和性能優(yōu)化，并具有豐富的可擴(kuò)展接口。

3.4 移動(dòng)端公用組件的封裝

通過擴(kuò)展原生庫(kù)的方法合并自定義對(duì)象，方便前端人員快速調(diào)用。研究時(shí)間插件、彈窗插件、圖形插件、下拉刷新上拉加載插件、滑動(dòng)插件、省市區(qū)選擇插件等插件的封裝接口、調(diào)用形式和應(yīng)用規(guī)范，確保在各種業(yè)務(wù)場(chǎng)景下能夠直接按需加載進(jìn)行動(dòng)態(tài)調(diào)用，即可方便調(diào)用與快速生成。

4 移動(dòng)應(yīng)用開發(fā)框架功能架構(gòu)

基于移動(dòng)平臺(tái)的應(yīng)用開發(fā)框架功能架構(gòu)主要包括模型層、控制層、視圖層和配置層，如圖1所示。

圖1 基于移動(dòng)平臺(tái)的應(yīng)用開發(fā)框架功能架構(gòu)

4.1 模型層

模型層主要研究移動(dòng)端公用組件的封裝，使開發(fā)人員可以無障礙地調(diào)用封裝好的插件?；谶@些插件，最終實(shí)現(xiàn)了代碼的簡(jiǎn)單化、調(diào)用的快速化、實(shí)現(xiàn)的簡(jiǎn)潔化和使用的標(biāo)準(zhǔn)化等統(tǒng)一功能編碼。移動(dòng)業(yè)務(wù)應(yīng)用可以直接復(fù)用，根據(jù)業(yè)務(wù)需求快速組合形成應(yīng)用界面，縮減應(yīng)用開發(fā)周期?；谀K化定義，將公用的組件以插件的形式放在配置層，按照模塊的按需加載進(jìn)行動(dòng)態(tài)調(diào)用，包括時(shí)間插件、彈窗插件、圖形插件、下拉刷新上拉加載插件、滑動(dòng)插件和省市區(qū)選擇插件等。這些插件方便前端人員快速調(diào)用，且只需要寫極少部分代碼就可實(shí)現(xiàn)效果，做到了急速開發(fā)、效率優(yōu)先，快速完成一個(gè)項(xiàng)目的大部分需求。

主要插件包括如下幾種。

時(shí)間插件。時(shí)間選擇作為手機(jī)端經(jīng)常用到的插件之一，方便用戶實(shí)現(xiàn)時(shí)間選擇。時(shí)間插件基于觸摸設(shè)備的日期和時(shí)間選擇器，做到了用戶的友好體驗(yàn)。作為一款滑動(dòng)選擇插件，用戶可以自定義主題樣式。

彈窗插件。彈窗插件用于將應(yīng)用操作以窗口方式向用戶彈出，提醒或警告用戶操作。彈窗插件通過自定義對(duì)話、確認(rèn)對(duì)話和模態(tài)框等類型，以較少的代碼量實(shí)現(xiàn)快速調(diào)用，并支持跨平臺(tái)，實(shí)現(xiàn)與主流移動(dòng)瀏覽器統(tǒng)一的用戶界面進(jìn)行顯示。

圖形插件。圖形插件為用戶提供豐富的交互圖表可視化效果，可實(shí)現(xiàn)折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖、用于統(tǒng)計(jì)的盒形圖、用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖、用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、多維數(shù)據(jù)可視化的平行坐標(biāo)等，還有用于商業(yè)智能的漏斗圖、儀表盤，且支持圖與圖之間的混搭。圖形插件支持直角坐標(biāo)系、極坐標(biāo)系和地理坐標(biāo)系，同時(shí)提供更細(xì)粒度的按需打包能力。它可將圖形應(yīng)用代碼按需打包使用，降低了網(wǎng)絡(luò)交互流量。

4.2 控制層

控制層包括Web動(dòng)態(tài)加載框架和模塊化構(gòu)建容器。

Web動(dòng)態(tài)加載框架，如圖2所示。動(dòng)態(tài)加載技術(shù)是通過調(diào)用框架Js庫(kù)提供的Use方法進(jìn)行檢查。如果緩存中存在需要獲取的模塊，則加載該模塊，然后通過綁定事件完成回調(diào)函數(shù)模塊的動(dòng)態(tài)加載；如果緩存中沒有需要的模塊，那么先創(chuàng)建模塊，然后通過加載該模塊得到模塊中的方法和屬性。加載模塊后檢查該模塊是否包含子模塊。如有子模塊，則獲取，然后通過綁定事件由里向外傳遞觸發(fā)自身事件；如果沒有子模塊，則直接觸發(fā)自身事件，然后完成回調(diào)函數(shù)模塊的動(dòng)態(tài)加載。Web動(dòng)態(tài)加載框架通過使用配置文件來實(shí)現(xiàn)依賴的自動(dòng)加載、配置的簡(jiǎn)潔清晰，可提高可維護(hù)性、模塊化編程、動(dòng)態(tài)加載、前端性能優(yōu)化、推崇就近和職責(zé)單一原則。以此為基礎(chǔ)的開發(fā)框架可以做到靈活可配置，降低了開發(fā)人員的技術(shù)門檻。

圖2 動(dòng)態(tài)加載技術(shù)流程

模塊化構(gòu)建容器?；谝苿?dòng)平臺(tái)業(yè)務(wù)框架的模塊進(jìn)行分類，主要分為流程引擎模塊、業(yè)務(wù)模塊和頁(yè)面模塊。前端開發(fā)人員基于這幾類模塊，可自行定義子模塊，并相互調(diào)用。各個(gè)模塊的定義只需模塊名稱不同即可，然后在不同的文件夾、目錄、方法中調(diào)用。各個(gè)模塊之間不會(huì)發(fā)生沖突行為，降低了耦合性，增強(qiáng)了團(tuán)隊(duì)的開發(fā)效率，同時(shí)提升了用戶體驗(yàn)。

流程引擎模塊。該模塊主要是移動(dòng)業(yè)務(wù)應(yīng)用向服務(wù)端發(fā)送請(qǐng)求時(shí)，通過控制器對(duì)當(dāng)前的數(shù)據(jù)進(jìn)行存儲(chǔ)。當(dāng)程序開始運(yùn)行時(shí)，該模塊能夠自動(dòng)去執(zhí)行和加載程序，按照步驟和順序進(jìn)行加載操作，使當(dāng)前所需信息返回至當(dāng)前頁(yè)面，如圖3所示。流程管理器將對(duì)當(dāng)前用戶所請(qǐng)求的業(yè)務(wù)進(jìn)行分類，且不同業(yè)務(wù)類型的請(qǐng)求有著不同的分類，業(yè)務(wù)請(qǐng)求執(zhí)行的代碼也不同。當(dāng)代碼被全部加載執(zhí)行后，整個(gè)頁(yè)面的請(qǐng)求才會(huì)被自動(dòng)終止。前端開發(fā)人員可以靈活設(shè)置或定義不同的執(zhí)行模塊，也就相當(dāng)于給一個(gè)模塊或者方法定義一個(gè)別名。前端開發(fā)人員不需要關(guān)心每一個(gè)流程，只需要知道當(dāng)前的配置和定義即可。

業(yè)務(wù)模塊。當(dāng)前模塊是實(shí)現(xiàn)與服務(wù)端交互的定義，不同的模塊實(shí)現(xiàn)的業(yè)務(wù)功能不同，結(jié)構(gòu)如圖4所示。每個(gè)業(yè)務(wù)包含多個(gè)自定義模塊和實(shí)例，每個(gè)模塊可以自定義多個(gè)方法，相當(dāng)于當(dāng)前自定義模塊的方法一、方法二之類。各個(gè)模塊中，模塊業(yè)務(wù)主要實(shí)現(xiàn)當(dāng)前的組件調(diào)用、邏輯處理和數(shù)據(jù)庫(kù)訪問等功能。當(dāng)各個(gè)組件被調(diào)用時(shí)，當(dāng)前所需要的功能模塊會(huì)被展現(xiàn)在頁(yè)面，而邏輯處理的方法被業(yè)務(wù)功能所執(zhí)行到下一步時(shí)，才會(huì)與服務(wù)端進(jìn)行交互。這里需要訪問數(shù)據(jù)庫(kù)信息，及時(shí)返回給前端開發(fā)人員，然后解析輸出至頁(yè)面并顯示。基于前端的開發(fā)人員主要是定義其中的方法，并處理當(dāng)前的業(yè)務(wù)邏輯，最后使用異步請(qǐng)求獲取數(shù)據(jù)來實(shí)現(xiàn)頁(yè)面間的信息展示的一個(gè)業(yè)務(wù)流程。

圖3 流程引擎模塊結(jié)構(gòu)

圖4 業(yè)務(wù)模塊結(jié)構(gòu)

頁(yè)面模塊。作為顯示層，頁(yè)面模塊是最重要的框架模塊，如圖5所示。它主要是從服務(wù)端獲取數(shù)據(jù)，然后進(jìn)行解析，最后在頁(yè)面展示的一個(gè)過程。圖5展示了當(dāng)成功調(diào)用服務(wù)端的一個(gè)方法后，服務(wù)端會(huì)返回一個(gè)實(shí)例，這時(shí)頁(yè)面模塊通過解析引擎從模塊中取出數(shù)據(jù)，然后將數(shù)據(jù)進(jìn)行實(shí)例化，并通過頁(yè)面模塊進(jìn)行解析展示。

圖5 頁(yè)面模板模塊結(jié)構(gòu)

4.3 視圖層

視圖層作為人機(jī)交互的重要載體，通過多分辨率、多尺寸移動(dòng)終端界面適配技術(shù)，基于Bootstrap框架，無縫納入平臺(tái)的應(yīng)用開發(fā)框架中，同時(shí)使用框架中設(shè)置的默認(rèn)字體。由于Bootstrap在終端適配方面已經(jīng)有所積累且較為成熟，本框架考慮在Bootstrap基礎(chǔ)上進(jìn)行深度定制。具體內(nèi)容包括如下方面。

柵格系統(tǒng)，是基于Bootstrap提供的一套響應(yīng)式、屏幕自適應(yīng)并以柵格系統(tǒng)布局的一套框架。柵格系統(tǒng)是通過一系列行和列組合來布局頁(yè)面，在創(chuàng)建好的布局中放入網(wǎng)頁(yè)內(nèi)容。行必須包含在容器中，以便為其賦予合適的排列和內(nèi)補(bǔ)。內(nèi)容必須放在列內(nèi)，且只有列可以作為行的直接子元素。使用柵格系統(tǒng)可以使前端開發(fā)更簡(jiǎn)單、更快速且更容易上手，便于開發(fā)與維護(hù)。

響應(yīng)式布局。在基于Bootstrap框架開發(fā)中，通過移動(dòng)端自適應(yīng)不同設(shè)備的方式來展示當(dāng)前的頁(yè)面，動(dòng)態(tài)調(diào)整各個(gè)設(shè)備頁(yè)面的整體布局與各個(gè)元素的樣式，使不同尺寸的設(shè)備展示的內(nèi)容整體一致。這樣既減少了代碼冗余，也節(jié)約了開發(fā)時(shí)間和成本。

可擴(kuò)展的插件技術(shù)。由于Bootstrap本身支持可二次擴(kuò)展，可通過擴(kuò)展實(shí)現(xiàn)圖標(biāo)展示。而分辨率顯示不依賴字體，因此可以擴(kuò)展一套圖標(biāo)字體在移動(dòng)設(shè)備瀏覽器上，通過為視口設(shè)置屬性的內(nèi)容禁用其縮放功能。禁用縮放功能后，用戶只能滾動(dòng)屏幕，更貼近原生應(yīng)用的展示效果。

靈活可配置的展現(xiàn)技術(shù)。使用此框架中，樣式表中設(shè)置了默認(rèn)字體、樣式，用于控制不同的展現(xiàn)形式，可通過修改配置文件中默認(rèn)的加載順序控制展現(xiàn)效果，同時(shí)對(duì)彈出、用戶等待、數(shù)據(jù)加載、獲取參數(shù)等設(shè)計(jì)，實(shí)現(xiàn)統(tǒng)一的展現(xiàn)形式。

4.4 配置層

配置層與模塊化構(gòu)建容器緊密相連，通過對(duì)配置文件的詳細(xì)設(shè)計(jì)，有效配置框架的公共組件和業(yè)務(wù)開發(fā)組件，提升效率。

5 移動(dòng)應(yīng)用開發(fā)框架技術(shù)架構(gòu)

移動(dòng)應(yīng)用框架技術(shù)架構(gòu)主要包括模型層、視圖層和控制層。每層通過不同的表現(xiàn)達(dá)到代碼的分離和運(yùn)用。

不同的編程語言，都存在MVC的框架。其中，M（Model）指業(yè)務(wù)模型，V（View）指用戶界面，C（Control）則指控制器。前端使用MVC將各部分代碼進(jìn)行分離，從而使程序開發(fā)過程清晰明了。前端開發(fā)人員可以用不同的形式展示當(dāng)前的框架，如統(tǒng)計(jì)數(shù)據(jù)可使用折線圖、餅圖等形式來展示。視圖層隨著控制層的改變而改變?！澳Ｐ?視圖-控制器”模式是一個(gè)有用的工具箱?；谝苿?dòng)應(yīng)用開發(fā)框架的開發(fā)設(shè)計(jì)過程也遵循MVC設(shè)計(jì)理念，具體設(shè)計(jì)過程如下[3]。

圖6 移動(dòng)應(yīng)用開發(fā)框架技術(shù)架構(gòu)

Model層，模型層也稱對(duì)象屬性層，在前端框架中包含了所有的插件庫(kù)和一些公用的js組件。所以，模型層至關(guān)重要，在開發(fā)過程中必須被引用在所開發(fā)的項(xiàng)目?jī)?nèi)。應(yīng)用所用到的js庫(kù)、樣式庫(kù)以及前端經(jīng)常使用的時(shí)間插件、彈窗插件、圖形插件、下拉刷新上拉加載插件、滑動(dòng)插件、省市區(qū)選擇插件和提示信息插件等，都放在模型層。

View層，顧名思義就是視圖層，即顯示相關(guān)的靜態(tài)頁(yè)面，或者從js庫(kù)中加載的動(dòng)態(tài)數(shù)據(jù)。視圖層必須嚴(yán)格按照標(biāo)準(zhǔn)形式操作相關(guān)代碼，不可在視圖層出現(xiàn)邏輯相關(guān)代碼，必須全部是html標(biāo)簽組成的頁(yè)面。視圖層即展示給用戶且用戶可操作的界面，在整個(gè)框架中扮演著重要角色。

Control層，也稱為控制層，也就是所有處理業(yè)務(wù)邏輯的代碼必須寫在控制層。控制層前端開發(fā)人員可以定義自己的模塊來獲取數(shù)據(jù)，也可定義不同的模塊供其他開發(fā)人員調(diào)用?？刂茖痈鶕?jù)用戶的操作去執(zhí)行模塊的方法。當(dāng)方法調(diào)用服務(wù)請(qǐng)求時(shí)獲取數(shù)據(jù)，此時(shí)控制層解析數(shù)據(jù)并展示給視圖層。因此，每個(gè)頁(yè)面的超鏈接或者表單的點(diǎn)擊事件觸發(fā)時(shí)，控制層本身不會(huì)處理任何數(shù)據(jù)。僅當(dāng)接收請(qǐng)求并調(diào)用模塊方法時(shí)，才調(diào)用服務(wù)以展示數(shù)據(jù)，最后在視圖層展現(xiàn)。

6 結(jié) 語

本文基于移動(dòng)平臺(tái)介紹了移動(dòng)應(yīng)用開發(fā)框架現(xiàn)狀，詳細(xì)闡述了當(dāng)前移動(dòng)應(yīng)用開發(fā)遇到的問題，詳細(xì)介紹了國(guó)網(wǎng)外網(wǎng)移動(dòng)交互平臺(tái)移動(dòng)應(yīng)用開發(fā)所采取的開發(fā)框架，提出了包括web框架動(dòng)態(tài)加載、模塊化構(gòu)建、移動(dòng)終端界面適配以及移動(dòng)端公用組件等技術(shù)的一整套基于移動(dòng)平臺(tái)的應(yīng)用開發(fā)框架關(guān)鍵技術(shù)。基于移動(dòng)平臺(tái)的應(yīng)用開發(fā)框架關(guān)鍵技術(shù)的應(yīng)用，顯著降低了移動(dòng)應(yīng)用開發(fā)難度，縮短了移動(dòng)應(yīng)用開發(fā)周期，降低了移動(dòng)應(yīng)用開發(fā)成本，提高了移動(dòng)應(yīng)用的可維護(hù)性和可拓展性，優(yōu)化了移動(dòng)應(yīng)用開發(fā)流程，對(duì)基于移動(dòng)平臺(tái)的應(yīng)用開發(fā)具有極大的提高與促進(jìn)作用。需要說明的是，相關(guān)技術(shù)完全遵循國(guó)網(wǎng)公司技術(shù)規(guī)范，具備在公司乃至網(wǎng)省范圍內(nèi)應(yīng)用推廣的條件[4]。

參考文獻(xiàn)：

[1] 王宏斌.企業(yè)移動(dòng)辦公的安全接入研究及實(shí)現(xiàn)[D].鄭州：鄭州大學(xué),2011：7-8.WANG Hong-bin.Enterprise Mobile Security Access of Research and Realizing[D].Zhengzhou：Zhengzhou University,2011：7-8.

[2] 吳晨剛,董恒競(jìng),唐勇.基于移動(dòng)終端的企業(yè)信息安全架構(gòu)設(shè)計(jì)與實(shí)現(xiàn)[J].理論研究,2013(05)：83-84.WU Chen-gang,DONG Heng-jing,TANG Yong.The Design and Implementation of Enterprise Information Security Architecture based on Mobile Terminal [J].Netinfo Security,2013(05)：83-84.

[3] 劉金,甘睿.分析移動(dòng)辦公的網(wǎng)絡(luò)安全技術(shù)方案[J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用,2014(04)：122,124.LIU Jin,GAN Rui.The Analysis of Network Security Solution of Mobile Office[J].Network Security Technology& Application,2014(04)：122-124.

[4] 茹惠素.基于HTTPS協(xié)議的統(tǒng)一登錄系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].浙江工業(yè)大學(xué)學(xué)報(bào),2008,36(05)：528-529.RU Hui-su.Design and Implementation on Unified Sign System Based on HTTPS[J].Journal of Zhejiang University of Technology,2008(05)：528-529.