基于移動平臺的微應用開發(fā)框架技術的研究與應用*

蔡 璟，丁宗銀

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

0 引 言

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

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

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

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

1 國內外研究水平綜述

1.1 國內外研究情況

隨著移動技術如火如荼的開展，各大互聯網企業(yè)都在從不同角度考慮如何降低移動應用的開發(fā)成本，打造生態(tài)鏈。通過版本的快速迭代，挖掘用戶需求，體現商業(yè)價值，并通過構建開發(fā)框架提升效率。就國內而言，2015年移動應用開發(fā)框架和開發(fā)工具發(fā)展迅猛，各種開發(fā)工具和開發(fā)框架層出不窮?？焖夙憫脩粜枨?，降低開發(fā)成本，已經成為各大公司的發(fā)展方向之一。隨著移動應用開發(fā)對降低開發(fā)成本、降低開發(fā)難度的需求日益提升，參照國內外移動開發(fā)的經驗，應用開發(fā)框架化成為解決問題的關鍵。

1.2 Bootstrap移動應用開發(fā)框架

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

1.3 Amaze UI移動應用開發(fā)框架

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

1.4 jQueryMobile移動應用開發(fā)框架

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

2 存在的問題

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

2.1 Web框架的動態(tài)加載技術

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

2.2 模塊化構建技術

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

2.3 多分辨率、多尺寸移動終端界面適配技術

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

2.4 移動端公用組件的封裝

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

3 框架設計

3.1 Web框架的動態(tài)加載技術

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

3.2 模塊化構建技術

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

3.3 多分辨率、多尺寸移動終端界面適配技術

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

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

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

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

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

3.4 移動端公用組件的封裝

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

4 移動應用開發(fā)框架功能架構

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

圖1 基于移動平臺的應用開發(fā)框架功能架構

4.1 模型層

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

主要插件包括如下幾種。

時間插件。時間選擇作為手機端經常用到的插件之一，方便用戶實現時間選擇。時間插件基于觸摸設備的日期和時間選擇器，做到了用戶的友好體驗。作為一款滑動選擇插件，用戶可以自定義主題樣式。

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

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

4.2 控制層

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

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

圖2 動態(tài)加載技術流程

模塊化構建容器?；谝苿悠脚_業(yè)務框架的模塊進行分類，主要分為流程引擎模塊、業(yè)務模塊和頁面模塊。前端開發(fā)人員基于這幾類模塊，可自行定義子模塊，并相互調用。各個模塊的定義只需模塊名稱不同即可，然后在不同的文件夾、目錄、方法中調用。各個模塊之間不會發(fā)生沖突行為，降低了耦合性，增強了團隊的開發(fā)效率，同時提升了用戶體驗。

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

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

圖3 流程引擎模塊結構

圖4 業(yè)務模塊結構

頁面模塊。作為顯示層，頁面模塊是最重要的框架模塊，如圖5所示。它主要是從服務端獲取數據，然后進行解析，最后在頁面展示的一個過程。圖5展示了當成功調用服務端的一個方法后，服務端會返回一個實例，這時頁面模塊通過解析引擎從模塊中取出數據，然后將數據進行實例化，并通過頁面模塊進行解析展示。

圖5 頁面模板模塊結構

4.3 視圖層

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

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

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

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

靈活可配置的展現技術。使用此框架中，樣式表中設置了默認字體、樣式，用于控制不同的展現形式，可通過修改配置文件中默認的加載順序控制展現效果，同時對彈出、用戶等待、數據加載、獲取參數等設計，實現統一的展現形式。

4.4 配置層

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

5 移動應用開發(fā)框架技術架構

移動應用框架技術架構主要包括模型層、視圖層和控制層。每層通過不同的表現達到代碼的分離和運用。

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

圖6 移動應用開發(fā)框架技術架構

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

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

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

6 結 語

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

參考文獻：

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

[2] 吳晨剛,董恒競,唐勇.基于移動終端的企業(yè)信息安全架構設計與實現[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] 劉金,甘睿.分析移動辦公的網絡安全技術方案[J].網絡安全技術與應用,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協議的統一登錄系統設計與實現[J].浙江工業(yè)大學學報,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.