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

基于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模式