基于MVVM模式的Extjs框架在前端界面設計中的應用研究

肖小嵐　劉振宇

摘要：Extjs作為一個 RIA（Rich Internet Applications）框架，在MVC模式的基礎上提供了MVVM模式的支持。該文詳細介紹了Extjs框架下的前端MVVM與MVC設計模式的工作原理以及它們各自優(yōu)點與不足，并將實現(xiàn)MVVM設計模式的Extjs框架引入到前端用戶界面的開發(fā)中，通過在護理信息系統(tǒng)的用戶界面設計中的成功實踐后提出了使用MVVM模式在Extjs框架下的一種編程實踐。

關鍵詞：前端設計模式；Extjs；MVVM；MVC

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2016）05-0084-05

Abstract： Extjs as an RIA （Rich Internet Applications） framework， it provides support for MVVM pattern based on the MVC pattern. This paper introduces the work principle of front-end MVVM and MVC design under the framework of Extjs and their respective advantages and disadvantages in detail， and applies Extjs framework based on MVVM design to front-end user interface development. Through the successful practice in the design of the user interface of the nursing information system， this paper put forward a programming practice using MVVM pattern under the framework of Extjs.

Key words： front-end design pattern； Extjs； MVVM； MVC

近年來，隨著互聯(lián)網(wǎng)應用的開發(fā)熱潮的到來，前端JS框架在B/S項目開發(fā)的地位越來越重要，然而傳統(tǒng)的基于MVC模式的前端JS框架還存在著許多不足。文中通過對Extjs框架中MVC與MVVM模式的比較來說明前端MVC模式存在的不足，并基于護理信息系統(tǒng)前端用戶界面設計來講述應用MVVM模式來進行前端設計的流程，最后，提出在MVC模式的基礎上使用MVVM模式來改善原先僅使用MVC模式來進行設計的方案與建議。

1 相關文獻回顧

國內(nèi)專家學者對使用Extjs框架進行前端開發(fā)工作，以及如何使用前端MVC和MVVM等模式進行高效率的開發(fā)等相關問題做了大量的研究。Extjs的應用上，秦姣華、袁智威、王振、劉純和[1]探討了Extjs在基于B/S結構的OA型電子商務系統(tǒng)設計中的實踐方式。Extjs實現(xiàn)數(shù)據(jù)存儲與傳輸上，任霄龍，王清心[2]通過對Extjs使用的3種數(shù)據(jù)存儲類型進行研究，證明了在Extjs中實現(xiàn)數(shù)據(jù)存儲與傳輸?shù)母咝耘c便捷性。Extjs與后端Spring mvc高效整合實踐中，張婷[3]提出了一種高效整合Spring MVC與Extjs的方法。前端MVC模式設計研究與實踐中，郭丹丹[4]通過分析在不使用架構的傳統(tǒng)開發(fā)方式下前端所面臨的問題，結合目前存在的前端設計模式、傳統(tǒng)MVC思想和軟件模塊化設計思想，提出了前端MVC架構設計并對其進行具體實現(xiàn)。前端MVVM模式與MVC模式的比較研究中，劉立[5]對MVVM模式進行分析，討論了它的整體構架，并將其與傳統(tǒng)的MVC模式進行對比，分析兩者的異同，闡述了MVVM模式的優(yōu)勢和不足。前端MVVM設計模式的深入應用研究中，陳濤[6]提出使用MVVM設計模式可以分離業(yè)務邏輯，顯示邏輯和用戶界面，使得程序代碼結構清晰，容易被閱讀、測試、維護、替換、擴展和改進。

回顧相關文獻，發(fā)現(xiàn)基于前端JS框架下的設計模式備受學術界重視，有關專家學者也已做出卓有成效的研究，但是，從目前的文獻資料來看，對于新的前端設計模式的實踐應用研究深度不夠。大多數(shù)專家學者只是從理論上進行了分析和探討，如何使用如：Extjs、AngularJs等前端框架在其支持的新設計模式下進行實踐應用，以及實踐中需要遵循和注意的事項研究較少。本文通過運用Extjs框架的MVVM模式設計護理信息管理系統(tǒng)的前端界面實踐后提出了一種基于Extjs框架的MVVM模式實踐方式以及設計中需要遵循和注意的事項。

2 Extjs框架下的MVVM模式

2.1 MVVM模式說明與示意圖

1）view代表用戶界面，是用戶與之交互的前端視圖控件，視圖控件通過綁定ViewModel中聲明的store或者data來實現(xiàn)數(shù)據(jù)在界面上呈現(xiàn)出來，并且當用戶有點擊等命令時會作用于ViewModel；

2）ViewModel為加載了它的視圖控件提供數(shù)據(jù)綁定，并作為它的數(shù)據(jù)儲蓄所，當用戶通過命令作用于它時，它會通過自己內(nèi)置的方法作用于Model（數(shù)據(jù)實體模型）；

3）Model為加載并聲明了它的ViewModel提供數(shù)據(jù)源實體，作為數(shù)據(jù)儲蓄所ViewModel的其中一個數(shù)據(jù)源實體，當ViewModel發(fā)送內(nèi)置方法過來的時候它會通過與之對應的內(nèi)置事件更新ViewModel，然后它通過數(shù)據(jù)雙向綁定的方式更新加載了它并綁定了相對應的Model的視圖控件中的數(shù)據(jù)。

2.2 MVVM模式與MVC模式比較

通過圖2與圖1進行對比，可以看出如果僅僅使用MVC模式來實現(xiàn)系統(tǒng)前端界面的話，Controller層將會非常的膨大不容易進行后期的維護，同時缺乏數(shù)據(jù)綁定的功能，在只用MVC模式的情況下時需要寫比較多且容易重復的代碼來實現(xiàn)這個功能。MVVM模式主要解決了MVC模式中Controller層職責過大，代碼過多導致維護困難的問題。同時，MVVM模式下的Extjs框架提供的視圖與數(shù)據(jù)源變量和數(shù)據(jù)變量的綁定支持能夠很好地減輕MVC模式中從Controller層來實現(xiàn)該功能的任務。所以，MVVM模式在這方面來說是對MVC模式進行了優(yōu)化和補充。然而，在設計比較小型簡易的前端界面情境中，MVC模式能夠很優(yōu)雅的進行，而不需要創(chuàng)建額外的ViewModel類來進行處理。因此，兩者都有它們的使用情境，應該根據(jù)不同的情境來使用它們。這樣才能夠達到最佳的編程實踐。

2.3 視圖中數(shù)據(jù)的綁定實現(xiàn)

涉及數(shù)據(jù)綁定的視圖控件主要是grid和from控件。其中，grid控件主要需要實現(xiàn)的就是對數(shù)據(jù)源變量的綁定，而form控件主要需要實現(xiàn)的就是對數(shù)據(jù)變量的綁定。數(shù)據(jù)變量以及數(shù)據(jù)源變量的聲明由模塊的ViewModel類負責。

2.3.1 Grid控件實現(xiàn)數(shù)據(jù)綁定

進入系統(tǒng)應用界面前首先對圖3中的Application.js文件進行加載，這個文件主要是對整個前端用戶界面的一些變量和函數(shù)進行初始化任務，以便在后面調(diào)用；controller文件夾中主要是一些全局事件函數(shù)定義的Ext.app.Controller類文件，比如模塊與模塊之間的交互，由于整個系統(tǒng)中涉及模塊與模塊之間的交互比較少，所以，controller文件夾除了全局的Root.js控制器外基本上就沒有其他控制器了；model文件夾中存放的是定義了一個模塊的數(shù)據(jù)實體屬性類型的Ext.data.Model類文件；store文件夾中存放的是定義了一個模塊與Java后臺進行對接的實現(xiàn)方式的Ext.data.Store類文件；ux文件夾中存放到的是自定義的模塊間共享的類，如：消息提示框、透明按鈕、時間選擇控件、grid控件、from控件、window控件、分頁控件、以及所有ViewModel的父類定義，這樣就可以實現(xiàn)代碼的重復利用，使得編碼更加優(yōu)雅和高效；view文件夾中存放的是系統(tǒng)中的每一個模塊，關于功能模塊的設計會在下文進行詳細講述。

以護理系統(tǒng)中的工作項類別管理功能模塊為例來說明view文件夾中功能模塊的設計，如下圖4為該模塊的一個結構圖：

圖4中第一個文件是一個Ext.panel.Panel類其中盛裝了grid控件，并加載了ViewModel以便給grid提供數(shù)據(jù)源實體的綁定；第二個文件是一個Ext.app.ViewController類僅僅負責該模塊中的用戶事件函數(shù)定義；第三文件其實是一個Ext.window.Window類其中盛裝了from表單控件主要負責表記錄的新增、修改；第四個文件是一個Ext.grid.Panel類其中盛裝了工具欄、分頁控件以及對ViewModel中定義的currentStores的綁定；第五個文件是一個Ext.toolbar.Toolbar類作為操作grid控件中記錄的工具欄其中盛裝了新增記錄、修改記錄以及刪除記錄等按鈕；第六個文件是一個Ext.app.ViewModel類作為該模塊的視圖中數(shù)據(jù)的存儲所它聲明了該模塊的所有視圖中需要用到的數(shù)據(jù)data，以及數(shù)據(jù)存庫stores，以便給需要的視圖進行數(shù)據(jù)綁定操作。

這就是基于MVVM以及MVC模式開發(fā)的功能模塊結構，為了后期維護方便，模塊中的涉及到的類命名應該統(tǒng)一，這里我采用的是：模塊名+類簡寫 ，以及參考Java的駝峰式命名方式。

3.2系統(tǒng)前端界面展示與說明

當用戶通過點擊左邊的導航欄菜單中“排班管理”下的“護理工作項類別”菜單按鈕時就會在右邊中央?yún)^(qū)域呈現(xiàn)一個grid數(shù)據(jù)列表，它上邊是數(shù)據(jù)記錄操作工具欄，其中有“新增”、“修改”、“刪除”等按鈕，下邊是分頁控件，中間是展示數(shù)據(jù)列記錄的控件。在grid數(shù)據(jù)列表中選擇一條記錄點擊工具欄中的“修改按鈕”時彈出表單窗口，如圖6所示：

從上文中可以知道grid的父容器Panel和from的父容器Window都加載了相同的ViewModel，并且在用戶選擇一條記錄的時候就對from中綁定的current變量把當前選中記錄賦值給了該變量。因此，from中呈現(xiàn)的數(shù)據(jù)與當前在grid表記錄中選擇的記錄字段值是完全對應的。而且，當你修改from表單中的輸入值時與其對應的列值也會同步進行改動。所以這里需要對盛裝該from的window添加關閉操作的監(jiān)聽事件來刷新數(shù)據(jù)列表，以達到數(shù)據(jù)列表展示的一致性。

3.3 最佳設計實現(xiàn)

3.3.1 設計中需要遵循和注意的幾點

1）利用繼承實現(xiàn)代碼的重復利用；

2）利用動態(tài)加載和xtype實現(xiàn)需要的時候才去加載視圖控件；

3）利用MVVM模式中的ViewModel的優(yōu)勢實現(xiàn)模塊中視圖與數(shù)據(jù)的綁定；

4）利用職責分解達到相應的類做相應的事，當一個類過于龐大時就需要考慮分解，尤其是對于比較復雜的界面視圖設計時需要注意這點，這樣就能夠給后期的測試與維護帶來方便；

上面定義的ViewModel負責模塊視圖中需要綁定的數(shù)據(jù)和數(shù)據(jù)源的聲明，在這里很明顯就知道聲明了一個數(shù)據(jù)源currentStores對應app.store.WorkItemCategoryStore，由于本模塊視圖中不需要私有的數(shù)據(jù)變量聲明，因此，data配置為空，而使用到的數(shù)據(jù)變量的聲明在父類app.ux.mvvm.ViewModelBase中，這樣所有模塊可復用。

需要說明的是CRUD（增刪改查）的URL定義以及 Model、Store、ViewModel的關系：URL的定義是通過調(diào)用Application.js這個定義全局變量和函數(shù)以及對象的類中的Gwnis對象的getUrl（參數(shù)列表）方法實現(xiàn)的，這也就實現(xiàn)了代碼的重復利用；ViewModel依賴于Store，而Store依賴于Model，ViewModel提供了本模塊的數(shù)據(jù)儲蓄支持，它是可以包含多個Store的聲明的，而Store和Model唯一的來定義一個數(shù)據(jù)源和一個數(shù)據(jù)模型對象。

4 結束語

通過討論基于Extjs框架的MVC模式與MVVM模式來設計前端界面的利與弊，可以看到如果僅適用于其中一種模式來實現(xiàn)前端界面設計的話都會遇到一些比較棘手的問題，本文提出使用MVVM模式與MVC模式相結合的方式來實現(xiàn)前端界面開發(fā)是非常好的實踐方式。同時，展示了它應用在設計護理信息系統(tǒng)的實踐中取得了相當不錯的效果，并說明了在實踐中的具體應用流程以及需要注意的事項。下一步筆者將研究使用碼基實現(xiàn)功能模塊的快速生成以提高生產(chǎn)的效率。

參考文獻：

[1] 秦姣華， 袁智威， 王振， 等. 利用Ajax與ExtJS改善用戶體驗[J]. 電子設計工程， 2011（10）：1-4.

[2] 任霄龍， 王清心. 基于ExtJS的數(shù)據(jù)存儲與傳輸?shù)难芯颗c實現(xiàn)[N]. 甘肅科學學報， 2013（1）： 124-128.

[3] 張婷. 基于Extjs+SpringMVC的Web系統(tǒng)開發(fā)架構的研究與實現(xiàn)[J]. 計算機技術與發(fā)展， 2013（1）： 147-149，153.

[4] 郭丹丹. 基于MVC的前端開發(fā)研究與應用[D]. 北京： 北京郵電大學， 2012.

[5] 劉立. MVVM模式分析與應用[J]. 微型電腦應用， 2012（12）：57-60.

[6] 陳濤. MVVM設計模式及其應用研究[J]. 計算機與數(shù)字工程， 2014（10）： 1982-1985.

[7] 王小龍， 趙志威， 屠曉光， 等. 基于瀏覽器端MVC的富客戶端技術的應用與研究[J]. 自動化與儀器儀表， 2013（3）： 26-29.

[8] 張建軍， 劉虎. 基于 ExtJS 的 J2EE 輕量級框架的研究與應用[J]. 計算機應用與軟件， 2014（4）：73-76.

[9] 封宇， 陳寧江. 基于MVVM架構的移動Web前端展示方案[J]. 計算機與現(xiàn)代化， 2014（11）：1-4.

[10] Baillie G， Armour B， Allan D， et al. A Model-View-DynamicViewModel and its Performance in a Web-based Component Architecture[J]. Seke， 2011： 786-791.

[11] Stephen Cleary.Patterns for Asynchronous MVVM Applications： Data Binding[J]. MSDN magazine， 2014， 29（3）： 18-23.

[12] Stephen Cleary.Patterns for Asynchronous MVVM Applications： Commands[J].MSDN magazine，2014，29（4）：34-41.

[13] 沈銀華， 汪濤， 王峰. 基于ExtJs、Spring和iBATIS的Web系統(tǒng)應用研究[J]. 軟件導刊， 2011， 10（12）： 13-15.

[14] Zhang T. Research and Realization of Web System Development Architecture Based on Extjs and Spring MVC[J]. Computer Technology & Development， 2013.

[15] 黃競. 基于jQuery框架的Web前端系統(tǒng)構建方法的研究與應用[D]. 北京： 北京郵電大學， 2012.

[16] 喬淑夷. 基于MVC模式的Web前端框架關鍵技術研究與實現(xiàn)[D]. 北京： 中國海洋大學， 2014.

[17] 張鑫. JavaScript凌厲開發(fā)[M]. 北京： 清華大學出版社， 2010.

[18] 衛(wèi)軍. ExtJS Web應用程序開發(fā)指南[M]. 北京： 機械工業(yè)出版社， 2009.