MVVM可视化编程综述

刘晶美 聂广俊

摘要：随着计算机技术的高速发展以及信息化业务的需求越来越复杂，可视化数据的量和复杂度呈现爆炸式的增长，信息化公司以及用户对可视化的要求也越来越高，前端语言的模块化、组件化、高性能化变的尤为重要，为了达到这种高标准的要求，亟需一种新的可视化开发思路、思想，本文在此探究MVVM模式下可视化编程思路。

关键词：信息化;可视化;MVVM

中图分类号：TP311.56文献标识码：A文章编号：1672-9129（2020）14-0044-02

1概述

上世纪90年代，蒂姆·伯纳斯·李（Tim Berners-Lee）在欧洲粒子物理实验室里开发出了世界上第一个网页浏览器，从此互联网时代来临，可视化技术也随之不断发展。在长达近40年的互联网时代，数据可视化从简单的文字、图片，发展到现在丰富多样的信息时代。

在信息多元化的时代，原有的可视化开发模式已经不能满足现在的数据量、数据格式以及多元展示的需求，需要另一种开发模式来解决这个问题，MVVM模式就应运而生。

2MVVM历史

MVVM并不是一种全新的开发模式，而是在MVC模式上做了改进。MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

说起MVC，就必须拿斯坦福大学公开课上的这幅图来说明，见图1。

M是指model，是应用程序中处理数据逻辑的一部分，通常用来模型对象对数据库的存存取等操作;

V是指view，是视图部分，通常指对用户展示的一部分;

C是指controller，是控制层通常用来处理业务逻辑，主要负责从视图读取数据，并向模型发送数据。

这种模式将可视化进行分层解耦，三个层各司其职，更利于对可视化研发工作进行分工。但是开发者在开发过程中大量调用相同的DOM，且需要主动更新到view或将变化的数据同步到model中，处理繁琐，且大量的DOM操作使页面渲染性能降低，影响用户体验。

MVVM旨在利用WPF中的数据绑定函数，通过从视图层中几乎删掉所有GUI代码（代码隐藏），更好地促进视图层开发与模式其余部分的分离。不需要用户体验（UX）开发人员编写GUI代码，他们可以使用框架标记语言（如XAML），并创建到应用程序开发人员编写和维护的视图模型的数据绑定。角色的分离使得交互设计师可以专注于用户体验需求，而不是对业务逻辑进行编程。这样，应用程序的层次可以在多个工作流中进行开发以提高生产力。即使一个开发人员在整个代码库上工作，视图与模型的适当分离也会更加高效，因为基于最终用户反馈，用户界面通常在开发周期中经常发生变化，而且处于开发周期后期。

2.1 Mvvm的演变。随着用户交互的软件设计应运而生了很多出名的设计模式。你在屏幕前看到的就是View，它显示出来的数据就是Model（模型），Presenter（展示器）将两者连接起来。View依赖于Presenter实现对Model的数据的填充、对用户输入做出反应、提供输入验证（可能通过委托发送给模型）以及其他类似的任务。

回到2004年，Martin Fowler发表了一篇关于名为PM（Presentation Model）模式的文章。PM模式将View从行为和状态中分离开，类似于MVP模式。PM模式中有趣的地方是创建了一个名为Presentation Model的抽象的View。View也就变成了Presentation Model的渲染。在Fowler的解释中，他说明了Presentation Model需要频繁的更新View， 这样能够保证两者之间的同步性。同步的逻辑代码编写在于Presentation Model类中。

在2005年，John Gossman（现在是微软公司的一名WPF和Silverlight架构师）将MVVM模式公布在他的博客中。MVVM等价于Fowler提出的Presentation Model，兩个模式的特性都是有一个包含View状态和行为的抽象。Fowler介绍Presentation Model作为一个创建UI平台独立的抽象的View，然而Gossman介绍MVVM作为一个简化用户操作界面的核心功能的标准化方式。从这方面考虑，MVVM是一个为WPF和Silverlight平台特殊定制的更常规的PM模式。

与MVP中的Presenter不同，VM不需要实现对View的引用。View将属性绑定到VM中，反向的，VM暴露的属性包含在Model对象和View中特殊的状态。View和VM之间的绑定的构建非常简单只需将VM对象被作为View的上下文（DataContext）来设置。如果VM中的属性值发生改变，新的值会通过绑定自动传送到View。当用户点击View中的按钮，VM中的命令将执行相应的请求。无论是VM还是View，他们执行Model数据的所有变更。

View类不知道Model类的存在，同时VM和Model对View也一无所知。事实上，Model显然知道VM和View的存在。这是一个非常低耦合的设计，接下来你会看到这其中的好处。

2.2 Mvvm的优点。MVVM模式主要目的是分离视图（View）和模型（Model），有几大优点：

（1）低耦合。视图（View）可以独立于Model变化和修改，一个VM可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

（2）可重用性。你可以把一些视图逻辑放在一个VM里面，让很多view重用这段视图逻辑。

（3）独立开发。开发人员可以专注于业务逻辑和数据的开发（VM），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。

（4）可测试。界面素来是比较难于测试的，测试可以针对VM来写。

2.3 MVVM要掌握以下板块，并将其整合，如图2所示：

（1）模板编译（Compile）

（2）数据劫持（Observer）

（3）发布的订阅（Dep）

（4）觀察者（Watcher）

3Model、View、ViewModel在可视化编程中的分工

3.1 Model（视图）：视图负责界面以及显示。它通过DataContext（数据上下文）和VM进行数据绑定，不直接与Model进行交互。

视图的责任就是定义用户在屏幕上能看到的所有结构和外观。理想的视图背后的代码只包含调用 InitializeComponent 方法的构造函数。视图一般扮演以下关键角色：

（1）视图属于可视化元素，例如弹框，页面，用户控件以及数据模版等;

（2）视图定义了包含在视图里的控件和可视化层以及样式;

（3）视图通过DataContext属性应用视图模型进行了控件的绑定并使数据的属性和命令被视图模型暴露出来;

（4）视图能够定制化视图和视图模型之间的数据绑定行为;

（5）视图能够定义以及处理 UI 可视化行为，例如动画;

（6）视图背后的代码用 XAML 实现了很难表达的可视化行为。

在视图与视图模型间可通过绑定Behavior/Comand来进行对VM的方法的调用，Command是View到VM的单向通行，绑定的实现也是运用了实现Silverlight提供的IComand接口，让View触发事件，VM来处理事件，进行解决事件绑定功能。

3.2 View（视图模型）。视图模型在 MVVM模式中为视图封装了展示的逻辑，它并不是直接引用视图或者任何其他关于视图特定的实现或者类型，而是实现了属性以及命令使得视图进行数据绑定，并通过改变事件来提醒视图状态已经发生改变了。

很典型的，视图模型会定义能被展现在 UI上并被用户调用的命令或者行为。一个通用的例子就是当视图模型需要提交命令时会允许用户提交数据到网络服务或者数据库。视图可以选择用一个按钮来展示所以用户能够点击该按钮提交数据。典型地，当命令编程不可用的，它相关的UI 展示也变得不可用。视图模型通常扮演下面这些关键角色：

（1）模型视图是非可视化类，它封装了展现逻辑;

（2）视图模型是可以独立于视图与模型调试的;

（3）视图模型很典型地是不直接引用视图的;

（4）视图模型实现了视图用来数据绑定的属性与命令;

（5）视图模型通过改变提醒事件通知视图状态的改变：INotifyPropertyChanged 与 INotifyCollectionChanged;

（6）视图模型协调视图与模型的交互;

（7）视图模型可以定义视图展现给用户的逻辑状态;

（8）视图模型是View和Model的桥梁，是对Model的抽象，比如：Model中数据格式是“年月日”，可以在VM中转换Model的数据为“日月年”供View显示。

3.3 ViewModel（模型）。model 在 MVVM 模式中同样也封装了业务逻辑以及数据，业务逻辑定义了所有类似检索和程序数据管理相关的程序逻辑一样，用来保证所有的保证数据能够持久的、有效的被业务规则应用。实现最大化的代码重用，模型不能够包含特定的情况，特定的用户任务以及特定的程序逻辑。

模型为程序展现了客户端域模型，也可能包含支持数据访问与缓存的代码，即使只有一个分离的数据库或服务被使用。

模型通常扮演以下的关键角色：

（1）模型类是不可视类，它封装了程序数据;

（2）模型类不能直接应用视图或视图模型类;

（3）模型类不依赖于它们是如何实现的;

（4）模型类是通过 INotifyPropertyChanged/INotifyCollectionChanged 接口提供属性与集合更改事件的.

（5）模型类很典型地继承自 ObservableCollection 类;

（6）模型类是很典型地通过 IDataErrorInfo/INotifyDataErrorInfo.提供数据验证与错误报告;

（7）模型类典型地与封装了数据访问的服务一起使用。

Model具有对数据直接访问的权利，例如对数据库的访问，Model不依赖于View和VM，也就是说，模型不关心会被如何显示或是如何被操作，模型也不能包含任何用户使用的与界面相关的逻辑。Model在实际开发中根据实际情况可以进行细分。

4总结

经过整体的分析测试，基于MVVM的复杂数据可视化开发，会使数据更加的直观，MVVM框架的应用也会使系统设计流程更加规范，通过Model、View、View Model 之间的交互实现了界面设计与后台逻辑代码的分离，封装了对象与数据库之间的交互，建立了一个利于维护，便于测试，有良好扩展性的应用系统。

参考文献：

[1]易剑波.基于MVVM模式的WEB前端框架的研究[J].信息与电脑（理论版） 2016（19）： 76-77+84.

[2]王婵娟. 浅谈WPF架构及其应用[J]. 科技信息， 2011（21）：114-115，128.

[3]黄建岗. 浅谈WPF设计模式[J]. 中小企业管理与科技，2009（28）：286

[4]Doray A， The MVC Design PatternBeginning Apache Struts[J]. 2006：37-51.

[5]MVPEncyclopedic Dictionary of Polymers[J]. 2007：639

[6]Freeman A，Sanderson S，Freeman A， et al. Your First MVC ApplicationPro ASP.NET MVC 3 Framework[J]. 2011：31-61.

[7]Anderson C. The Model-View-ViewModel（MVVM） Design PatternPro Business Applications with Silverlight 4[J].2010：373-402.

[8]WPF/MVVM Quick Start Tutorial -CodeProject[EB/OL].[2012/4/27].

[9]http：//www.codeproiect.com/Artics/165368/WPF-MVVM-Quick-Start-Tutorial.

[10]Jarnjak F.Flexible GUI in Robotics Applications Using Windows Presentation Foundation Framework and Model View ViewModel Pattern：International Conference on New Trends in Information Science and Service Science （NISS 2010）， Gyeongju，South Korea，2010[C].

[11]刘连喜，徐惠民. MFC框架技术探索[J]. 吉林建筑工程学院学报，2009，26（4）：82-84.

[12]李应保. WPF专业编程指南[M]. 北京：北京电子工业出版社， 2010.