javascript_使用MVVM模式(1)：MVVM…

MVVM模式是Model、View、ViewModel的简称，最早出现在WPF，现在Silverlight中也使用该模式，MVVM模式是对MVC模式的变种。哪儿变了？我认为MVVM和MVC的主要变化在于MVVM更适合于XAML。

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处

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

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

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

4. 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

 

如果用Interface接口来表达，基本就是这么个意思：

1publicinterfaceIView
2{
3IViewModel ViewModel{ get;set;}
4}
5
6 publicinterfaceIViewModel
7{
8IModel Model {get;set;}
9
10///
11///aproperty that states the controller is busy doing something (likefetching data from a service),
12///usually theiterface should be blocked
13///
14 boolIsBusy {get;}
15}

MVVM的Model、View、ViewModel分工

1. View

• 负责界面和显示，界面构成元素有window, controls,page, dataTemplete, custom controls….
• 代码通常有XAML和XAML.CS组成，但后台代码应该很少
• 通过DataContext和ViewModel绑定
• 不直接和Model交互！
• 控件可以和ViewModel的公共属性绑定，update需要双向绑定
• 控件可以触发Behavior/Command调用ViewModel的方法，Command是View到ViewModel的单向通讯(View中触发事件，ViewModel中处理事件)

2. ViewModel

• 主要包括界面逻辑和模型数据封装，Behavior/Command事件响应，绑定的属性定义等
• ViewModel继承Model类，或者是Model的继承类
• 是view和model的桥梁，是对Model的抽象，例如，model中数据格式是“年月日”，可以在viewModel中转换model中的数据为“日月年”以供视图（view）显示。
• 维护视图状态
• 实现属性或集合的change notification
• 

3. Model

• 数据和业务逻辑
• 客户端领域模型
• 由data entities, business objects,repositories and services构成
• 可以实现属性或集合的change notification
• 可以实现validation 接口例如IDataErrorInfo

View和ViewModel主要通过数据绑定和Command/Behavior进行交互，如下图所示：

一个例子并且附代码下载(Command未示例)

有关Model（模型）和DTO的问题

前面说的Model是客户端的，但实际上Domail Model存在服务器端（靠近数据库）和那就需要和客户端搞映射DTO（DataTransferOjbect，数据传输对象，带序列化标记，用来远程调用）。在Silverlight中有个很方便的东西来实现这个DTO过程和序列化，那就是WCFRIA Service和DomainService。如果你创建一个简单的Silverlight应用并且调用WCF RIAService，基本上会生成DTOModel: ObjectContext(EntityObject)。（也有人喜欢在Model里面调用RiaSerivce实现load，save等等，个人认为不太合适，可以参考这篇文章），此外，参考这篇文章：《WCF RIA Services and a guide touse DTO/”Presentation Model”》

代码例：

publicpartialclassMyModelsEntities :ObjectContext
{

…

}

[EdmEntityTypeAttribute(NamespaceName="MyModels",Name="MyEntity")]
[Serializable()]
[DataContractAttribute(IsReference=true)]
publicpartialclassMyEntity:EntityObject
{

…

}

MVVM的实践要点

1. View分离要彻底，不要有坏味道

视图（view）部分，xaml.cs应该只有很少的代码或没有代码，如果你的xaml.cs包含大量的代码，那么很可能你MVVM用的不对头，需要检查其中代码的坏味道。Xaml和xaml.cs只能包含处理界面、视图、显示样式、视图元素之间的交互、视图元素动画，等等的内容。

2. ViewModel要可测试

从重构的观点看，如果你的代码中ViewModel是可测试的，有详细的单元测试UnitTest，你的代码是OK的，否则需要检查其中的坏味道。

更多MVVM的内容且看下回分解。（附：本例子且附代码下载(Command未示例)，channel9有一个MVVM的视频很好，PPT和视频演示的源码）