基于MVVM模式的Extjs框架在前端界面设计中的应用研究

肖小岚　刘振宇

摘要：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.