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

1、 基于MVVM模式的Extjs框架在前端界面設(shè)計中的應用研究 肖小嵐劉振宇Summary：Extjs作為一個 RIA（Rich Internet Applications）框架，在MVC模式的基礎(chǔ)上提供了MVVM模式的支持。該文詳細介紹了Extjs框架下的前端MVVM與MVC設(shè)計模式的工作原理以及它們各自優(yōu)點與不足，并將實現(xiàn)MVVM設(shè)計模式的Extjs框架引入到前端用戶界面的開發(fā)中，通過在護理信息系統(tǒng)的用戶界面設(shè)計中的成功實踐后提出了使用MVVM模式在Extjs框架下的一種編程實踐。Key：前端設(shè)計模式；Extjs；MVVM；MVC：TP311 ：A ：1009-3044（2016）05-00

2、84-05Abstract： 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， an

3、d 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： fron

4、t-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)前端用戶界面設(shè)計來講述應用MVVM模式來進行前端設(shè)計的流程，最后，提出在MVC模式的基礎(chǔ)上使用MVVM模式來改善原先僅使用MVC模式來進行設(shè)計的方案與建議。1 相關(guān)文獻回顧國內(nèi)專家學者對使用Extjs框架進行前端開發(fā)工作，以及如何使用前端MVC和MVVM等模式進行高效率的開發(fā)等相

5、關(guān)問題做了大量的研究。Extjs的應用上，秦姣華、袁智威、王振、劉純和1探討了Extjs在基于B/S結(jié)構(gòu)的OA型電子商務系統(tǒng)設(shè)計中的實踐方式。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模式設(shè)計研究與實踐中，郭丹丹4通過分析在不使用架構(gòu)的傳統(tǒng)開發(fā)方式下前端所面臨的問題，結(jié)合目前存在的前端設(shè)計模式、傳統(tǒng)MVC思想和軟件模塊化設(shè)計思想，提出了前端MVC架構(gòu)設(shè)計并對其進

6、行具體實現(xiàn)。前端MVVM模式與MVC模式的比較研究中，劉立5對MVVM模式進行分析，討論了它的整體構(gòu)架，并將其與傳統(tǒng)的MVC模式進行對比，分析兩者的異同，闡述了MVVM模式的優(yōu)勢和不足。前端MVVM設(shè)計模式的深入應用研究中，陳濤6提出使用MVVM設(shè)計模式可以分離業(yè)務邏輯，顯示邏輯和用戶界面，使得程序代碼結(jié)構(gòu)清晰，容易被閱讀、測試、維護、替換、擴展和改進?；仡櫹嚓P(guān)文獻，發(fā)現(xiàn)基于前端JS框架下的設(shè)計模式備受學術(shù)界重視，有關(guān)專家學者也已做出卓有成效的研究，但是，從目前的文獻資料來看，對于新的前端設(shè)計模式的實踐應用研究深度不夠。大多數(shù)專家學者只是從理論上進行了分析和探討，如何使用如：Extjs、Ang

7、ularJs等前端框架在其支持的新設(shè)計模式下進行實踐應用，以及實踐中需要遵循和注意的事項研究較少。本文通過運用Extjs框架的MVVM模式設(shè)計護理信息管理系統(tǒng)的前端界面實踐后提出了一種基于Extjs框架的MVVM模式實踐方式以及設(shè)計中需要遵循和注意的事項。2 Extjs框架下的MVVM模式2.1 MVVM模式說明與示意圖1）view代表用戶界面，是用戶與之交互的前端視圖控件，視圖控件通過綁定ViewModel中聲明的store或者data來實現(xiàn)數(shù)據(jù)在界面上呈現(xiàn)出來，并且當用戶有點擊等命令時會作用于ViewModel；2）ViewModel為加載了它的視圖控件提供數(shù)據(jù)綁定，并作為它的數(shù)據(jù)儲蓄所，

8、當用戶通過命令作用于它時，它會通過自己內(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模式的情況下

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

10、定的視圖控件主要是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文

11、件夾除了全局的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)中的每一個模塊，關(guān)于功能模塊的設(shè)計會在下文進行詳細講述。以護理系統(tǒng)中的

12、工作項類別管理功能模塊為例來說明view文件夾中功能模塊的設(shè)計，如下圖4為該模塊的一個結(jié)構(gòu)圖：圖4中第一個文件是一個Ext.panel.Panel類其中盛裝了grid控件，并加載了ViewModel以便給grid提供數(shù)據(jù)源實體的綁定；第二個文件是一個Ext.app.ViewController類僅僅負責該模塊中的用戶事件函數(shù)定義；第三文件其實是一個Ext.window.Window類其中盛裝了from表單控件主要負責表記錄的新增、修改；第四個文件是一個Ext.grid.Panel類其中盛裝了工具欄、分頁控件以及對ViewModel中定義的currentStores的綁定；第五個文件是一個Ext

13、.toolbar.Toolbar類作為操作grid控件中記錄的工具欄其中盛裝了新增記錄、修改記錄以及刪除記錄等按鈕；第六個文件是一個Ext.app.ViewModel類作為該模塊的視圖中數(shù)據(jù)的存儲所它聲明了該模塊的所有視圖中需要用到的數(shù)據(jù)data，以及數(shù)據(jù)存庫stores，以便給需要的視圖進行數(shù)據(jù)綁定操作。這就是基于MVVM以及MVC模式開發(fā)的功能模塊結(jié)構(gòu)，為了后期維護方便，模塊中的涉及到的類命名應該統(tǒng)一，這里我采用的是：模塊名+類簡寫 ，以及參考Java的駝峰式命名方式。3.2系統(tǒng)前端界面展示與說明當用戶通過點擊左邊的導航欄菜單中“排班管理”下的“護理工作項類別”菜單按鈕時就會在右邊中央?yún)^(qū)域

14、呈現(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表單中的輸入值時與其對應的列值也會同步進行改動。所以這里需要對盛裝該f

15、rom的window添加關(guān)閉操作的監(jiān)聽事件來刷新數(shù)據(jù)列表，以達到數(shù)據(jù)列表展示的一致性。3.3 最佳設(shè)計實現(xiàn)3.3.1 設(shè)計中需要遵循和注意的幾點1）利用繼承實現(xiàn)代碼的重復利用；2）利用動態(tài)加載和xtype實現(xiàn)需要的時候才去加載視圖控件；3）利用MVVM模式中的ViewModel的優(yōu)勢實現(xiàn)模塊中視圖與數(shù)據(jù)的綁定；4）利用職責分解達到相應的類做相應的事，當一個類過于龐大時就需要考慮分解，尤其是對于比較復雜的界面視圖設(shè)計時需要注意這點，這樣就能夠給后期的測試與維護帶來方便；上面定義的ViewModel負責模塊視圖中需要綁定的數(shù)據(jù)和數(shù)據(jù)源的聲明，在這里很明顯就知道聲明了一個數(shù)據(jù)源currentStor

16、es對應app.store.WorkItemCategoryStore，由于本模塊視圖中不需要私有的數(shù)據(jù)變量聲明，因此，data配置為空，而使用到的數(shù)據(jù)變量的聲明在父類app.ux.mvvm.ViewModelBase中，這樣所有模塊可復用。需要說明的是CRUD（增刪改查）的URL定義以及 Model、Store、ViewModel的關(guān)系：URL的定義是通過調(diào)用Application.js這個定義全局變量和函數(shù)以及對象的類中的Gwnis對象的getUrl（參數(shù)列表）方法實現(xiàn)的，這也就實現(xiàn)了代碼的重復利用；ViewModel依賴于Store，而Store依賴于Model，ViewModel提供了

17、本模塊的數(shù)據(jù)儲蓄支持，它是可以包含多個Store的聲明的，而Store和Model唯一的來定義一個數(shù)據(jù)源和一個數(shù)據(jù)模型對象。4 結(jié)束語通過討論基于Extjs框架的MVC模式與MVVM模式來設(shè)計前端界面的利與弊，可以看到如果僅適用于其中一種模式來實現(xiàn)前端界面設(shè)計的話都會遇到一些比較棘手的問題，本文提出使用MVVM模式與MVC模式相結(jié)合的方式來實現(xiàn)前端界面開發(fā)是非常好的實踐方式。同時，展示了它應用在設(shè)計護理信息系統(tǒng)的實踐中取得了相當不錯的效果，并說明了在實踐中的具體應用流程以及需要注意的事項。下一步筆者將研究使用碼基實現(xiàn)功能模塊的快速生成以提高生產(chǎn)的效率。 Reference：1 秦姣華， 袁智威

18、， 王振， 等. 利用Ajax與ExtJS改善用戶體驗J. 電子設(shè)計工程， 2011（10）：1-4.2 任霄龍， 王清心. 基于ExtJS的數(shù)據(jù)存儲與傳輸?shù)难芯颗c實現(xiàn)N. 甘肅科學學報， 2013（1）： 124-128.3 張婷. 基于Extjs+SpringMVC的Web系統(tǒng)開發(fā)架構(gòu)的研究與實現(xiàn)J. 計算機技術(shù)與發(fā)展， 2013（1）： 147-149，153.4 郭丹丹. 基于MVC的前端開發(fā)研究與應用D. 北京： 北京郵電大學， 2012.5 劉立. MVVM模式分析與應用J. 微型電腦應用， 2012（12）：57-60.6 陳濤. MVVM設(shè)計模式及其應用研究J. 計算機與數(shù)字工

19、程， 2014（10）： 1982-1985.7 王小龍， 趙志威， 屠曉光， 等. 基于瀏覽器端MVC的富客戶端技術(shù)的應用與研究J. 自動化與儀器儀表， 2013（3）： 26-29.8 張建軍， 劉虎. 基于 ExtJS 的 J2EE 輕量級框架的研究與應用J. 計算機應用與軟件， 2014（4）：73-76.9 封宇， 陳寧江. 基于MVVM架構(gòu)的移動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 ArchitectureJ. Seke， 2011： 786-791.11 Stephen Cleary.Patterns for Asynchronous MVVM Applications： Data BindingJ. MSDN magazine， 2014， 29（