MVVM - 爱奇艺UWP客户端应用与实践

最新推荐文章于 2020-12-18 21:59:34 发布
最新推荐文章于 2020-12-18 21:59:34 发布
阅读量442 收藏 1
点赞数 2
分类专栏： 基础架构 文章标签： MVVM 设计模式 UWP WPF .Net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40582941/article/details/99299600
版权
我们在开发爱奇艺UWP客户端的过程中广泛的使用了MVVM模式，下面简单的介绍一下MVVM模式。

MVVM模式定义

MVVM包括三个核心模块：Model，View，View-Model
在这里插入图片描述

Model

  • Model是要处理的实际数据。

  • 但不包括处理这些数据的操作或服务。

  • 也不是用来把数据转换成某种格式来方便UI显示的。数据转换可以在ViewModel中处理，也可以定义Converter对数据进行转换。

  • 业务逻辑通常独立于Model，封装成其他类来操作Model。

  • Model是易于复用的，Model可以在多个ViewModel中使用。

  • 要保持Model的干净是具有挑战的。

例如：

  • 业务逻辑对象，如User。

  • 数据交换对象。

  • CLR元子对象，int, long, string。

  • 自动产生的实体或代理对象，例如与数据库表对应的实体类，用来解析JSON或XML等数据的实体类。

View-Model

  • View和Model的中间层，通常称为View’s Model

  • 给View提供ICommand属性。

  • 提供其他属性管理View的状态，如Button是否可见(Visibility)状态。

  • 调用其他服务获取或操作Model。

  • 聚合一个或多个Model，通过Property的方式提供给View使用。

  • 实现INotifyPropertyChanged，以满足UI绑定更新的需要。

  • 对于集合，使用ObservableCollection等

View

  • 包含主题，样式，UI布局，控件，数据绑定，事件，已经其他与用户之间的交互。
  • 避免过多的逻辑代码，这些代码尽量放入ViewModel
  • 通常View是用XAML来定义，有时可以使用少量代码。
  • 通过数据绑定或者方法调用从View Model中获取数据。
  • UI控件上的Command属性可以绑定到View Model的ICommand属性上。
  • 可以通过绑定到ViewModel的属性上对UI控件的状态进行控制。

View和View-Model的关系

  • View和View Model通过数据绑定，方法调用，属性，事件等进行关联。
  • View Model导出Model给View，也需要定义View需要的其他状态信息，如IsAllowLogin。
  • View需要管理UI Events。
  • ViewModel中的Model和属性通过双向绑定进行数据更新。

ViewModel和Model的关系

  • View Model导出Model，或者通过属性提供给View进行绑定。
  • View Model包括服务接口，配置数据接口等，以便获取View所需要的数据。

MVVM的好处

  • 开发和设计可以分开独立工作，设计师可以通过模拟数据对UI进行调试。
  • View Model和Model可以对立于View的代码进行单元测试。
  • 可以重新设计UI并重用View Model和Model的代码。
  • View Model做为View和Model之间的适配器，可以避免View的变更而需要对Model做出修改。

MVVM的性能问题

  • 避免过多的中间过渡数据，这些数据会导致过多的GC，从而影响性能。
  • 数据绑定问题，数据绑定会需要额外的动态内存分配，导致UI性能降低。使用{x:Bind}来替代Binding改善UI性能。
  • 通常把Button.Click绑定到View Model的Icommand属性上，这样会造成额外的开销。建议在后台代码使用Click Event，在事件中调用View Model的方法。
  • UI中经常把一些不展示给用户的部分的Visibility属性绑定到View Model的属性上来控制这部分UI的可见性。推荐使用x:Load或者x:DeferLoadStrategy来延迟这部分UI的加载。

Sample

下面写一个简单例子：

  • Model
   public class LoginModel : INotifyPropertyChanged
   {
   	public event PropertyChangedEventHandler PropertyChanged;
   	private void OnPropertyChanged(string name)
   	{
   		if (PropertyChanged != null)
              	 PropertyChanged(this, new PropertyChangedEventArgs(name));
   	}
   
   	private string userName = "Tester";
   	public string UserName
           {
               get { return userName; }
               set
               {
                   userName = value;
                   OnPropertyChanged(nameof(UserName));
               }
           }

   	private string password = string.Empty;
   	public string Passowrd
           {
               get { return password; }
               set
               {
                   password = value;
                   OnPropertyChanged(nameof(Passowrd));
               }
           }
   }


- **ViewModel**
   -  在ViewModel中添加LoginModel的实例。
   -  在ViewModel中添加LoginCommand属性。

```java
public class LoginViewModel : INotifyPropertyChanged
{
   public event PropertyChangedEventHandler PropertyChanged;
   
   private LoginModel loginModel = new LoginModel();
   
   private ICommand loginCommand;
   public ICommand LoginCommand
       {
           get { return loginCommand; }
       }
       
       public LoginViewModel()
       {
           loginCommand = new LoginCommand(loginModel);
       }
       
       private void OnPropertyChanged(string name)
       {
           if (PropertyChanged != null)
               PropertyChanged(this, new PropertyChangedEventArgs(name));
       }
}
  • Command
    • 把LoginModel传入LoginCommand，通过判断LoginModel的UserName和Password判断LoginCommand是否可执行。
public class LoginCommand : ICommand
{
	public event EventHandler CanExecuteChanged;
	private LoginModel model;
	
	public LoginCommand(LoginModel model)
        {
            this.model = model;
            this.model.PropertyChanged += Model_PropertyChanged;
        }
        
        private void Model_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == nameof(model.UserName) ||
                e.PropertyName == nameof(model.Passowrd))
                CanExecuteChanged?.Invoke(this, EventArgs.Empty);
        }
        
        public bool CanExecute(object parameter)
        {
            return !string.IsNullOrEmpty(this.model.UserName) &&
                !string.IsNullOrEmpty(this.model.Passowrd);
        }
        
        public async void Execute(object parameter)
        {
            MessageDialog dlg = new MessageDialog($"Login with Name:{this.model.UserName} Password:{this.model.Passowrd}", "Login");
            await dlg.ShowAsync();
        }
}
  • View.xaml
    • 通过Data Binding，把用户名和密码的数据绑定到LoginModel的UserName和Password属性上。
    • Button的Command绑定到LoginViewModel的LoginCommand属性上
<Page
    x:Class="ArchitectureTutorial.MVVM.LoginPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ArchitectureTutorial.MVVM"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Margin="24"
          HorizontalAlignment="Center"
          VerticalAlignment="Center">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Text="登录"
                   Grid.ColumnSpan="2"
                   HorizontalAlignment="Center"
                   Margin="12"
                   FontSize="18" />
        <TextBlock Text="登录"
                   Grid.ColumnSpan="2"
                   HorizontalAlignment="Center"
                   Margin="12"
                   FontSize="18" />
        <TextBlock Text="密码"
                   Margin="6"
                   HorizontalAlignment="Right"
                   Grid.Row="2" />
        <PasswordBox Grid.Row="2"
                     Password="{x:Bind viewModel.LoginModel.Passowrd, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                     Margin="6"
                     Grid.Column="1"
                     Width="200" />
        <Button x:Name="loginButton"
                Grid.Row="3"
                Grid.ColumnSpan="2"
                HorizontalAlignment="Center"
                Margin="12"
                Width="120"
                Height="32"
                Command="{x:Bind viewModel.LoginCommand}"
                CommandParameter="{x:Bind viewModel.LoginModel}"
                Content="登录" />    
    </Grid>
</Page>
  • View.cs
    • 定义LoginViewModel的实例。
public sealed partial class LoginPage : Page
{
	private LoginViewModel viewModel = new LoginViewModel();
	public LoginPage()
        {
            this.InitializeComponent();
        }
}

单元测试

  • 创建添加UnitTest工程
  • 每次对代码逻辑进行修改，都可以运行测试用例，检查逻辑是否有错
public void TestLogin()
{
	LoginViewModel viewModel = new LoginViewModel();
        viewModel.LoginModel.UserName = "Test";
        viewModel.LoginModel.Passowrd = "123";
        Assert.IsTrue(viewModel.LoginCommand.CanExecute(null));
        viewModel.LoginCommand.Execute(null);
}

参考文献

爱奇艺Win10专业版客户端

  • 界面操作简捷，完美支持触屏设备，完美适配各种屏幕
  • 无弹窗，无后台进程
  • 支持杜比音效，杜比视界，带来更佳观影体验
  • 打开微软删掉商店搜索“爱奇艺”在这里插入图片描述
Jeffery_80
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
UWPDemo(一)创建一个简单MVVM模式的UWP应用
define_LIN的博客
05-26 1438
创建一个UWP应用 新建文档 由于我们要采用MVVM的模式所有添加如图文件夹： 其中 Model 层 Model 层，对应数据层的域模型，它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里，它主要用于抽象出 ViewModel 中视图的 Model。 View 层 View 层，作为视图模板存在，...
win10 uwp MVVM入门
weixin_30448603的博客
03-29 364
MVVM 是一个强大的架构，基本从 WPF 开始，wr（我说的就是微软）就提倡使用 MVVM。它可以将界面和后台分离，让开发人员可以不关心界面是怎样，全心投入到后台代码编写中。 然后在编写完后台代码后，可以快速和界面设计师做出来的界面绑定到一起，即使频繁修改界面也几乎不需要去修改后台代码。 更让人喜欢的是，他可以让我们简单地进行单元测试，因为我们可以不打开界面进行测试功能，方便了我...
win10 uwp MVVM 轻量框架
lindexi
09-25 5319
如果在开发过程，遇到多个页面之间，需要传输信息，那么可能遇到设计的问题。如果因为一个页面内包含多个子页面和多个子页面之间的通信问题找不到一个好的解决方法，那么请看本文。如果因为ViewModel代码越来越多烦恼，请试试本文提供的框架。
win10 uwp 轻量级 MVVM 框架入门 2.1.5.3199 例子
06-16
一个好的框架是不需要写教程大家看到就会用，但是本金鱼没有那么好的技术，所以需要写很长的博客告诉大家如何使用我的框架 这是框架的使用例子
在UWP中实现自己的MVVM设计模式
weixin_30456039的博客
09-15 149
其实写这篇博文的时候我是拒绝的，因为这牵扯到一个高大上的东西——"框架"。一说起这个东西，很多朋友就感觉有点蒙了，尤其是编程新手。因为它不像在代码里面定义一个变量那么显而易见，它是需要在你的整个程序架构上体现出来的，并且对于框架来说，并没有什么固定的代码格式，你可以这样写，当然也可以那样写。只要最终可以达到同样的效果，各个模块之间能够体现这种框架的思想就OK。所以当你都是用MVVM框得到两份架写的...
UWP-MVVM-Toolkit-Sample:演示在UWP应用中使用Windows社区MVVM工具包
05-06
UWP MVVM工具包样本 ... 演示在UWP应用中使用Windows社区MVVM工具包。 可观察的 RelayCommand和AsyncRelayCommand ObservableValidator 信使和可观察的收件人 带令牌的信使 IOC整合 屏幕截图（背景图片）：
mvvm-jetpack-sample:mvvm-jetpack-sample
04-22
mvvm kotlin koin jetpack(livedata、viewmodel、lifecycle、viewbinding、...) buildsrc coroutines liveeventbus ... APK下载体验 如何检查依赖库的版本更新 在项目的根目录下执行以下命令。 ./gradlew ...
wpf-mvvm-DeskTop-Sample-master_C#_WPF_wpf客户端zfs_
09-30
标题中的“wpf-mvvm-DeskTop-Sample-master”表明这是一个关于WPF（Windows Presentation Foundation）桌面应用程序的示例项目，使用了MVVM（Model-View-ViewModel）设计模式。这个项目是用C#编程语言编写的，面向的...
Minimal-UWP-MVVM-CRUD:带有数据服务CRUD的最小MVVM UWP应用
05-10
在数据服务上实现CRUD的最小MVVM UWP应用随着Win 10和Universal Windows应用程序的引入，我想尝试一些新的XAML功能，例如使用x：Bind进行编译时绑定。 首先，我环顾了一个非常简单的通用Windows平台（UWP）示例，该...
MvvmCross最流行的.net mvvm框架，支持安卓、ios、UWP、wpf，已修改为.net standed类库,支持最新的VS2017
05-12
原版为PCL类库，不支持最新的VS2017 我的博客http://blog.csdn.net/loongsking/article/details/71717301
SimpleMVVM:简单的Microsoft MVVM工具包示例
03-12
简单的Microsoft MVVM工具包示例 使用Microsoft的MVVM Toolkit的POC最小但可行的MVVM应用程序。 描述： 该项目包含的功能可以弥补Microsoft MVVM Toolkit的某些局限性。 该演示应用程序既简单又易于消化，但又足以代表现实世界中的MVVM使用情况。 在评估MVVM Toolkit使用情况的辅助方法之外，该项目还尝试以最小化差异的方式在WinUI 3和UWP之间共享代码。 如果您看到合并方面有待改进的地方，请添加一个问题。 学分 MVVM和Toolkit想法： : : 屏幕截图 笔记 有什么限制？ 持久地，当您创建一个新的ViewModel时，您必须记住将其连接到您的Ioc中。 大多数MVVM框架都有此限制。 解决这个小细节的简单方法是使用如下所示的属性： [RegisterWithIoc(InstanceMod
用RxSwift和MVVM-C实现的Github客户端
06-13
SwiftHub是一款基于RxSwift和MVVM-C架构实现的GitHub iOS客户端应用。RxSwift是一个流行的响应式编程库，它为Swift提供了ReactiveX的功能，而MVVM-C（Model-View-ViewModel-Coordinator）是一种扩展的软件设计模式，...
使用校园网-爱奇艺（uwp应用）连不上网的解决方法。
代码改变世界
05-10 4654
     
2018-9-1-win10-uwp-轻量级-MVVM-框架入门-2.1.5.3199
lindexi
11-21 383
title author date CreateTime categories win10 uwp 轻量级 MVVM 框架入门 2.1.5.3199 lindexi 2018-09-01 16:24:18 +0800 2018-6-10 17:45:4 +0800 Win10 UWP mvvm ...
Qt/qml仿制爱奇艺UWP客户端
clark的专栏
09-13 1304
  之前为了练习qml特意仿的爱奇艺客户端，完成了主要的框架和基本的一些控件的特效。 预览版下载地址：https://download.csdn.net/download/a18373279153/10664194    ...
依赖倒置原则_依赖倒置原则在爱奇艺UWP客户端开发中的应用
weixin_39793434的博客
12-18 101
依赖倒置原则（Dependency Inversion Principle）依赖倒置原则（Dependency Inversion Principle)是 Robert C. Martin 总结的S.O.L.I.D. Principles中的五个原则之一。讲的是灵活的系统在源代码层的依赖应该只依赖抽象层，而非具体实现。基本原则不要依赖频繁变更的实体类不要继承频繁变更的实体类不要重写实体方法不要引用...
Learn wpf mvvm-xaml,C# and the mvvm pattern
最新发布
09-28
学习WPF MVVM-XAML，C#和MVVM模式是非常有益的。MVVM是一种用于构建WPF和Silverlight应用程序的设计模式，它通过将应用程序分为三个部分：模型（Model）、视图（View）和视图模型（ViewModel），以实现数据绑定和松...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值