杜燕忍，葛華勇，王龍
?。|華大學 信息科學與技術學院，上海 201620）
摘要：Lizard是針對目前前端開源框架中存在的不足，由攜程研發出的適用于無線移動端開發的框架。Lizard Web App是運行在瀏覽器上的單頁應用，所有加載資源都放在一個html文件上，所有的用戶交互都交給JavaScript，所有的通信都交給Ajax。該文基于Lizard框架實現Hybrid App（混合模式移動應用）的開發，并針對框架中本地存儲方式進行改進，由此提出了擴展store的存儲方式。以多態方式封裝store，由LocalStorage、IndexDB、SQLite by App替換cookie，進而支持多種本地存儲方式，該文只是針對其中一種方式即LocalStorage進行封裝，以提高攜程業務開發效率。
關鍵詞：Lizard；Hybrid App；JavaScript；Web App；HTML；Ajax；數據存儲方式；無線移動端開發
0引言
近年來國內外對Native App取得了很多重要的研究成果，但是對Hybrid App研究還比較少?；旌夏Ｊ揭苿討茫℉ybrid App）是指介于Web App與Native App這兩者之間的App［1］,它雖然看上去是一個Native App，但只有一個UI WebView，里面訪問的是一個Web App，它具有Native App良好用戶交互體驗的優勢和Web App［2］跨平臺開發的優勢。
隨著HTML5［34］可通過手機瀏覽器運行，而不直接依賴于手機操作系統，并且現在各大手機瀏覽器均支持HTML5［5］；Mobile phone中框架的發展（例如PhoneGap）也為Web App的發展提供了契機。主流的Hybrid方案分成三種：以PhoneGap［6］為代表，以WebView作為用戶界面層，以Javascript［78］作為基本邏輯，與中間件通信，再由中間件訪問底層API的方式進行應用開發；以Titanium為代表，通過對開發者提供友好的開發工具，并折中地把這種開發語言轉換成原生語言，最終打包出整個應用；以Three20為代表，在開發原生應用的基礎上，嵌入WebView,但是整體的架構使用原生應用提供。在攜程無線［9］的Hybrid框架中，一開始就選擇了PhoneGap方案，未來攜程App會成為一個平臺。
本文基于Lizard框架［10］實現Hybrid App的開發，針對原有框架中的本地存儲方式和第三方框架的引用進行改進和優化，并對改進的方法進行實際項目開發，結果與改進之前的結果一樣符合開發項目的要求，驗證了本方法的有效性。
1Ctrip Wireless H5整體架構圖
H5整體架構圖如圖1所示。由整體框架可知，無線H5基礎框架主要包含以下部分，各業務模塊需按要求對以下部分進行統一引用。
(1)第三方框架：zepto、backbone、require、understore等需要統一引用。
(2)核心框架：Common.js，提供最基礎的UI、網絡通信(ajax)、數據存儲(cookie)等基類，以及UI組件、Widget組件、HybridAPI等組件，需要統一引用。
(3)H5公共基礎樣式：Main.css，提供最基礎和公共樣式，需要統一引用。
(4)H5公共業務組件：各類通用的業務組件，比如常旅客、常用地址，需要統一引用。
(5)H5公共業務模塊攜程(登錄/注冊)、支付等業務模塊，需要統一引用。
2Lizard框架
2.1框架簡介
Lizard框架架構如圖2所示，Ctrip.H5.Lizard主要由4個模塊構成：第三方框架、核心框架、公共組件庫、業務組件庫。
（1）第三方框架：Ctrip.H5.Lizard底層依賴的第三方庫有4個：Zepto、underscore、backbone和Fastclick。
在Mobile端，Ctrip.H5.Lizard會加載Zepto，在PC端考慮到兼容性的問題，IE內核瀏覽器會采用Jquery，Ctrip.H5.Lizard可以做到對環境自適應進行加載。
Backbone在Ctrip.H5.Lizard是被定制的，其MVC框架中的Model和Controller的內容根據Ctrip.H5.Lizard適用的環境被復寫。
Ctrip.H5.Lizard抽取了Fastclick的核心代碼，復寫了移動端的click事件。
?。?）核心框架：Ctrip.H5.Lizard實現了Web App的基礎功能。
在Javascript［1114］中實現了面向對象編程(OOP)的基礎，封裝了Ajax請求，處理了本地環境下的跨域訪問，并對請求做了緩存處理，通過監控Hash的變化，實現View的無縫切換。
（3）公共組件庫：Ctrip.H5.Lizard的公共組件庫涵蓋了UI組件庫和Widget組件庫兩個模塊組。
UI組件庫以特定的樣式表為基礎，定制Ctrip Mobile的UI組件，實現了各種交互電話、時間選取等，Widget組件庫提供了功能性組件庫和UI業務組件庫。
（4）業務組件庫：Ctrip.H5.Lizard的業務組件庫主要包括攜程(登錄/注冊)、支付等業務。
2.2Lizard算法流程
Lizard算法流程圖如圖3所示，Lizard渲染數據共分成5個階段：T1~T5。T1：頁面響應時間。此時，用戶通過瀏覽器發起一個請求，當前VIEW的HTML文件返回index.html給瀏覽器，瀏覽器接收到index.html開始解析，之后瀏覽器請求核心框架JS處理。Lizard.js收到請求，此時進入T2階段，即數據通信請求階段。Lizard.js返回核心框架中的JS文件給瀏覽器，瀏覽器收到核心框架中JS傳來的數據，開始解析Model Config，根據Config中的API請求SOA數據，SOA收到瀏覽器的數據請求，此時進入T3階段，即數據通信接收階段。SOA返回數據給瀏覽器，瀏覽器接收到SOA的數據，此時T3階段完成，T4階段開始，瀏覽器根據接收到的SOA數據，開始解析Template，此時DOM生成，但是其為隱藏狀態，此時瀏覽器繼續發送請求給核心JS框架，T4階段完成。此階段又可以稱作DOM穩定階段。JS中的核心框架收到瀏覽器的頁面邏輯請求開始進行處理，此時進入T5階段，即頁面顯示階段。JS返回處理的結果給瀏覽器，瀏覽器收到結果顯示DOM，展示頁面，T5階段完成。其中T1~T4又稱作DOM準備階段，T2~T3稱為通信準備階段，整個T1~T5又叫做Onload階段。Onload是Lizard渲染頁面階段中的View生命周期的一部分。
3Lizard Web App 中View的生命周期
首先，View的生命周期與攜程無線Hybrid密不可分，圖3Lizard算法架構在一個Hybrid架構的頁面會有兩部分組成：Head和Content。Head是由App提供的Android/IOS原生組件，對應IOSNavigationBar/AndroidActionBar。Content由App提供的WebView加載H5提供的頁面，H5與App約定將一組API綁定在WebView的Window對象中。App通過IOS/Android原生方法調用到Window對象，執行js的方法，這稱之為App Native調用Web。App實現對WebView URL的觀察者模式，H5通過改變URL的哈希值，App會通過解析哈希值的變化執行對應的操作，這稱之為Web調用App Native。Lizard支持Hybrid模式，而Lizard在對Hybrid的設計中，采用了切面編程的思想。Web與Hybrid最后的產品差異就在于入口文件，在入口文件中，會去做初始化，判斷當前的環境，然后以當前環境作為參數，配置相應的設置，切換各種服務在不同環境下的配置。所以從開發者的角度來說，不用關心當前的環境是Web還是App，只需要調用相應的服務即可，剩下的事情交給Lizard自身就可以。
其次，Lizard中頁面的整體布局代碼如下：
define(［'libs', 'cBasePageView'］, function (libs, BasePageView){
var viewhtml = '<h1>Hello World</h1>';
var View = BasePageView.extend({
onCreate: function () {
this.MYMel.html(viewhtml);
}
onLoad: function () {
this.turning();
}
onShow: function () {
}
onHide: function () {
}
});
return View;
});
在該代碼中顯示了View的4個生命周期回調順序。
onCreate -> onLoad -> onShow -> onHide
(1)onCreate
onCreate是只有在view生成時才會調用的回調。在這個回調中，一般處理View的模板構建、初始化數據設置。onCreate只會在初始化時候執行一次，第二次訪問不會執行。
(2)onLoad
onCreate每次調用View時都會首先調用的回調方法。在該回調中需要處理數據請求、View的數據綁定、渲染和View的交互邏輯設置。onLoad的回調中需要執行this.turning()才會宣告view的加載完成，進入到下一個生命周期onShow，onLoad在每次切換View時都會執行，一般在onload中進行Ajax異步數據請求，請求suceess后調用turning方法從而觸發onShow事件。
(3)onShow
onShow是新DOM完成渲染之后進入頁面的回調，部分依賴頁面渲染之后的業務邏輯可以綁定在這個回調中，onShow的執行時機為調用turning之后，不調用turning不會執行onShow。
(4)onHide
當頁面執行了從A頁面跳轉到B頁面時，A頁面會執行hide方法，將View A推到后臺。onHide就是在A推到后臺之后的回調。
4改進數據存儲方式
在一個應用中數據的存儲是非常重要的功能，在攜程的應用場景中，大量基礎數據會被緩存下來，比如城市列表、用戶使用歷史等信息。在Web 2.0時代，Web存儲呈現多樣化的趨勢，除了傳統的cookie，HTML5提供了LocalStorage、SessionStorage、ApplicationCache等存儲方案，同時Chrome還支持IndexDB。cookie操作在前端開發過程中經常遇到，當然如果只是用來存儲一些簡單的用戶數據，還是比較容易的，要做的可能只是設置cookie名、值、過期時間等，讀取也只要根據cookie的名讀取相應的cookie值即可。HTML5本地存儲的前身就是cookie，HTML5的本地存儲是使用LocalStorage對象將Web數據持久化在本地。相比較而言，HTML5本地存儲中每個域的存儲大小默認是5 MB，比起cookie的4 KB要大得多。因此，HTML5本地存儲可以看做是加強版的cookie，不受數據大小限制，有更好的彈性以及架構，可以將數據寫入到本機的ROM中，還可以在關閉瀏覽器之后再次打開時恢復數據，以減少網絡流量。同時，這個功能算得上是另一個方向的后臺“操作記錄”，而不占用任何后臺資源，減輕硬件設備壓力，增強運行流暢性，而且存儲和讀取數據的代碼極為簡練。因此在Lizard框架中采用了LocalStorage作為解決方案。同時參考redis在本地實現了小型的文檔型數據庫。
在store中針對LocalStorage封裝了常用的方法，比如get(tag,oldFlag)獲取已存儲數據、getAttr(attrName,tag)獲取已存儲對象的屬性、set(value,tag,{oldVal})向store中添加數據、setAttr(attrName, attrVal,tag)設置屬性值、remove()移除數據存儲、removeAttr(attrName)移除指定對象的存儲屬性、setExpireTime(time)設置過期時間、setLifeTime(lifeTime,override)設置當前對象的過期時間。
數據存儲的整個過程如下：
(1)創建storage項目。
(2)cStore模塊的引用：Lizard用cStore模塊封裝了LocalStorage的CURD操作，所以在使用數據存儲時，需要引入cStore模塊。Lizard采用require.js作為模塊加載器，所以在使用時需要顯示申明依賴關系。引用代碼如下：
define(［libs,cBasePageView,cStore］, function(libs, BasePageView, Store){ ... });這里顯示調用了cStore模塊，在回調的參數對應的位置中給出store對象。
(3)Store的繼承：Lizard實現了Javascript的OOP開發，為代碼的復用提供了更好的機制。在Store的一般使用中，推薦將具體的Store繼承于cStore模塊，代碼如下：
var StoreCase = new Base.Class(Store, {
__propertys__: function () {
this.key = STORAGE_EXAMPLE //設置在LocalStorage中的key值
this.lifeTime = 2D//D代表天，H代表小時，M代表分鐘，S代表秒
}
initialize: function (MYMsuper, options) {
MYMsuper(options);
}
});
Store采用單例模式，所以需要通過StoreCase.getInstance()獲得,即var storeinstance = StoreCase.getInstance()。
(4)Store的增刪改讀:首先設置view模板，其次進行綁定操作。Store提供了3個接口做綁定操作：讀取Store.read(tag)，設置/更新Store.set({...})，刪除Store.remove()。
(5)設置數據的過期時間：對于過期時間的處理，在內部實現中參考redis的數據結構，本文設置了數據的過期時間。在LocalStorage中數據結構如下：
"value":{
"inputvalue":"asdfaf"
}
"oldvalue":{
}
"timeout":"2015/12/19 15:38:37",
"savedate":"2015/12/19 15:08:37"
通過對LocalStorage的封裝，可以直接在開發時通過Lizard調用，使開發效率更快。
5結束語
基于Lizard框架的無線開發，是針對前端開發人員常用的一些方法、功能、組件等進行的一系列封裝，提高了開發人員的工作效率。本文首先對Lizard框架的架構以及工作原理進行簡單闡述，并針對Lizard框架中本地存儲方式進行了優化，在store中封裝了對LocalStorage的讀寫，實現了在Web上的本地緩存。其次，通過對LocalStorage的封裝，cookie與store中的LocalStorage兩種本地存儲方式可以同時使用，更加方便。最后，正如文中所提到的一樣，存儲方式還有很多，諸如IndexDB、SQLite by App等都是以后技術發展的需要。
參考文獻
［1］ 萬曉鳳,雷繼棠,易其軍，等.基于Android智能手機平臺的AMT監測系統的設計［J］.電子技術應用,2014,40(3):6870.
?。?］ 朱華.AJAX在WEB開發中的應用研究［D］.哈爾濱:哈爾濱工程大學,2009.
［3］ 陶國榮.HTML5實戰［M］.北京:機械工業出版社,2012.
?。?］ cyRotel.WEB APP,HYBRID APP與NATIVE APP的設計差異［DB/OL］.(2013219)［20150825］.http://www.uisdc.com/webhybridnativeapp,20141202.
?。?］ 劉艷平,俞海英.基于HTML5的Application Cache技術研究［J］.微型機與應用,2015, 34 (20):6466.
?。?］ PhoneGap.API介紹［EB/OL］. （20000118）［20160105］．http://www.phonegapcn.com/docs/zh/cn/.
［7］ NICHOLAS.JavaScript高級程序設計［M］.北京:人民郵電出版社,2006.
?。?］ 徐浩,周德華,廠卓,等.面向多終端適配的移動中間件的設計與實現［J］.計算機科學現代化,2011(9):6568.
?。?］ 劉妍.無線產品部的無線技術標準及指南［DB/OL］.（20141208）［20160105］.http://conf.ctripcorp.com/display/Wireless/3.HTML5.