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

◆莫文水

（广西现代职业技术学院建筑与信息工程系 广西 547000）

安全模型、算法与编程

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

◆莫文水

（广西现代职业技术学院建筑与信息工程系 广西 547000）

随着人们需求的不断提高，Web研究不断深入，以期能够最大程度地满足人们当下对于信息等的需求。其中，Web逐渐出现前端和后端的分化，本文研究对象就是基于Web前端中进行的。MVVM框架在Web前端中具有很大的实践意义，在一定程度上促进了Web前端的发展和进步。本文重点就是研究MVVM在Web前端中的应用研究，其中又将其与前端传统开发思维进行了一定的对比，进一步呈现了MVVM在Web中的发展优势。

Web前端；MVVM框架；应用研究

0 前言

Web应用逐渐趋向于复杂化，为了能够加强Web中各组分的分工，实现Web高效率的行，引入了Web前端和后端的概念。Web前端中也逐渐形成了多种框架，比如：MVP、MVVM、MVC，本文将研究Web中MVVM框架的应用。

1 Web前端及MVVM框架概述

在对MVVM框架在Web前端中应用进行研究之前，必须要对这两个概念进行简要的了解，明白其基本的含义，进而才能够开展下面的工作。

1.1 Web前端

Web在网页设计中作为网页被引用，现今被广泛的翻译为网络、互联网等技术领域，主要有三种形式，分别是超文本传输协议、超文本、超媒体[1]。而Web前端是一个新兴的词汇，是随着Web的深入发展而产生的，其目的是为了满足用户交互需求。在此所指的前端泛指在 Web应用中能够看得见碰的着的东西，有Web页面的结构、Web层面的交互实现、Web的外观视觉表现。

一般对于 Web前端人员的要求是精通 CSS、HTML、JavaScript，能够清晰的了解常见浏览器兼容问题，对yahoo的性能优化有一定的了解。

1.2 MVVM框架

MVVM实际上就是Model-View-View-Modle的简写，此种框架是WPF与MVP相互结合形成的一种新型的架构框架，其基本原理是在MVP框架的基础上大力引进WPF新特性，进而满足用户多样化的需求。此种框架强调的是以数据为核心，利用数据驱动界面，而视图则成为了从属地位。

MVVM框架模式主要有三部分构成，分别是模型、视图模型、视图，在MVVM中单独定制了一个Model，即是ViewModel，在此种的视图逻辑可以利用数据的双向绑定和命令绑定实现视图和数据模型的自动同步。在MVVM中每个板块都有不同的分工，视图版块主要的功能就是呈现界面，利用ViewModel和Model通信实现自身的独立变化、修改等。在模型这一板块中主要是对与业务逻辑相关的数据进行封装和处理。至于视图模型则是对视图逻辑和View、Model模块之间状态的控制和封装。

2 MVVM框架在Web前端开发中的优势

将MVVM框架应用于Web前端开发很好地达到了交互界面的形成与扩展，在 Web前端的开发中发挥了很大的作用，下面就简要对MWWM框架在Web前端开发中的优势进行简要分析。

2.1 可重用性

MVVM框架可以实现视图逻辑的可重用性，将一些试图逻辑放在一个ViewModel中，就可以让许多的视图来重用这段视图逻辑，大大提高了MVVM在Web中的工作效率，为用户节省了不少的时间。

2.2 低耦合

MVVM框架中十分重视视图与模型的分离、独立，其中，视图能够脱离模型而存在，并且能够进行一定的变化和修改，也就是讲在 Web 前端运行的过程中模型和视图联系不大，分工明确，两者之间的工作互不影响，可以很好的保证MVVM框架的实际质量[2]。另外，视图与模型之间的相对独立，大大降低了这两者之间的依赖性，使得相关结构更为稳定，在后期的开发或者改动中也有很大的发展空间和可行性，提高了开发成功的几率以及开发深度。

2.3 降低前度测试难度

在Web前端的运行中需要进行不定期的测试，保证Web前端运行的质量，但是传统的测试模式十分复杂，不利于工作的正常开展。所以在此情况下MVVM框架的优势就显现出来了，借助MVVM框架能够很好对应用结构进行组织，将项目模块变得更加具有条理化、逻辑化，这样一来就会使得代码的可读性增强，进而降低Web前端的测试难度。

3 MVVM框架在Angular JS中的应用简要分析

在日后互联网技术的进一步发展下，MVVM框架的是进步还是落后取决于在互联网背景下MVVM框架在Web前端中的实际应用。有关MVVM框架在Web中的应用研究是一项长期的任务，当下将MVVM框架作用发挥的很好地是Angular JS，该项模式技术是 Web前端应用中的一项最为关键的模式，基本上可以称之为Web前端中JS的领导者。MVVM框架在Angular JS中的应用主要体现在视图、模型以及视图模型中，这三个方面全面展现了MVVM框架之于Web前端的重要作用，视图主要作用于页面的渲染和显示，视图模型则是将视图与模型结合在一起一方面为视图提供了数据，另一方面为模型运用提供了多种方式，在模型中主要充当面向业务数据、承载业务逻辑数据的载体。在Angular JS中十分强调模型思想，面向双向数据，不同于以往传统 Web前端，该项模式是一项新型的前端开发思维体现，将模型与视图有机的结合在了一起，实现了两者之间的分离和解耦，大大降低了Web前端的工作量，促进了Web前端开发的进步。

4 结束语

MVVM框架的出现无疑为Web前端的发展带来了很大的动力与优势，在互联网技术逐渐发展的当下，更应该专注于MVVM框架性能的提高以及新产品技术的开发利用。MVVM框架实际上就是在原有MVC的基础上进行的深入的研究和优化得到的，其性能却远远高于MVC原有的性能，说明在Web前端的发展中需要更多的创新与借鉴，只有这样才能够更好地促进 Web前端的开发与发展。

[1]孙连山，李云倩. MVVM框架在Web前端的应用研究[J].电脑知识与技术，2016.

[2]肖小岚，刘振宇.基于MVVM模式的Extjs框架在前端界面设计中的应用研究[J].电脑知识与技术，2016.