基于MVCS模式的組件化手機Web前端的研究與應用

張文勝，陳 宏

（西安歐亞學院 陜西 西安 710065）

目前，隨著HTML 5與CSS 3的不斷發展，移動設備用Web網站或Web應用程序開發的需求在不斷擴大，“基于HTML 5、CSS 3和JavaScript開發的Web網站或Web應用程序才是未來的趨勢”這種觀點越來越被IT屆人士廣泛接受，越來越多的IT屆人士開始積極尋求一個能夠利用HTML 5與CSS 3進行Web網站與Web應用程序開發的框架[1]。

MVC模式（Model-View-Controller）是軟件工程中的一種軟件架構模式，把軟件系統分為3個基本部分：模型（Model）、視圖（View）和控制器（Controller）。 MVC 模式的目的是實現一種動態的程序設計，使后續對程序的修改和擴展簡化，并且使程序某一部分的重復利用成為可能。除此之外，此模式通過對復雜度的簡化，使程序結構更加直觀。軟件系統通過對自身基本部分分離的同時也賦予了各個基本部分應有的功能。專業人員可以通過自身的專長分組：（控制器Controller）—負責轉發請求，對請求進行處理。（視圖View）—界面設計人員進行圖形界面設計。（模型Model）—程序員編寫程序應有的功能（實現算法等）、數據庫專家進行數據管理和數據庫設計（可以實現具體的功能）。

近五六年以來，各種尺寸的智能手機和平板電腦層出不窮，越來越多的人使用移動設備來訪問互聯網，這就給前端代碼的跨平臺性、復用性、易維護性帶來了更高的要求。如果有跨平臺的復用性好且易維護的框架的話，可以大大提高開發效率。因此前端開發人員也在不停地探索，MVC模型在Web后臺開發中應用廣泛，實現了展示模塊和數據邏輯處理模塊的分離。因此很多公司開始借鑒MVC在后端的運用，建立前端MVC架構，代表的框架有ExtJS、BackBone等[2]。

然而，手機移動前端開發越注重用戶體驗，也越給開發引入了可觀的復雜度，讓移動前端的開發變得更加困難，增加了發生過失（bugs）的可能性，也加大了軟件測試的復雜度，這些復雜化都將延長軟件開發過程，開發者不得不付出額外的開發代價去組織和管理自己的架構。

基于MVCS模式的手機移動前端的設計方法提出了解決上述問題的方法，使得前端重構成為可能，采用MVCS的軟件設計模式，可以保證代碼干凈、便于測試、容易維護。

除此之外，此模式還支持組件化編程，組件化的基礎是面向對象，在面向對象編程的基礎上將一個或多個小部件封裝到一起，成為一個模塊，讓其成為一個新的組件（適合我們需求的組件），每一個模塊都應當具備單獨運行的能力。組件化編程是面向對象的技術的一種近一步的發展延伸，類的概念仍然是組件技術中一個基礎的概念，但是組件技術更核心的概念是接口。

本文以圖書信息系統為例，給出了基于MVC模式的組件化的手機前端的原理及其實現步驟，并使之標準化，讓開發者更加專注于核心JS代碼的開發，減少花費在編寫界面、組織代碼等重復性的工作上的時間。同時，將MVCS模型與MVC模型進行對比，驗證MVCS的有效性。

1 組件化移動前端設計思想

手機Web前端應用是移動互聯網應用的最佳形式，但是隨著系統版本的不斷升級，設備的差異不斷增大，移動客戶端應用開發同樣面臨著與Web前端開發一樣的兼容性開發效率和維護成本問題。組件化的Web前端設計架構基于Sencha Touch （ExtJS 整合 JQTouch、Rapha?l庫） 框架， 采用Model-View-Controller-Store（縮寫為 MVCS）模式，腳本文件按目錄命名約定分類存放，通過“組件化”的方式來配置和管理所需要的軟件功能，不僅使代碼的組織更加容易和清晰，而且減少代碼的編寫量，維護更為便捷[3]。

1.1 MVCS模式

MVCS模式的目的是實現一種動態的程序設計，使后續對程序的修改和擴展簡化，并且使程序某一部分的重復利用成為可能。除此之外，此模式通過對復雜度的簡化，使程序結構更加直觀。軟件系統通過對自身基本部分分離的同時也賦予了各個基本部分應有的功能。

MVCS模式與傳統Web應用的MVC有所不同，傳統Web應用中，用戶瀏覽器客戶端做低層次的交互，域邏輯主要集中在服務器端，因此，傳統Web應用的控制層、視圖層和模型層都分布在服務器端。也稱為服務器端MVC模式。

而作為手機前端的MVCS模式借鑒了經典的服務器端MVC模式，但存在一些變化，定義如下：

1）模型（Model）是一個域和其數據類型的集合。模型知道如何通過數據包的方式保留它們，并且能夠通過關聯被其它模型鏈接。一般與Stores一同使用來給grids或其它組件提供數據。

2）視圖（View）文件夾中定義了所有的 widget，每一個widget對應一個類文件。View的代碼屬于靜態代碼，可以使用工具自動生成。

3）控制器（Controller）文件夾中的控制器按管理范圍的不同劃分為不同的類文件，其中每一個控制邏輯都包括初始化、組件事件監聽以及引用等。

4）數據存儲（Store）就是對通過網絡加載數據的過程的一個抽象，Store依賴于Model，通過關聯的Model對象來獲知如何將取回的數據對象化，以方便View展現，所以View是依賴Store對象的；Store類似于服務器的（DAO）用在服務器端使用的 DAO（Data Access Object）模式[4]。

1.2 MVCS管理依賴項（Dependencies）

應用程序用來定義依賴項的地方主要有兩個，application本身和應用程序內部類。當創建一個MVC應用程序時，Ext.application會提供一個直觀的方式來設置應用程序會用到的數據模型、視圖、控制器、數據存儲器和配置文件等，如圖1所示。這5個配置項是用來加載應用程序常用文件（數據模型、視圖、控制器、存儲器、配置文件）的快捷方式[5]。

圖1 管理MVCS依賴項Fig.1 Managing dependencies with MVCS

由此可見，運用MVCS模型后，HTML里不再直接寫 JS代碼，JS按邏輯、職責分門別類存于不同的目錄，對應到不同的文件中。各個模塊之間需要盡量解耦，使得相互之間盡可能減少依賴，把界面（View）和數據存儲模型（Store）進行綁定，使得一方變化的時候另一方也會自動變化。

2 MVCS模式的組件化手機前端的的實現

2.1 圖書信息管理的元數據描述模型

首先，設計一個WidgetA，這是一個tab panel用于在Viewport A中顯示圖書基本信息記錄，ModelA定義記錄的數據類型。StoreA負責檢索從服務器獲取的基本圖書數據。

那么，當用戶從WidgetA點擊一條記錄，一個窗口將打開，顯示的信息的數據類型來自ModelA。當然，這Store將負責從服務器檢索相應數據。打開WidgetB，home窗口開啟。

同時，ControllerA捕獲來自WidgetA的Click事件和加載WidgetA所需數據信息，最終顯示對應的圖書列表。描述模型如圖2所示。

圖2 元數據描述模型Fig.2 Metadata description model

2.2 構建應用程序的結構

在應用架構創建的應用時，定義統一的約定，尤其是統一的目錄結構。這個結構要求所有類文件都放到app目錄下，在該目錄下，可根據命名空間劃建立 models、views、controllers和stores等4個子目錄。嚴格遵守控制器、數據模型、數據存儲、視圖這4個文件夾的命名約定，把對視覺界面、交互邏輯和數據的處理清晰地分開，這可以確保可以使用SDK Tools beta對應用進行優化[6]。目錄結構如圖3所示。

圖3 應用程序目錄結構Fig.3 The directory structure of the application

2.3 MVCS各個模塊的實現

View模塊需要構建一個tab Panel組件，將整個界面布局設置為使用Panel面板，并且設置了fullscreen屬性為true，應用啟動后，首先顯示的是Ext.Container，TabPanel的TabBar泊位在應用視圖窗口的底部，在點擊時，就會切換到對應的容器界面。

Model模塊分為BookData和Sectionlist，分別定義書籍信息的基本數據類型和圖書列表數據類型。每個模型定義分別包含id、img、name和 items及 products等字段，針對定義字段編寫校驗規則，如name字段的length，products字段的 format等。

Store模塊同樣也分為BookDataStore，為數據列表組件提供顯示數據。獲得數據后還需要通過數據解析器將這些數據進行解析，從而成為客戶端認可的符合一定格式的數據。

Proxy（代理）是應用架構從Store，Model加載和保存數據的方法。可供選擇的有AJAX、JSON－P和HTML5 localStorage以及其它的代理。這里使用AJAX代理，告訴程序從‘data/book.json’這個url去加載數據。

Controller的目的是監聽事件并作出合適的響應動作通常這些事件來是View上面的用戶操作。Controller模塊Book Controller捕獲來自table Panel的Click事件和加載Boo kListing所需數據信息，最終顯示對應的圖書列表和圖片。

Data模塊放置資源文件，是應用程序通過 AJAX方式與服務器端交換的數據，返回的數據格式是輕量級的文本數據交換格式json。

每個ExtJS的應用都必須從創建一個Ext.app.Application實例開始，app.js創建一個Application實例并完成初始化。

MVCS模型增加Store（數據存儲）的目的就可以使Proxy（數據代理）在Model（模型）與數據之間搭建橋梁，數據代理將在它們之間建立關系，然后通過數據代理進行相關的GRUD（Create， Read， Update， Delete）操作。

Store數據集是一個客戶端數據模型對象Model的緩存，它可以為模型組件提供數據輸入 （例如：GridPanel、ComboBox、DataView等），Store通過數據代理加載數據，也可以手工調用loadData等方法加載數據，解析后的數據對象緩存在Store數據集中，并通過存取函數進行訪問。

此外，此模式還支持訪問歷史（應用將獲得完整的后退按鈕功能，其中的任意部分都可以被鏈接到）、深度鏈接（深度鏈接可以打開應用程序中的任意屏幕）、設備配置文件（共享通用代碼的同時，輕松為手機、平板電腦還有其他設備定制應用程序用戶界面）等。

3 運行結果及分析

本文以圖書信息管理系統為例進行分析說明。使用MVCS模型實現了圖書信息手機Web前端展示，如圖4～圖7所示。

TabBar上的兩個導航按鈕，分別進行主頁面和查詢頁面的切換，如圖4和圖5所示。

圖4 應用程序主頁Fig.4 The home page of the application

圖5 出版社目錄結構Fig.5 The directory structure of publishing house

在應用中，使用動態生成的列表羅列圖書的基本信息，可出版社和地區的不同進行自動羅列，處理事件被正確地綁定到每行出版社和地區的單擊事件上，然后通過相應單擊事件，顯示相關書籍的名稱和封面圖片。如圖6和圖7所示。

MVCS模式以標準的方式展示數據，降低了開發難度，使整個手機前端代碼的規劃更規范，前端實時數據的圖表和圖形的展示更容易擴展和維護，更適合多人協作編寫復雜界面。

圖6 出版社圖書列表Fig.6 Book list of the publishing house

圖7 地區圖書列表Fig.7 The area agency list of books

本系統使用跨平臺的開發框架PhoneGap/Cordova來部署手機應用，這是一個專業的移動應用開發框架，也是一個全面的Web App開發的框架，提供了以Web形式來訪問終端設備的API的功能。這對于采用Web App進行開發就可以避免了原生開發的某些功能。Cordova只是個原生外殼，App的內核是一個完整的Web App，需要調用的原生功能將以原生插件的形式實現，以暴露JS接口的方式調用。

4 結束語

本文在MVC的基礎上，通過組件化擴展形成MVCS，并通過實際應用給出了實現方法。

MVCS與MVC模型相比，把以前的業務模型拆分成數據模型Model和數據存儲模型Store，從數據庫的角度講，Store類封裝了一個客戶端的記錄對象的緩存，為UI組件提供了數據的入口。這是 Proxy、Reader/Writer更細顆粒的職責分工下以及引入Model后必然帶來的結果。這樣的優點就是Store作為數據訪問層就可避免在UI組件里找數據了，通過Ajax技術，把瀏覽器當作表現層，服務器端當作數據訪問層。那么，服務器只通過XML格式或JSON格式提供必要數據就行了，全部的表現可在客戶端通過MVCS架構實現，這樣就避免了服務器端代碼和客戶端代碼混搭在一起的問題，從而實現了客戶端與服務器端的脫鉤。

為了便于在不同的移動設備上部署，profile是配置各個平臺的一個啟動配置文件，如果應用程序需要在不同的平臺及不同的設備上運行，則可能需要在此配置每個設備平臺的專屬配置文件，例如在Android、iPhone或者iPad等平臺及設備上。

隨著手機Web前端的發展，工程化的特點日趨明顯，MVCS在手機Web前端技術的規范化和可維護、可擴展上做了一些探索，在未來的工作中，會進一步對MVCS模式進行優化和完善，提高模塊的可復用性、整個系統的容錯性和靈活性。

[1]陸凌牛.Sencha Touch權威指南[M].北京：機械工業出版社，2012.

[2]于春娜，王晨升，楊光，等.Web前端MVC框架的意義研究[J].產業與科技論壇，2014，13（1）:52-53.YU Chun-na，WANG Chen-sheng，YANG Guang，et al.Significance of Web in front of MVC framework[J].Estate and Science Tribune，2014，13（1）:52-53.

[3]Sencha Inc.Sencha:The Authority in HTML5 Performance[EB/OL].[2014-01-01].?http://www.sencha.com/products/touch.

[4]張文勝，陳宏.企業級組態式Web前端設計方法研究與應用[J].電子設計工程，2014，22（17）:162-164.ZHANG Wen-sheng，CHEN Hong.The research and application of configuration software in the web front-end design method[J].Electronic Design Engineering，2014，22（17）:162-164.

[5]Sencha Inc.Touch 2.0.2 Sencha Docs[EB/OL].[2014-01-01].http://docs.sencha.com/touch/2.0.2/#!/guide/mvc_depen dencies.

[6]Loiane Groner.Sencha Architect App Development[M].Packt Publishing Limited，2013.