`

MVVM设计模式

阅读更多


一、背景:与用户界面 (UI) 相关的最大的问题就是大量的凌乱的代码,原因两个:

(1)  用户界面包含负责的逻辑用于维护界面相关对象;

(2)      其次也包含了应用程序状态的维护。

用户界面的3大问题:状态 (State) , 逻辑 (Logic) ,同步 (Synchronization),其中状态是用户界面最关心的问题之一。

二、简述MVC、MVP、MVVM

(1)     MVC:模型-视图-控制器(Model View Controller),它强制性的使应用程序的输入、处理和输出分开。

(2)    MVP:模型-视图-表现类(Model-View-Presenter)

(3)    MVVM:模型-视图-视图模型(Model-View-ViewModel)

三、比较

(1)    发展过程:MVC->MVP->MVVM

(2)    MVC->MVP

MVC中Model不是纯Model,因为它要有View的一些数据结构。

(3)  MVC、MVP->MVVM

 

View没有大量代码逻辑。结合WPF、Silverlight绑定机制,MVP演变出了MVVM,充分利用了WPF、Silverlight的优势,将大量代码逻辑、状态转到ViewModel,可以说MVVM是专门为WPF、Silverlight打造的。

(4)用户界面问题比较

 

 

MVC

MVP

MVVM

 

V

C

V

P

V

VM

状态

 

 

 

逻辑

 

 

 

同步

 

 

 

 

四、MVVM

(1) 组成部分Model、View、ViewModel

(a)  View:UI界面

(b) ViewModel:它是View的抽象,负责View与Model之间信息转换,将View的Command传送到Model;

(c)     Model:数据访问层

 (2)  View与ViewModule连接:

(a)     Binding Data:实现数据的传递

(b)      Command:实现操作的调用

(c)      AttachBehavior:实现控件加载过程中的操作

 

Binding和Command可以写在XAML中。

(3)  优势

(a)     ViewModule易于单元测试;

(b)     View没有MVC、MVP复杂的代码逻辑,让整个开发过程中的UI设计和后台的代码编写完全分开,设计者可以专注于使用Express Blend等去设计页面也就是View,而开发的可以完全通过Model来定义要操作的object,通过ViewModel来定义出来需要对这些model做哪些操作,最后使用Command来把Model和View完全联系到一起。

(4)    不足

(a)     编写Command的任务重;

(b)     由于Silverlight不能引用非Silverlight项目,许多界面层的逻辑也得放到后台(非ViewModel部分),如Command实现,必须通过WCF通信调用服务。

(5)    ICommand

(a)    编写每一个需要绑定的Command

(b)     网上有写好的基于WPF的Command模板,利用Prism特性重用这部分。

(c)     直接利用Prism的DelegateCommand和CompositeCommand类

          DelegateCommand接受Delegate参数

          CompositeCommand可以将多个Command组合在一起。

 

注:Prism 是微软最佳实践,可以简化建设WPF和Silverlight应用。

(6)     Command原理

(7)AttachBehavior

(a) 背景

假设我们有一个Button, 当该Button被点击的时候我们要完成一些操作, 很简单, 将该操作封装成一个Command并绑定到该Button上就可以了, 但如果我们要在Button被Load的时候执行另外一些操作呢?  由于Button没有直接被Load事件所触发的Command, 所以不能使用Command了. 不能直接将Load事件处理器写在Button所在的xaml所对应的CS文件里, 这和我们刚才对MVVM的设计是相矛盾的. 一个不太好的方案是继承一下Button, 并撰写一个由Load所触发的Command, 这可行, 但明显不好. 正如一个控件没有某个属性并且在不继承的情况下而采用AttachProperty一样, 我们可以采用AttachBehavior.    

五、MVVM具体应用

 

(1)     Command工作流程:

主要使用Prism的DelegeCommand、CompositeCommand类与订阅、发布原理。

(a)       ViewModel初始化命令(ICommand)

public DelegateCommand<object> AddAdministorCommand { get; private set; }

this.AddAdministorCommand = new DelegateCommand<object>(this.AddAdministor);

(b)     View UI元素绑定ViewModel Command属性

Command="{Binding Path=AddAdministorCommand}"

(c)     在ViewModel中定义一个事件(event),实现CompositePresentationEvent<object>接口(object-传递参数)。

public class AdministorRequestEvent: CompositePresentationEvent<AdministorViewModel>

{ }

(d)     使用TheAggregator订阅一个事件的执行者(Action)

this.TheAggregator.GetEvent<AdministorRequestEvent>().Subscribe(ShowAdministorVie        w);

        public void ShowAdministorView(AdministorViewModel administorVM)

{

            AdministorView administorV = new AdministorView();

            administorV.ViewDataContext = administorVM;

            administorV.Show();

           }

(e)    使用发布一个事件

private void AddAdministor(object obj)

{

this.TheAggregator.GetEvent<AdministorRequestEvent>().Publish( new AdministorViewModel(Administor.CreateNewAdministor(),_administorRepository));

}

 

分享到:
评论

相关推荐

    wpf mvvm设计模式示例

    **WPF MVVM设计模式详解** MVVM(Model-View-ViewModel)设计模式在Windows Presentation Foundation(WPF)中被广泛使用,它是一种用于构建用户界面的架构模式,旨在提高代码的可测试性和可维护性。这个模式将业务...

    WPF,MVVM设计模式框架

    **WPF与MVVM设计模式框架详解** Windows Presentation Foundation(WPF)是Microsoft推出的一种用于构建桌面应用程序的用户界面框架,它基于.NET Framework,并且专为Windows操作系统设计。WPF提供了一个丰富的图形...

    MVVM设计模式的前端应用.pptx

    MVVM设计模式在前端应用中的应用 MVVM设计模式是一种常用的前端开发模式,它将模型(Model)与视图(View)分离,并通过中间层——视图模型(ViewModel)进行连接,使得前端代码更加模块化和易于维护。本文将详细...

    iOS MVVM设计模式

    **iOS MVVM设计模式** MVVM(Model-View-ViewModel)设计模式在iOS开发中逐渐流行,尤其是在Objective-C和Swift的环境中。它是一种基于MVC(Model-View-Controller)的改进模式,旨在提高代码的可测试性、可维护性...

    mvvm 设计模式的 model

    MVVM(Model-View-ViewModel)设计模式是现代软件开发中的一个重要概念,尤其在iOS应用开发中被广泛应用。它是一种从MVC(Model-View-Controller)模式发展而来的架构模式,旨在提高代码的可测试性、可维护性和组件...

    wpf应用以及mvvm设计模式

    【WPF应用以及MVVM设计模式】是一种针对Windows Presentation Foundation(WPF)开发的专业方法,旨在简化复杂的UI设计。MVVM(Model-View-ViewModel)设计模式是专门为WPF量身定制的一种架构模式,它有效地解决了...

    iOS计算器源码MVVM设计模式.zip

    本项目是一个使用MVVM设计模式实现的iOS计算器应用,提供了完整的源码供学习者参考。 1. MVVM设计模式详解: MVVM模式由三个主要组件组成:Model、View和ViewModel。Model负责数据处理和业务逻辑,View负责显示...

    基于Prism框架的MVVM设计模式的WPF实例代码

    **Prism框架与MVVM设计模式** 在软件开发领域,特别是Windows Presentation Foundation(WPF)应用开发中,Prism框架和MVVM(Model-View-ViewModel)设计模式是两个非常重要的概念。本实例代码旨在展示如何结合两者...

    wpf mvvm设计模式 例子

    本资料主要针对WPF MVVM设计模式,提供学习实例,旨在帮助开发者更好地理解和应用这一模式。 MVVM模式的核心概念包括模型(Model)、视图(View)和视图模型(ViewModel)。以下是对这些概念的详细解释: 1. **...

    WPF 简单MVVM设计模式例子

    **WPF MVVM设计模式详解** MVVM(Model-View-ViewModel)设计模式在Windows Presentation Foundation(WPF)中被广泛使用,它是一种用于构建用户界面的架构模式,旨在提高代码的可测试性和可维护性。这个模式由...

    在wpf中使用MVVM设计模式示例

    在Windows Presentation Foundation(WPF)开发中,MVVM(Model-View-ViewModel)设计模式是一种广泛应用的架构模式,它能够帮助开发者实现清晰的代码...总的来说,WPF中的MVVM设计模式是现代桌面应用开发的强大工具。

    基于谷歌最新AAC架构,MVVM设计模式的一套快速开发库.zip

    【标题】:“基于谷歌最新AAC架构,MVVM设计模式的一套快速开发库.zip”揭示了这一资源的核心内容,即一个采用Google最新的Android Architecture Components (AAC)框架,并结合Model-View-ViewModel (MVVM)设计模式...

    RxSwift MVVM 设计模式结合实践,很值得参考.zip

    在iOS应用开发中,RxSwift和MVVM设计模式的结合是一种流行且强大的方式,它能够帮助开发者构建可测试、可维护、以及响应式的代码。这个名为"RxSwift MVVM 设计模式结合实践,很值得参考.zip"的压缩包提供了一个开源...

    WPF用MVVM设计模式模拟微信PC版,下载可直接运行

    总的来说,这个项目提供了学习和实践WPF和MVVM设计模式的实例,同时也涵盖了与微信API交互、网络通信、数据处理等多个方面。对于想要提升Windows桌面应用开发技能的程序员来说,这是一个极好的学习资源。

    Android项目源码一款MVVM设计模式的Gank.io客户端

    这个项目用了什么?

    iOS 组件化开发项目架构设计,结合 MVVM 设计模式 + RAC 数据绑定 + Pod 组件管理.zip

    本项目以“iOS组件化开发项目架构设计,结合MVVM设计模式+RAC数据绑定+Pod组件管理”为主题,旨在提供一种高效且灵活的开发模式。下面将详细介绍这些关键概念。 1. **组件化开发** - **目标**:组件化的主要目标是...

    使用Swift语言重构的码云iOS客户端,采用MVVM设计模式与POP(面向协议编程),核心框架为RxSwift

    2. **MVVM设计模式**:Model-View-ViewModel (MVVM) 是一种软件架构模式,常用于UI开发,特别是在移动应用中。在这个模式中,Model负责数据处理,View负责显示,ViewModel作为两者之间的桥梁,处理数据转换和视图...

    一个完整的基于Kotlin的Android开发框架,采用MVVM设计模式。包括:1。

    一个完整的基于Kotlin的Android开发框架,采用MVVM设计模式。包括:1。基于改进2封装的Kotlin协程实现的网络框架。2、基于阿里开源路由器修改的API路由器实现

    WPF 使用MVVM设计模式对进行增删改操作

    在IT领域,特别是Windows Presentation Foundation (WPF)的开发中,MVVM(Model-View-ViewModel)设计模式已经成为构建用户界面的主流选择。本主题主要关注如何在WPF项目中运用MVVM模式来实现数据的增删改操作,这...

Global site tag (gtag.js) - Google Analytics