美文网首页
MVVM介绍

MVVM介绍

作者: 你weixiao的时候很美 | 来源:发表于2018-04-23 14:09 被阅读14次

本篇参考objc.io文章 MVVM介绍
还有这一篇 Model-View-ViewModel for iOS

1. 介绍MVVM

![mvvm.png](https://upload-
images.jianshu.io/upload_images/2493548-2a8492613b3b7c72.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这个图解准确地描述了什么是 MVVM:

  • 1一个 MVC 的增强版,它本质上就是一个精心优化的 MVC 架构。
  • 2.我们正式连接了视图和控制器,并将表示逻辑从 Controller 移出放到一个新的对象里,即 View Model。
2. MVVM的特性

通过例子1. 解析MVVM有3个重要的要点:

  • MVVM可以兼容当下使用的MVC
  • MVVM增加应用的可测试性
  • MVVM配合一个绑定机制效果最好
    例子1:
    //首先我们看MVC
// Model
@interface Person : NSObject
- (instancetype)initwithSalutation:(NSString *)salutation firstName:(NSString *)firstName lastName:(NSString *)lastName birthdate:(NSDate *)birthdate;
@property (nonatomic, readonly) NSString *salutation;
@property (nonatomic, readonly) NSString *firstName;
@property (nonatomic, readonly) NSString *lastName;
@property (nonatomic, readonly) NSDate *birthdate;
@end

//在controller中显示model
// namelabel 和birthdateLabel显示model中的数据
- (void)viewDidLoad {
    [super viewDidLoad];

    if (self.model.salutation.length > 0) {
        self.nameLabel.text = [NSString stringWithFormat:@"%@ %@ %@", self.model.salutation, self.model.firstName, self.model.lastName];
    } else {
        self.nameLabel.text = [NSString stringWithFormat:@"%@ %@", self.model.firstName, self.model.lastName];
    }

    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
    [dateFormatter setDateFormat:@"EEEE MMMM d, yyyy"];
    self.birthdateLabel.text = [dateFormatter stringFromDate:model.birthdate];

// 我们使用ViewModel实现如下

//viewModel.h
@interface PersonViewModel : NSObject
- (instancetype)initWithPerson:(Person *)person;

@property (nonatomic, readonly) Person *person;
@property (nonatomic, readonly) NSString *nameText;
@property (nonatomic, readonly) NSString *birthdateText;
@end

//viewModel.m
@implementation PersonViewModel
- (instancetype)initWithPerson:(Person *)person {
    self = [super init];
    if (!self) return nil;

    _person = person;
    if (person.salutation.length > 0) {
        _nameText = [NSString stringWithFormat:@"%@ %@ %@", self.person.salutation, self.person.firstName, self.person.lastName];
    } else {
        _nameText = [NSString stringWithFormat:@"%@ %@", self.person.firstName, self.person.lastName];
    }

    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
    [dateFormatter setDateFormat:@"EEEE MMMM d, yyyy"];
    _birthdateText = [dateFormatter stringFromDate:person.birthdate];

    return self;
}
@end

//在controller中显示如下:
- (void)viewDidLoad {
    [super viewDidLoad];

    self.nameLabel.text = self.viewModel.nameText;
    self.birthdateLabel.text = self.viewModel.birthdateText;
}

//如下是我们的单元测试:

SpecBegin(Person)
    NSString *salutation = @"Dr.";
    NSString *firstName = @"first";
    NSString *lastName = @"last";
    NSDate *birthdate = [NSDate dateWithTimeIntervalSince1970:0];

    it (@"should use the salutation available. ", ^{
        Person *person = [[Person alloc] initWithSalutation:salutation firstName:firstName lastName:lastName birthdate:birthdate];
        PersonViewModel *viewModel = [[PersonViewModel alloc] initWithPerson:person];
        expect(viewModel.nameText).to.equal(@"Dr. first last");
    });

    it (@"should not use an unavailable salutation. ", ^{
        Person *person = [[Person alloc] initWithSalutation:nil firstName:firstName lastName:lastName birthdate:birthdate];
        PersonViewModel *viewModel = [[PersonViewModel alloc] initWithPerson:person];
        expect(viewModel.nameText).to.equal(@"first last");
    });

    it (@"should use the correct date format. ", ^{
        Person *person = [[Person alloc] initWithSalutation:nil firstName:firstName lastName:lastName birthdate:birthdate];
        PersonViewModel *viewModel = [[PersonViewModel alloc] initWithPerson:person];
        expect(viewModel.birthdateText).to.equal(@"Thursday January 1, 1970");
    });
SpecEnd

// 由上边的例子1可以看出:

  1. 首先MVVC是从MVC优化来的,兼容MVC。是将MVC中,controller中的表示逻辑的代码移动到ViewModel中。

2.对于容易测试这点: 首先,controller中的代码少了,容易测试。 其实viewModel中的代码容易测试,我们可以按意愿自由地修改视图层级而不必担心破坏我们的单元测试。

  1. 本例中,Model生成后就是不可变的,对于可变的model,我们需要一些绑定机制,Model 的改变应该级联向下通过 View Model 进入 View。 我们可以使用KVO,但是KVO代码量过多,我们可以使用ReactiveCocoa来绑定。
总结:
  • 在MVVM下,视图和视图控制器正式连接; 我们将它们视为一体。
  • 视图仍然没有对模型的引用,但是控制器也没有。相反,他们引用视图模型ViewModel
  • ViewModel是放置用户输入验证逻辑(业务逻辑),视图呈现逻辑(将model中数据转化为view可以显示的数据),网络请求启动以及其他各种代码的绝佳场所。不属于ViewModel的一件事是对视图本身的任何引用。(不要再ViewModel中引用UIKit)
  • 由于视图模型包含所有表示逻辑并且不引用视图,因此可以通过编程方式对其进行全面测试。

使用rac是因为对于view和Model的变化,使用KVO等绑定通知和更新比较麻烦。使用ReactiveCocoa可以方便的进行绑定和粘合。

相关文章

  • vue入门

    MVVM的介绍 vue的设计思想是基于MVVM实现的,那么什么是MVVM呢?简单介绍: 组成 MVVM ===> ...

  • 值得学习的技术文章(持续添加)

    1. MVVM 学习资料 MVVM奇葩说 面向协议的 MVVM 架构介绍 MVVM With ReactiveCo...

  • Android MVVM 解读 3. Android MVVM

    Android MVVM 解读 3. Android MVVM 介绍(1) 包含的信息 Android MVVM ...

  • MVVM介绍

    本篇参考objc.io文章 MVVM介绍还有这一篇 Model-View-ViewModel for iOS 1....

  • MVVM 介绍

    原文连接 我于 2011 年在 500px 找到自己的第一份 iOS 开发工作。虽然我已经在大学里做了好几年 iO...

  • MVVM介绍

    以 MVVM 属术语来说,就是那些将 Model 数据转换为 View 可以呈现的东西的事情,例如将一个NSDat...

  • MVVM 介绍

    有时我感觉就像我不知道在做什么。虽然我知道自己的设计模式——就像任何好的编程人员那样 —— 但我太接近我在做的产品...

  • MVVM 介绍

    MVVM是MVC模式的升级版,相比MVC多了一个ViewMode层,减轻了ViewController的负担,先来...

  • Xamarin.Forms MVVM

    目录 - Xamarin.Forms 前言 本文介绍MVVM:一、MVVM简介二、MVVM示例 环境 1.Visu...

  • MVVM设计模式

    MVVM设计模式 在介绍MVVM设计模式之前我们先介绍一下DataBinding DataBinding,2015...

网友评论

      本文标题:MVVM介绍

      本文链接:https://www.haomeiwen.com/subject/ugeklftx.html