摘要：Extjs作為一個 RIA（Rich Internet Applications）框架，在MVC模式的基礎上提供了MVVM模式的支持。該文詳細介紹了Extjs框架下的前端MVVM與MVC設計模式的工作原理以及它們各自優點與不足，并將實現MVVM設計模式的Extjs框架引入到前端用戶界面的開發中，通過在護理信息系統的用戶界面設計中的成功實踐后提出了使用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
近年來，隨著互聯網應用的開發熱潮的到來，前端JS框架在B/S項目開發的地位越來越重要，然而傳統的基于MVC模式的前端JS框架還存在著許多不足。文中通過對Extjs框架中MVC與MVVM模式的比較來說明前端MVC模式存在的不足，并基于護理信息系統前端用戶界面設計來講述應用MVVM模式來進行前端設計的流程，最后，提出在MVC模式的基礎上使用MVVM模式來改善原先僅使用MVC模式來進行設計的方案與建議。
1 相關文獻回顧
國內專家學者對使用Extjs框架進行前端開發工作，以及如何使用前端MVC和MVVM等模式進行高效率的開發等相關問題做了大量的研究。Extjs的應用上，秦姣華、袁智威、王振、劉純和[1]探討了Extjs在基于B/S結構的OA型電子商務系統設計中的實踐方式。Extjs實現數據存儲與傳輸上，任霄龍，王清心[2]通過對Extjs使用的3種數據存儲類型進行研究，證明了在Extjs中實現數據存儲與傳輸的高效性與便捷性。Extjs與后端Spring mvc高效整合實踐中，張婷[3]提出了一種高效整合Spring MVC與Extjs的方法。前端MVC模式設計研究與實踐中，郭丹丹[4]通過分析在不使用架構的傳統開發方式下前端所面臨的問題，結合目前存在的前端設計模式、傳統MVC思想和軟件模塊化設計思想，提出了前端MVC架構設計并對其進行具體實現。前端MVVM模式與MVC模式的比較研究中，劉立[5]對MVVM模式進行分析，討論了它的整體構架，并將其與傳統的MVC模式進行對比，分析兩者的異同，闡述了MVVM模式的優勢和不足。前端MVVM設計模式的深入應用研究中，陳濤[6]提出使用MVVM設計模式可以分離業務邏輯，顯示邏輯和用戶界面，使得程序代碼結構清晰，容易被閱讀、測試、維護、替換、擴展和改進。
回顧相關文獻，發現基于前端JS框架下的設計模式備受學術界重視，有關專家學者也已做出卓有成效的研究，但是，從目前的文獻資料來看，對于新的前端設計模式的實踐應用研究深度不夠。大多數專家學者只是從理論上進行了分析和探討，如何使用如：Extjs、AngularJs等前端框架在其支持的新設計模式下進行實踐應用，以及實踐中需要遵循和注意的事項研究較少。本文通過運用Extjs框架的MVVM模式設計護理信息管理系統的前端界面實踐后提出了一種基于Extjs框架的MVVM模式實踐方式以及設計中需要遵循和注意的事項。
2 Extjs框架下的MVVM模式
2.1 MVVM模式說明與示意圖
1）view代表用戶界面，是用戶與之交互的前端視圖控件，視圖控件通過綁定ViewModel中聲明的store或者data來實現數據在界面上呈現出來，并且當用戶有點擊等命令時會作用于ViewModel；
2）ViewModel為加載了它的視圖控件提供數據綁定，并作為它的數據儲蓄所，當用戶通過命令作用于它時，它會通過自己內置的方法作用于Model（數據實體模型）；
3）Model為加載并聲明了它的ViewModel提供數據源實體，作為數據儲蓄所ViewModel的其中一個數據源實體，當ViewModel發送內置方法過來的時候它會通過與之對應的內置事件更新ViewModel，然后它通過數據雙向綁定的方式更新加載了它并綁定了相對應的Model的視圖控件中的數據。
2.2 MVVM模式與MVC模式比較
通過圖2與圖1進行對比，可以看出如果僅僅使用MVC模式來實現系統前端界面的話，Controller層將會非常的膨大不容易進行后期的維護，同時缺乏數據綁定的功能，在只用MVC模式的情況下時需要寫比較多且容易重復的代碼來實現這個功能。MVVM模式主要解決了MVC模式中Controller層職責過大，代碼過多導致維護困難的問題。同時，MVVM模式下的Extjs框架提供的視圖與數據源變量和數據變量的綁定支持能夠很好地減輕MVC模式中從Controller層來實現該功能的任務。所以，MVVM模式在這方面來說是對MVC模式進行了優化和補充。然而，在設計比較小型簡易的前端界面情境中，MVC模式能夠很優雅的進行，而不需要創建額外的ViewModel類來進行處理。因此，兩者都有它們的使用情境，應該根據不同的情境來使用它們。這樣才能夠達到最佳的編程實踐。 2.3 視圖中數據的綁定實現
涉及數據綁定的視圖控件主要是grid和from控件。其中，grid控件主要需要實現的就是對數據源變量的綁定，而form控件主要需要實現的就是對數據變量的綁定。數據變量以及數據源變量的聲明由模塊的ViewModel類負責。
2.3.1 Grid控件實現數據綁定
進入系統應用界面前首先對圖3中的Application.js文件進行加載，這個文件主要是對整個前端用戶界面的一些變量和函數進行初始化任務，以便在后面調用；controller文件夾中主要是一些全局事件函數定義的Ext.app.Controller類文件，比如模塊與模塊之間的交互，由于整個系統中涉及模塊與模塊之間的交互比較少，所以，controller文件夾除了全局的Root.js控制器外基本上就沒有其他控制器了；model文件夾中存放的是定義了一個模塊的數據實體屬性類型的Ext.data.Model類文件；store文件夾中存放的是定義了一個模塊與Java后臺進行對接的實現方式的Ext.data.Store類文件；ux文件夾中存放到的是自定義的模塊間共享的類，如：消息提示框、透明按鈕、時間選擇控件、grid控件、from控件、window控件、分頁控件、以及所有ViewModel的父類定義，這樣就可以實現代碼的重復利用，使得編碼更加優雅和高效；view文件夾中存放的是系統中的每一個模塊，關于功能模塊的設計會在下文進行詳細講述。
以護理系統中的工作項類別管理功能模塊為例來說明view文件夾中功能模塊的設計，如下圖4為該模塊的一個結構圖：
圖4中第一個文件是一個Ext.panel.Panel類其中盛裝了grid控件，并加載了ViewModel以便給grid提供數據源實體的綁定；第二個文件是一個Ext.app.ViewController類僅僅負責該模塊中的用戶事件函數定義；第三文件其實是一個Ext.window.Window類其中盛裝了from表單控件主要負責表記錄的新增、修改；第四個文件是一個Ext.grid.Panel類其中盛裝了工具欄、分頁控件以及對ViewModel中定義的currentStores的綁定；第五個文件是一個Ext.toolbar.Toolbar類作為操作grid控件中記錄的工具欄其中盛裝了新增記錄、修改記錄以及刪除記錄等按鈕；第六個文件是一個Ext.app.ViewModel類作為該模塊的視圖中數據的存儲所它聲明了該模塊的所有視圖中需要用到的數據data，以及數據存庫stores，以便給需要的視圖進行數據綁定操作。
這就是基于MVVM以及MVC模式開發的功能模塊結構，為了后期維護方便，模塊中的涉及到的類命名應該統一，這里我采用的是：模塊名+類簡寫 ，以及參考Java的駝峰式命名方式。
3.2系統前端界面展示與說明
當用戶通過點擊左邊的導航欄菜單中“排班管理”下的“護理工作項類別”菜單按鈕時就會在右邊中央區域呈現一個grid數據列表，它上邊是數據記錄操作工具欄，其中有“新增”、“修改”、“刪除”等按鈕，下邊是分頁控件，中間是展示數據列記錄的控件。在grid數據列表中選擇一條記錄點擊工具欄中的“修改按鈕”時彈出表單窗口，如圖6所示：
從上文中可以知道grid的父容器Panel和from的父容器Window都加載了相同的ViewModel，并且在用戶選擇一條記錄的時候就對from中綁定的current變量把當前選中記錄賦值給了該變量。因此，from中呈現的數據與當前在grid表記錄中選擇的記錄字段值是完全對應的。而且，當你修改from表單中的輸入值時與其對應的列值也會同步進行改動。所以這里需要對盛裝該from的window添加關閉操作的監聽事件來刷新數據列表，以達到數據列表展示的一致性。
3.3 最佳設計實現
3.3.1 設計中需要遵循和注意的幾點
1）利用繼承實現代碼的重復利用；
2）利用動態加載和xtype實現需要的時候才去加載視圖控件；
3）利用MVVM模式中的ViewModel的優勢實現模塊中視圖與數據的綁定；
4）利用職責分解達到相應的類做相應的事，當一個類過于龐大時就需要考慮分解，尤其是對于比較復雜的界面視圖設計時需要注意這點，這樣就能夠給后期的測試與維護帶來方便；
上面定義的ViewModel負責模塊視圖中需要綁定的數據和數據源的聲明，在這里很明顯就知道聲明了一個數據源currentStores對應app.store.WorkItemCategoryStore，由于本模塊視圖中不需要私有的數據變量聲明，因此，data配置為空，而使用到的數據變量的聲明在父類app.ux.mvvm.ViewModelBase中，這樣所有模塊可復用。
需要說明的是CRUD（增刪改查）的URL定義以及 Model、Store、ViewModel的關系：URL的定義是通過調用Application.js這個定義全局變量和函數以及對象的類中的Gwnis對象的getUrl（參數列表）方法實現的，這也就實現了代碼的重復利用；ViewModel依賴于Store，而Store依賴于Model，ViewModel提供了本模塊的數據儲蓄支持，它是可以包含多個Store的聲明的，而Store和Model唯一的來定義一個數據源和一個數據模型對象。
4 結束語
通過討論基于Extjs框架的MVC模式與MVVM模式來設計前端界面的利與弊，可以看到如果僅適用于其中一種模式來實現前端界面設計的話都會遇到一些比較棘手的問題，本文提出使用MVVM模式與MVC模式相結合的方式來實現前端界面開發是非常好的實踐方式。同時，展示了它應用在設計護理信息系統的實踐中取得了相當不錯的效果，并說明了在實踐中的具體應用流程以及需要注意的事項。下一步筆者將研究使用碼基實現功能模塊的快速生成以提高生產的效率。 參考文獻：
[1] 秦姣華， 袁智威， 王振， 等. 利用Ajax與ExtJS改善用戶體驗[J]. 電子設計工程， 2011（10）：1-4.
[2] 任霄龍， 王清心. 基于ExtJS的數據存儲與傳輸的研究與實現[N]. 甘肅科學學報， 2013（1）： 124-128.
[3] 張婷. 基于Extjs+SpringMVC的Web系統開發架構的研究與實現[J]. 計算機技術與發展， 2013（1）： 147-149，153.
[4] 郭丹丹. 基于MVC的前端開發研究與應用[D]. 北京： 北京郵電大學， 2012.
[5] 劉立. MVVM模式分析與應用[J]. 微型電腦應用， 2012（12）：57-60.
[6] 陳濤. MVVM設計模式及其應用研究[J]. 計算機與數字工程， 2014（10）： 1982-1985.
[7] 王小龍， 趙志威， 屠曉光， 等. 基于瀏覽器端MVC的富客戶端技術的應用與研究[J]. 自動化與儀器儀表， 2013（3）： 26-29.
[8] 張建軍， 劉虎. 基于 ExtJS 的 J2EE 輕量級框架的研究與應用[J]. 計算機應用與軟件， 2014（4）：73-76.
[9] 封宇， 陳寧江. 基于MVVM架構的移動Web前端展示方案[J]. 計算機與現代化， 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系統應用研究[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前端系統構建方法的研究與應用[D]. 北京： 北京郵電大學， 2012.
[16] 喬淑夷. 基于MVC模式的Web前端框架關鍵技術研究與實現[D]. 北京： 中國海洋大學， 2014.
[17] 張鑫. JavaScript凌厲開發[M]. 北京： 清華大學出版社， 2010.
[18] 衛軍. ExtJS Web應用程序開發指南[M]. 北京： 機械工業出版社， 2009.
