基于Jquery Mobile的數(shù)字校園移動應(yīng)用實踐

隨著信息技術(shù)的迅速發(fā)展，數(shù)字校園已成為高校信息化建設(shè)發(fā)展的趨勢和學?，F(xiàn)代化的標志。數(shù)字校園建設(shè)為高校學生與教師的學習生活帶來了深刻的影響，它正在改變著學校原有的管理、教學和辦公模式。北京師范大學數(shù)字校園信息服務(wù)從師生需求出發(fā)，結(jié)合當代移動應(yīng)用技術(shù)，自主開發(fā)了基于Jquery Mobile技術(shù)的數(shù)字校園移動應(yīng)用。該應(yīng)用包含了通知公告、校園卡移動充值、教師信息查詢、數(shù)字校園地圖、校內(nèi)電話黃頁五大模塊。數(shù)字校園移動應(yīng)用的推出，受到校園廣大師生的一致認可，以校園卡充值為例，學生僅需在手機上即可完成轉(zhuǎn)賬充值，同時也節(jié)省了教職員工的管理成本與溝通成本。

一、前端架構(gòu)

該應(yīng)用包括IOS和Android兩個版本。由于采用Jquery Mobile和Cordova技術(shù)，該應(yīng)用在平臺間的移植成本相對較低。

Jquery作為世界知名框架驅(qū)動著 Internet 上的大量網(wǎng)站，在瀏覽器中提供動態(tài)用戶體驗。在移動互聯(lián)時代的今天，jQuery 團隊引入了 jQuery Mobile（或 JQM）。JQM 的使命是向所有主流移動瀏覽器提供一種統(tǒng)一體驗，使整個 Internet 上的內(nèi)容更加豐富。WebKit 是一個開源項目，其起源可追溯到K Desktop Environment （KDE）。WebKit 項目催生了面向移動設(shè)備的現(xiàn)代 Web 應(yīng)用程序。目前IOS和Android的內(nèi)置瀏覽器組件均使用WebKit內(nèi)核，而JQM對于WebKit的支持非常完善。 JQM目前可以支持多種移動設(shè)備，iPhone、iPod Touch、iPad、Android、Blackberry、Palm、Nokia塞班三代等。

PhoneGap是一個用基于HTML，CSS和JavaScript的創(chuàng)建移動跨平臺移動應(yīng)用程序的快速開發(fā)平臺，后貢獻給Apache后更名為Cordova。它使開發(fā)者能夠利用JS和HTML來訪問包括地理定位，加速器，聯(lián)系人，聲音和振動等功能，其擁有豐富的插件，可以以此擴展無限的功能。Cordova是免費的，但是它需要特定平臺提供的附加軟件，例如iPhone的iPhone SDK，Android的Android SDK等。盡管使用Cordova仍然需要為每個平臺分別編譯應(yīng)用程序，但是其基本代碼是一樣的。

二、后端架構(gòu)

后端架構(gòu)業(yè)界包括以PHP、Python、Ruby、NodeJS等弱類型語言為代表的架構(gòu)，與之相對應(yīng)的還有以C#和JAVA為代表的強類型語言架構(gòu)。由于數(shù)字校園移動應(yīng)用的受眾都是在校學生和教師，因此在高校中我們并不需要采用NodeJS這樣適合大并發(fā)的架構(gòu)，也不需要采用Mongodb這樣的大型NoSQL數(shù)據(jù)庫。因此我們采用了適合校情特點的ASP.NET MVC 4.0 結(jié)合 DbEntry ORM作為基礎(chǔ)后端架構(gòu)。如今ASP.net 已經(jīng)很好的移植到了Mono平臺上，在Mono 3.0發(fā)布之際，這種后端架構(gòu)的也具有如同JAVA一樣優(yōu)秀的跨平臺特性。

DbEntry 是梁立峰老師從2005年開始研究開發(fā)的開源ORM產(chǎn)品，是國產(chǎn)ORM的佼佼者，很適合跨平臺數(shù)據(jù)庫開發(fā)。尤其是其具有良好的Emit特性，使得其可以在不引用任何數(shù)據(jù)庫組件的情況下完成數(shù)據(jù)庫的CURD。DbEntry與EntityFrameworkCodeFirst具有設(shè)計理念上的本質(zhì)不同。DbEntry采用富血模型，著名軟件工程師馬丁曾經(jīng)對富血模型大加贊譽，其本質(zhì)的思路是用戶操作數(shù)據(jù)庫的行為要包含在數(shù)據(jù)庫模型之內(nèi)。比如Save，Delete需要包含在數(shù)據(jù)庫模型本身里面。而EF5.0本身的設(shè)計思路是貧血模型，盡管加入了Attribute的特性。貧血模型在大型工程上更加便于分塊使用，可以減少代碼耦合，但是不利于小型項目的集成開發(fā)，會徒增工作量。此外，DbEntry對組合查詢支持得非常完善，而EF5.0需要借助LinqKit等工具去組合Lambda表達式樹，非常不利于通用查詢模型的開發(fā)。

ASP.net MVC產(chǎn)品是微軟繼ASP.net FORM 之后又一順應(yīng)潮流的力作，其采用的Razor模板引擎技術(shù)大大方便了開發(fā)者的開發(fā)，結(jié)合linq技術(shù)，使得C#在前端頁面開發(fā)的便捷性上略勝Java structs一籌。

三、前端優(yōu)化

在前端優(yōu)化方面，我們也做了大量的實踐。在采用Cordova方案之前，參照HTML5的Manifest緩存技術(shù)，我們開發(fā)了基于Manifest的緩存框架，但是由于AppStore禁止殼模式應(yīng)用的上線，因此緩存模式只能在其他平臺上予以實踐。利用HTML5的Manifest Callback技術(shù)，在下載緩存文件的時候更新進度條，利用CSS3技術(shù)制作進度條的進度展示。緩存內(nèi)容包含JS文件和圖片文件。當緩存結(jié)束之后自動跳轉(zhuǎn)到相關(guān)首頁。每一次更新緩存的時候需要更新緩存文件，客戶端再次訪問的時候會自動訪問更新緩存。以保障客戶端的隨時更新。

緩存文件用例如下：

CACHE MANIFEST

# VERSION 1209

CACHE：

sipo/www_dc9_cn.png

js/main.js

css/layout.css

NETWORK：

http：//*

FALLBACK：

/404.html

Jquery Mobile與SenchaTouch等其他框架的不同在于，其采用分頁結(jié)構(gòu)。在頁面間過渡跳轉(zhuǎn)的時候會有閃屏的現(xiàn)象（Android的閃屏現(xiàn)象比IOS更加明顯），由于這一特點，在使用的過程中，我們需要禁用其頁面過渡效果。此外由于采用Cordova架構(gòu)，所有的REST請求需要Ajax化，這也就要求所有的后端服務(wù)接口均需要采用Json序列化輸出。Jquery Mobile本身有許多不完善的地方，比如，沒有內(nèi)建的分頁機制。列表在Ajax重新載入的時候需要重新刷新等等。

四、后端優(yōu)化

在移動端對于效率有較高的要求，因此我們采用HTTPFilter進行后端優(yōu)化。全部數(shù)據(jù)傳輸采用GZip壓縮傳輸，并且開啟ETAG緩存方案，記錄文件的上次緩存時間和緩存信息，根據(jù)文件的更改信息實時更新校驗碼。

校園卡充值與教師信息查詢模塊通過相應(yīng)的REST JSON協(xié)議與其它數(shù)字校園應(yīng)用進行通信，實時進行相關(guān)業(yè)務(wù)的操作，保證了實時性與安全性。校園地圖模塊中的圖層使用LocalStorage進行分片存儲，從而加快第二次訪問速度，但由于UIWebView組件對緩存的支持不理想，因此該緩存方案在部分平臺上未能生效。

五、未來與展望

給予Jquery Mobile的移動應(yīng)用在用戶體驗上存在著一定的問題，與原生應(yīng)用相比較有反應(yīng)遲緩的弊端。隨著數(shù)字化校園的進一步推進，在加大研發(fā)成本投入的情況下，采用跨平臺的原生解決方案是未來的移動校園的必由之路，但隨之也會帶來后期維護成本增大等一系列問題。因此是保證用戶體驗，還是保證可用性是個仁者見仁智者見智的事情。根據(jù)美國數(shù)字校園移動應(yīng)用的形勢來看，采用超低成本的Jquery Mobile進行跨平臺研發(fā)的仍然占了大多數(shù)。因此如何進行現(xiàn)有架構(gòu)的改造，如何結(jié)合原生應(yīng)用開發(fā)更適合更好的產(chǎn)品，是高校信息化需要一直探討解決的問題。