1.2　MVVM风格开发框架

MVVM（Model View ViewModel）是由微软的WPF带来的新技术体验，如Silverlight、音频、视频、3D和动画等，使得软件UI层更加细节化、可定制化。

同时，在技术层面，WPF也带来了更多更加易于使用的新特性和新的软件设计模式。

MVVM框架是MVP（Model View Presenter）模式与WPF结合演变而来的一种新型架构框架，它立足于原有MVP框架并且融入了WPF的新特性，以应对客户日益复杂的需求变化。

1.2.1　为什么会出现MVVM

MVVM具体的设计功能如图1-3所示。它不只是简单的MVC分层模式，而是将View端的显示和逻辑分离出来，这种数据绑定技术非常简单实用，所以称为Model View ViewModel（MVVM）。

MVVM模式跟经典的MVP（Model View Presenter）模式很相似，需要一个为View量身定制的Model，这个Model就是ViewModel。ViewModel中包含了一个项目文件使用的UI组件的接口和相关属性，可以通过一个相关的视图绑定其属性，并可获得二者之间的相同部分和不同部分。

所以这个时候需要在ViewModel中直接对显示的视图进行代码更新，但不仅仅是对显示视图的更新。数据绑定系统还提供了标准化的方式对视图中显示的内容进行验证。

视图（View）通常就是一个页面。在以前设计模式中由于没有清晰的职责划分，UI层经常成为逻辑层的全能代理，而后者实际上属于应用程序的其他层。MVP里的M其实和MVC里的M都是指封装了核心数据和逻辑功能的模型；V表示视图；P表示封装了视图中的所有操作和响应用户的输入、输出和事件等。P与MVC里的C代表的意义差不多，区别是MVC是系统级架构的，而MVP是用在某个特定页面上。也就是说，MVP的灵活性要远远大于MVC，实现起来也极为简单。

相信MVC模式读者已经非常熟悉了，这里就不再赘述，这些模式也是依次进化而形成MVC→MVP→MVVM的。

1.2.2　MVVM架构的最佳实践

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有下面几大优点。

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

·各种代码写成控件之后可重用。可以把一些视图逻辑放在一个ViewModel里面成为多重可以组合的控件，在具体的页面中进行整合和使用，让更多View重用这段视图逻辑。

·可以交由前端工程师独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，通过相应的接口规范可以简单地进行整合。

·便于测试和部署。界面向来是比较难于测试的，而现在测试可以针对具体的页面控件来写，也可以在不依赖于后端的基础上，直接通过工具或者假数据进行测试。

1.2.3　MVC、MVP和MVVM开发模式对比

MVC、MVP和MVVM这些模式是为了解决开发过程中的实际问题而提出来的，它们目前作为主流的几种架构模式而被广泛使用。

1.MVC（Model View Controller）模式

MVC是比较直观的架构模式，即用户操作→View（负责接收用户的输入操作）→Controller（业务逻辑处理）→Model（数据持久化）→View（将结果反馈给View）。

MVC使用非常广泛，比如JavaEE中的SSH框架（Struts+Spring+Hibernate）、ASP.NET中的ASP.NET MVC框架。如图1-4所示为代表经典的MVC模式。

2.MVP（Model View Presenter）模式

MVP是把MVC中的Controller换成了Presenter（呈现），目的就是为了完全切断View跟Model之间的联系，由Presenter充当桥梁，做到View-Model之间通信的完全隔离。

例如，.NET程序员熟知的ASP.NET中的Web Forms（WF）技术即支持MVP模式，因为事件驱动的开发技术使用的就是MVP模式。控件组成的页面充当View，实体数据库操作充当Model，而View和Model之间的控件数据绑定操作则属于Presenter。控件事件的处理可以通过自定义的iView接口实现，而View和iView都将对Presenter负责。如图1-5所示为经典的MVP模式。

3.MVVM（Model View ViewModel）模式

如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。MVVM是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，而是通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。

这方面典型的应用有.NET的WPF，以及JavaScript框架Knockout和AngularJS，还有本书介绍的Vue.js等。如图1-6所示为经典的MVVM模式。