MVVM 模式介绍
模型-视图-视图模型 (MVVM) 是一种用来分离 UI 和非 UI 代码的应用设计模式
MVVM – 模型（Model）
MVVM 中的 Model 与 MVC 中的一致，用于封装业务逻辑以及数据处理。
Model 不依赖 View 和 ViewModel，可以独立存在，也就是说模型不关心自身被谁操作和展示。
Model 中不允许有任何跟界面相关的逻辑，比如操作界面上的控件。
通常在实际开发过程中 Model 可以再被划分成 Model 和 Service，区分业务和数据。
MVVM – 视图（View）
视图仅仅负责界面展示。
通过 DataContext（数据上下文）进行数据绑定。
不允许直接与 Model 交互。
可以通过绑定 Comand 来调用 ViewModel 的行为。
Command 是 View 到 ViewModel 的单向通行。
用户在 View 中触发事件，在 ViewModel 中处理。
MVVM – 视图模型（ViewModel）
ViewModel 是对 View 的抽象
视图模型包括界面模型数据和 Command 事件响应。
是 View 和 Model 的桥梁，是对 Model 的包装和抽象。
实现视图模型需要让类型实现 INotifyPropertyChanged 接口，用于实现属性和集合的变更通知，使用户在 View 上所做的操作可以实时通知到视图模型。
MVVM - Demo
利用 MVVM 实现一个计算器；
要求界面和业务逻辑完全剥离；
比如我们可以更改界面展示形式，功能仍然相同；
第一步：先对页面进行抽象（建模）
第二步：让视图模型实现INotifyPropertyChanged接口
第三步：后台代码中声明一个视图模型属性交给当前数据上下文
第四步：前台数据绑定
第五步：定义Command命令
<Page
x:Class="MyJiSuanQi.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyJiSuanQi"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
DataContext="{Binding ViewModel,RelativeSource={RelativeSource Mode=Self}}"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel>
<Slider
Header="参数1"
Value="{Binding Parameter1,Mode=TwoWay}"/>
<!--<TextBox
x:Name="txtP1"
Header="参数1"
Text="{Binding Parameter1,Mode=TwoWay}"/>-->
<TextBox
x:Name="txtP2"
Header="参数2"
Text="{Binding Parameter2,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
<AppBarButton
x:Name="btnAdd"
Icon="Italic"
Label="Except"
Command="{Binding ExceptCommand}"
CommandParameter="{Binding}"/>
<TextBox
x:Name="txtResult"
Header="结果"
Text="{Binding Result,Mode=OneWay}"/>
</StackPanel>
</Page>
namespace MyJiSuanQi
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class MainPage : Page
{
public MainPageViewModel ViewModel { get; set; }
public MainPage()
{
ViewModel = new MainPageViewModel();
this.InitializeComponent(); this.NavigationCacheMode = NavigationCacheMode.Required;
} /// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。
/// 此参数通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
// TODO: 准备此处显示的页面。 // TODO: 如果您的应用程序包含多个页面，请确保
// 通过注册以下事件来处理硬件“后退”按钮:
// Windows.Phone.UI.Input.HardwareButtons.BackPressed 事件。
// 如果使用由某些模板提供的 NavigationHelper，
// 则系统会为您处理该事件。
}
//第一步：先对页面进行抽象（建模）
//第二步：让视图模型实现INotifyPropertyChanged接口
//第三步：后台代码中声明一个视图模型属性交给当前数据上下文
//第四步：前台数据绑定
//第五步：定义Command命令
private void btnAdd_Click(object sender, RoutedEventArgs e)
{
//var d1 = double.Parse(txtP1.Text);
//var d2 = double.Parse(txtP2.Text);
//txtResult.Text = (d1 + d2).ToString();
ViewModel.Result = ViewModel.Parameter1 + ViewModel.Parameter2;
}
}
public class MainPageViewModel : INotifyPropertyChanged
{
public MainPageViewModel()
{
AddCommand = new AddCommand();
ExceptCommand = new ExceptCommand();
}
public double Parameter1 { get; set; }
private double parameter2;
//影响当前命令是否可以被执行的依据
public double Parameter2
{
get { return parameter2; }
set
{
if (parameter2 == value)
{
return;
}
parameter2 = value;
//通知命令对象重新判断是否可以执行
ExceptCommand.OnCanExecuteChanged();
}
}
//public double Result { get; set; }
private double result;
public double Result
{
get { return result; }
set { result = value; OnPropertyChanged("Result"); }
}
public ICommand AddCommand { get; set; }
public ExceptCommand ExceptCommand { get; set; }
private void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
//命令对象必须实现ICommand接口
public class AddCommand : ICommand
{
//判断当前命令对象是否可以被执行
public bool CanExecute(object parameter)
{
throw new NotImplementedException();
} public event EventHandler CanExecuteChanged;
//如何执行
public void Execute(object parameter)
{
var model = parameter as MainPageViewModel;
model.Result = model.Parameter1 + model.Parameter2;
}
}
//命令对象必须实现ICommand接口
public class ExceptCommand : ICommand
{
//判断当前命令对象是否可以被执行
public bool CanExecute(object parameter)
{
var model = parameter as MainPageViewModel;
return model != null && model.Parameter2 != ;
}
//当CanExecute判断依据发生变化时，触发事件
public event EventHandler CanExecuteChanged;
public void OnCanExecuteChanged()
{
if (CanExecuteChanged != null)
CanExecuteChanged(this, EventArgs.Empty);
}
//如何执行
public void Execute(object parameter)
{
var model = parameter as MainPageViewModel;
model.Result = model.Parameter1 / model.Parameter2;
}
}
}
MVVM 模式优点
低耦合：View 可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
可重用性：可以把一些视图的逻辑放在 ViewModel 里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注与业务逻辑和数据的开发（ViewModel）。设计人员可以专注于界面（View）的设计。
可测试性：可以针对ViewModel来对界面（View）进行测试。