在學(xué)習(xí)Prism中涉及的MVVM之前，我想有必要分別把MVC&MVP,MVVM,Command三種模式進(jìn)行簡單的總結(jié)，這樣可以更好的理解Prism尤其是WPF的設(shè)計(jì)理念。

本文內(nèi)容：

MVVM的來龍去脈
為什么Prism使用MVVM
示例講解

一、MVVM的來龍去脈

在我們開發(fā)具有UI界面的應(yīng)用程序時(shí)，MVC和MVP模式會(huì)被大量的采用，應(yīng)用這些模式可以很容易的開發(fā)各類應(yīng)用程序。隨著WPF的普及，一種基于MVC&MVP模式的變種，MVVM模式被微軟的p&p小組提出。通過頁面，數(shù)據(jù)源，邏輯分離，MVVM使開發(fā)工作更容易分工，程序結(jié)構(gòu)更清晰和易維護(hù)。

　　MVVM全稱Model/View/ViewModel。

Model即數(shù)據(jù)模型，可以是Json,數(shù)據(jù)庫表內(nèi)容，對(duì)象，XML,文本文件，本地儲(chǔ)存內(nèi)容等等等等。

　　View即視圖也是UI，提供給最終用戶交互界面，對(duì)于View來說Model是什么，并不關(guān)心，二者之間不需要聯(lián)系。

ViewModel即視圖模型，負(fù)責(zé)為View所需呈現(xiàn)的數(shù)據(jù)提供數(shù)據(jù)源，為View的交互操作提供業(yè)務(wù)邏輯的支持。

二、為什么Prism使用MVVM

　　輕量級(jí)框架Prism通過應(yīng)用MVVM，使開發(fā)團(tuán)隊(duì)專注于業(yè)務(wù)邏輯的開發(fā)，設(shè)計(jì)團(tuán)隊(duì)專注于為用戶設(shè)計(jì)友好的交互界面，兩個(gè)團(tuán)隊(duì)經(jīng)可能小的涉及交叉設(shè)計(jì)開發(fā)。為了實(shí)現(xiàn)以上功能和發(fā)揮WPF的優(yōu)勢(shì)，Prism使用了多種設(shè)計(jì)模式進(jìn)行功能的擴(kuò)展。如通過Command模式設(shè)計(jì)擴(kuò)展了中繼命令邏輯，提供了AttachBehaiverCommand,DelegateCommand等。Lz以后會(huì)詳細(xì)進(jìn)行說明。

三、示例講解

　　以下是一個(gè)非常Simple的MVVM Demo。場景：一個(gè)相冊(cè)界面

　　1.顯示相冊(cè)列表

2.點(diǎn)擊相冊(cè)列表中某一相冊(cè)

3.跳轉(zhuǎn)事件觸發(fā)

4.跳轉(zhuǎn)至某一相冊(cè)

5.圖片列表加載

　　Demo 設(shè)計(jì)了數(shù)據(jù)類Album,用戶UI AlbumView,視圖模型AlbumViewModel，AlbumViewModel 提供跳轉(zhuǎn)函數(shù)并實(shí)現(xiàn)ICommand接口，AlbumView觸發(fā)Command執(zhí)行AlbumViewModel的跳轉(zhuǎn)函數(shù)。

　　Model:

 1 namespace SimpleMVVMApp.Business.Model {
 2     public class Album : INotifyPropertyChanged {
 3         public event PropertyChangedEventHandler PropertyChanged;
 4 
 5         public string Name {
 6             get {
 7                 return this.name;
 8             }
 9             set {
10                 if (value != this.name) {
11                     this.name = value;
12                     if (this.PropertyChanged != null) {
13                         this.PropertyChanged(this, new PropertyChangedEventArgs("Name"));
14                     }
15                 }
16             }
17         }
18 
19         public string Path { get; set; }
20 
21         public string Border {
22             get {
23                 return this.border;
24             }
25             set {
26                 if (value != this.border) {
27                     this.border = value;
28                     if(this.PropertyChanged != null){
29                         this.PropertyChanged(this,new PropertyChangedEventArgs("Border"));
30                     }
31                 }
32             }
33         }
34 
35         private string name;
36         private string border;
37     }
38 }

　　ViewModel:

 1     public class AlbumViewModel {
 2         public Album Album {
 3             get {
 4                 return this.album;
 5             }
 6         }
 7 
 8         public IEnumerable<string> Borders { get; private set; }
 9 
10         public ICommand RediectCommand { get; private set; }
11 
12         public AlbumViewModel() {
13             this.album = new Album { Name = "MVVM" };
14             this.RediectCommand = new RelayCommand((o) => this.OnRediect(o));
15         }
16 
17         private void OnRediect(object args) {
18             this.album.Name = "Command";
19             //Todo Get Photo List and Rediect to page
20         }
21 
22         private readonly Album album;
23     }

　　View:

 1 <UserControl x:Class="SimpleMVVMApp.View.AblumView"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              xmlns:vm="clr-namespace:SimpleMVVMApp.Business.ViewModel"
 7              mc:Ignorable="d" 
 8              d:DesignHeight="300" d:DesignWidth="300">
 9     <UserControl.DataContext>
10         <vm:AlbumViewModel/>
11     </UserControl.DataContext>
12     <Grid>
13         <Button Command="{Binding RediectCommand}" Content="{Binding Album.Name}"></Button>
14     </Grid>
15 </UserControl>

　　由于良好的顯示效果不是本文的主題,LZ就簡單了用了一個(gè)Button來表示UI，如果需要良好的顯示交互效果，可以通過重寫VisualTemplate或者另寫一個(gè)Visual類來實(shí)現(xiàn)更好的顯示效果。

　　圖1，點(diǎn)擊前效果，圖2，通過Command執(zhí)行函數(shù)后效果：

　　

　　　　　　　　　　　　　　　　　　　　圖1　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　圖2

源代碼下載：https://files.cnblogs.com/tmywu/SimpleMVVMApp.7z

總結(jié)

以上是生活随笔為你收集整理的从Prism中学习设计模式之MVVM 模式(一)简述MVVM的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。