肖小嵐　劉振宇

摘要：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框架下的一種編程實踐。

關(guān)鍵詞：前端設(shè)計模式；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)應(yīng)用的開發(fā)熱潮的到來，前端JS框架在B/S項目開發(fā)的地位越來越重要，然而傳統(tǒng)的基于MVC模式的前端JS框架還存在著許多不足。文中通過對Extjs框架中MVC與MVVM模式的比較來說明前端MVC模式存在的不足，并基于護理信息系統(tǒng)前端用戶界面設(shè)計來講述應(yīng)用MVVM模式來進行前端設(shè)計的流程，最后，提出在MVC模式的基礎(chǔ)上使用MVVM模式來改善原先僅使用MVC模式來進行設(shè)計的方案與建議。

1 相關(guān)文獻回顧

國內(nèi)專家學(xué)者對使用Extjs框架進行前端開發(fā)工作，以及如何使用前端MVC和MVVM等模式進行高效率的開發(fā)等相關(guān)問題做了大量的研究。Extjs的應(yīng)用上，秦姣華、袁智威、王振、劉純和[1]探討了Extjs在基于B/S結(jié)構(gòu)的OA型電子商務(wù)系統(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è)計并對其進行具體實現(xiàn)。前端MVVM模式與MVC模式的比較研究中，劉立[5]對MVVM模式進行分析，討論了它的整體構(gòu)架，并將其與傳統(tǒng)的MVC模式進行對比，分析兩者的異同，闡述了MVVM模式的優(yōu)勢和不足。前端MVVM設(shè)計模式的深入應(yīng)用研究中，陳濤[6]提出使用MVVM設(shè)計模式可以分離業(yè)務(wù)邏輯，顯示邏輯和用戶界面，使得程序代碼結(jié)構(gòu)清晰，容易被閱讀、測試、維護、替換、擴展和改進。

回顧相關(guān)文獻，發(fā)現(xiàn)基于前端JS框架下的設(shè)計模式備受學(xué)術(shù)界重視，有關(guān)專家學(xué)者也已做出卓有成效的研究，但是，從目前的文獻資料來看，對于新的前端設(shè)計模式的實踐應(yīng)用研究深度不夠。大多數(shù)專家學(xué)者只是從理論上進行了分析和探討，如何使用如：Extjs、AngularJs等前端框架在其支持的新設(shè)計模式下進行實踐應(yīng)用，以及實踐中需要遵循和注意的事項研究較少。本文通過運用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ù)儲蓄所，當用戶通過命令作用于它時，它會通過自己內(nèi)置的方法作用于Model（數(shù)據(jù)實體模型）；

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

2.2 MVVM模式與MVC模式比較

通過圖2與圖1進行對比，可以看出如果僅僅使用MVC模式來實現(xiàn)系統(tǒng)前端界面的話，Controller層將會非常的膨大不容易進行后期的維護，同時缺乏數(shù)據(jù)綁定的功能，在只用MVC模式的情況下時需要寫比較多且容易重復(fù)的代碼來實現(xiàn)這個功能。MVVM模式主要解決了MVC模式中Controller層職責過大，代碼過多導(dǎo)致維護困難的問題。同時，MVVM模式下的Extjs框架提供的視圖與數(shù)據(jù)源變量和數(shù)據(jù)變量的綁定支持能夠很好地減輕MVC模式中從Controller層來實現(xiàn)該功能的任務(wù)。所以，MVVM模式在這方面來說是對MVC模式進行了優(yōu)化和補充。然而，在設(shè)計比較小型簡易的前端界面情境中，MVC模式能夠很優(yōu)雅的進行，而不需要創(chuàng)建額外的ViewModel類來進行處理。因此，兩者都有它們的使用情境，應(yīng)該根據(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)應(yīng)用界面前首先對圖3中的Application.js文件進行加載，這個文件主要是對整個前端用戶界面的一些變量和函數(shù)進行初始化任務(wù)，以便在后面調(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)代碼的重復(fù)利用，使得編碼更加優(yōu)雅和高效；view文件夾中存放的是系統(tǒng)中的每一個模塊，關(guān)于功能模塊的設(shè)計會在下文進行詳細講述。

以護理系統(tǒng)中的工作項類別管理功能模塊為例來說明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.toolbar.Toolbar類作為操作grid控件中記錄的工具欄其中盛裝了新增記錄、修改記錄以及刪除記錄等按鈕；第六個文件是一個Ext.app.ViewModel類作為該模塊的視圖中數(shù)據(jù)的存儲所它聲明了該模塊的所有視圖中需要用到的數(shù)據(jù)data，以及數(shù)據(jù)存庫stores，以便給需要的視圖進行數(shù)據(jù)綁定操作。

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

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

當用戶通過點擊左邊的導(dǎo)航欄菜單中“排班管理”下的“護理工作項類別”菜單按鈕時就會在右邊中央?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表記錄中選擇的記錄字段值是完全對應(yīng)的。而且，當你修改from表單中的輸入值時與其對應(yīng)的列值也會同步進行改動。所以這里需要對盛裝該from的window添加關(guān)閉操作的監(jiān)聽事件來刷新數(shù)據(jù)列表，以達到數(shù)據(jù)列表展示的一致性。

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

3.3.1 設(shè)計中需要遵循和注意的幾點

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

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

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

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

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

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

4 結(jié)束語

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

參考文獻：

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

[2] 任霄龍， 王清心. 基于ExtJS的數(shù)據(jù)存儲與傳輸?shù)难芯颗c實現(xiàn)[N]. 甘肅科學(xué)學(xué)報， 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ā)研究與應(yīng)用[D]. 北京： 北京郵電大學(xué)， 2012.

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

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

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

[8] 張建軍， 劉虎. 基于 ExtJS 的 J2EE 輕量級框架的研究與應(yīng)用[J]. 計算機應(yīng)用與軟件， 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 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)應(yīng)用研究[J]. 軟件導(dǎo)刊， 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)構(gòu)建方法的研究與應(yīng)用[D]. 北京： 北京郵電大學(xué)， 2012.

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

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

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