■段錦(楊凌職業技術學院 信息工程分院)
互聯網技術、智能移動終端技術的發展,移動微應用也成為了移動應用中的重要組成部分。為了能夠滿足移動微應用的發展需要,企業要通過微應用的框架開發技術進行深入研究。
伴隨著移動技術的迅速發展,各國互聯網企業開始思考要如何才能夠有效地控制移動應用的成本投入,構建出一個完整、健全的生態鏈,在版本更新換代下的背景下,深入發掘用戶的需要,提高用戶的使用體驗。按照當前國內的情況來看,在2018 年初我國的移動應用開發框架以及開發工具開始迅速發展,出現了大量功能全面的開發框架以及開發工具,為了適應市場的發展需求,各大廠商把成本控制和滿足客戶需求作為企業生與發展的戰略目標,應用開發框架化受到了社會各界的關注。
(1)Bootstrap 移動應用開發框架。Bootstrap 是由html、css、java 為主體的框架,它是以jquery 的基礎上進行優化和調整后所形成的前端開源框架。優點是兼容性好,缺點是對于移動應用動態加載的效果差。
(2)Amaze UI 移動應用開發框架。該框架是以CSS3 技術為核心,利用js、web 組件為輔框架設計結構,該框架的優點是自由度高,支持用戶自定義字體與內容,缺點是缺少動態加載技術。
(3)JQuerymobile 移動應用開發框架
該框架是以jQuery 與用戶界面結合的基礎上開發出的框架,該框架具有自定義主題、支持高端設備使用的優點,但該框架在顯示及分辨率方面存在適配問題,且不支持動態加載技術。
為了能夠滿足當前移動應用市場發展的需求,除了要節省移動端資源之外,還要采取一些科學、有效的方式來解決不同移動終端屏幕大小無法自適應的問題。按照實際情況來看,雖然bootstrap以及jQueryMobile 等主流框架有著獨特的優點,但是在實踐中這兩種框架只能解決某個移動應用的場景,具有明顯的局限性。
由于移動網絡環境下的終端內存、流量以及電池容量有限,因此要運用動態加載的方式把程序文化碎片化,再按照用戶需要進行延遲加載來提高用戶的使用體驗。在樣式設計方面程序開發人員只要在代碼塊的頭部引入所需的插件,或者加入相應的樣式代碼就可以了。除此之外,開發人員雖然可利用后端接口就能夠進行數據讀取和顯示,但是不同服務器需要設置不同的要求,導致動態加載成為一個亟待解決難題。
移動應用的開發過程中,前端人員可以利用模塊化的方式把顯示頁面分為不同的功能模塊,不但可以提高移動端頁面顯示速度,定位調試過程中存在的問題,而且還可以避免不同模塊間出現相互沖突的情況,這對于提升前端人員的編碼率具有重要的影響。但由于不同模塊的調用以及區分難度大,在模塊構建中就要對模塊的功能和信息內容進行嚴格的規定;除此之外,前端人員在模塊設計時要對模塊的類型如何定義也成了開發中的難點。
處于移動端的終端設備在bootstrap 框架的基礎上,利用視窗屬性以及窗口比例設置的方式,解決了不同手機型號分辨率不同、顯示尺寸不同的問題,降低了代碼冗余。但目前的手機型號與顯示屏規格過多,在進行前端設計時無法滿足所有手機的顯示需求,這就是該框架需要解決的問題。
所謂的動態加載技術就是按照顧相互間的關系把執行文檔通過遞歸的方式構建腳本的一系列過程,它是運用模塊代碼的方式構建腳本以達到動態加載的效果。利用函數分段回調和執行遞歸腳本按照由上而下的順序有序地加載腳本文件,再運用動態加載的文件把調函數截取,運用邏輯判斷的方式來達到分段加載的效果。通過這種方式不但有效地控制了網絡請求的次數,而且還可以提高用戶的使用體驗。
想實現模塊化的目標,就需要做好事先的配置工作,利用適時加載以及主模塊、子模塊的調用后再通過模塊調用的技術。業務邏輯模塊在開發過程中,前端開發人員要先定義出不同功能的模式以滿足調用時的需要,并且還要確保每個功能模塊不能夠產生沖突。在模塊化構建中的每一個插件都要置于模型的底層,在進行別名配置的時候只需要把對應內容進行補充。至于其他頁面在引用的過程中盡量采用直接獲取的方式,但是要保障定義別名要具有唯一性。
通過對多分辨率以及多尺寸移動終端界面適配技術的研究,能夠把處于移動端的瀏覽器進行智能調整,運用等比顯示的方法自適應手機屏幕的大小,進行顯示內容的等比加載。在進行框架開發的所有代碼里只要把視窗的界面大小、長、寬等必要屬性設置完整后,就能夠適用于當前市面上的所有型號的移動終端,并且代碼可以被反復利用。在框架設計的過程中通常是采用通用的形式,來適應不同的系統功能;把配置文件中的加載順序進行重新設置以此來提高控制的質量和效果。除此之外,在窗口彈出、界面數據加載以及等待顯示等效果上也要運用統一展示的方式來進行設計,以此來提升廣大用戶的體驗滿意度。
Sea.js 是一種簡單、自然的代碼組織形式,而且Sea.js 還具備了以下特點:(1)擁有整潔、簡單的模塊定義標準:Sea.js 是嚴格按照CMD 進行規范化執行,也可以運用Node.js 的方式來進行代碼書寫;(2)自然、直觀的代碼組織結構:利用高效的自動加載能力以及簡單的配置可以讓程序員的編碼體驗變得更好;(3)Sea.js 中還包含著各種功能的插件,對于程序開發、調試或者內部優化方面都有著不俗的表面,同時也擁有多元化的擴展插槽支持基本的外設功能。
把擴展原生庫和自定義對象相結合,為前端的開發人員快速調用提供支持。對各種插件的研究(例如時間插件、彈窗插件、多元化圖形插件、漸變插件以及省市區選擇插件),再對這些功能性插件設置相應的使用規范,并運用接口封裝、調用的方式來保障在不同的使用環境里可以直接、迅速地把需要的插件進行即時動態調用。
綜上所述,想要提高移動平臺中的微應用開發框架技術水平,除了要深入研究當前主流的移動微應用框架之外,還要通過Web 框架動態加載技術,模塊化構建技術以及移動端公用組件封裝等方式,這樣才能在減少研發成本的同時提高移動應用的功能性和擴展性。