MVVM框架在Web前端的应用研究

2017-12-28苏艳武汉传媒学院

数码世界 2017年11期

关键词：数据模型视图代码

苏艳武汉传媒学院

MVVM框架在Web前端的应用研究

苏艳武汉传媒学院

在Web技术不断发展的过程当中，其前端技术也在此过程中获得了较大的发展。在本文中，将就MVVM框架在Web前端的应用进行一定的研究。

MVVM框架 Web前端应用

1 引言

面向对象设计原则是现今应用较多的框架类型，MVP、MVC以及MVVM是以该核心为原则形成的框架模式。而在现今web广泛应用的情况下，前端规模也在此过程中得到了进一步的扩大。

2 Angular JS中MVVM框架应用

Angular JS是由Google于2009年公布的框架，具有着双向数据绑定、测试驱动开发以及模块化思想等特点，且在移动设备支持方面具有着较好的表现。在开始阶段，该框架是标准的MVC设计模式，而随着API重写以及代码重构，目前其具有了明显的MVVM模式特征。

在Angular JS当中，MVVM模式主要在以下几个方面得到了体现：第一，view。该部分的功能即是对界面的渲染与显示。在Angular JS当中，其除了CSS以及HTML等基本视图代码意外，且具有Angular JS表达式以及指令等视图模块。在实际应用当中，view不能够同Model直接进行交互，而需要通过专门的指令进行引用；第二，ViewModel。该部分的功能是对Model以及View之间的协作与交互功能进行实现。在具体应用当中，其将对view实现显示数据的提供，并具有Command操作方式的提供。在框架当中，scope对象为功能模块包装，通过一定API的提供对view状态进行监控，能够将函数以及数据模型对视图进行暴露，包括有控制器定义行为、处理跳转、视图处理页面布局以及数据引用关系等内容；第三，Model。其是应用程序当中对业务逻辑数据进行封装的载体，为业务领域对象。在Angular JS当中，其驱动为数据模型Model。通过数据绑定技术的应用，则能够以数据模型变化情况自动更新视图。对此，模型也是现阶段web程序设计与开发当中的一项重点内容。在Angular JS当中，scope是ViewModel同Model之间互动的桥梁，能够对Model的变化情况进行监听，并以View进行渲染与发送。在实际工作中，Model并不需要关心具体操作以及显示情况，对此，在Model当中也不会对界面逻辑进行包含。在web页面中，很多Model都是全局配置对象或者服务端的返回数据，而在Angular JS当中，其所具有的http服务即能够对Model相关的业务逻辑进行封装与处理；第四，Controller。在Angular JS当中，对无状态Controller进行了提供，其并非模式当中的核心元素。在实际应用当中，其能够对模型的初始状态进行设置，通过多个服务的组合对业务领域Model进行获取，并将其放在ViewModel对象上，以此使界面在加载阶段成为可用状态。同时，其也可以在对模型变化进行监控的基础上对相应的动作进行采取。同时，在框架中具有jQLite，在其内部，具有JQuery子集的实现，具有事件绑定等常用的操作方式，在时间应用中，可以在不需要关注数据呈现方式的情况下通过框架实现View以及Model的更新。

3 web前端MVVM应用优势

在web当中，MVVM非常适合应用在web前端JS框架当中。从团队角度看来，通过MVVM的应用，能能够对软件的开发方式进行改变。ViewModel同View间松耦合关系的存在，则可以使设计同开发团队在实际工作当中具有着明确的分工。在工作中，设计团队的任务即是对友好的用户界面进行形成，而开发团队的任务即专注在数据与业务逻辑方面，以此实现开发效率的提升。架构角度方面，模块间松耦合关系的存在，使得不同模块之间具有了更低的依赖性，在具有稳定项目架构的同时获得更高的扩展性，在后续工作当中，如果根据工作需求需要对新模块进行增加，则能够以最小的改动幅度达到目标。代码方面，通过合理规划分层ViewModel的应用，能够在对代码重用性进行提升的基础上使逻辑结构具有简洁的特点。此外，在对MVVM应用的情况下，也能够在实现应用结构组织的基础上使项目模块具有条理化以及清晰化的特点，在对代码可读性进行增强的基础上实现前端测试难度的降低。