MVVM架构

作者: NapoleonY | 来源:发表于2016-07-18 11:19 被阅读1188次

    概要

    MVC架构,Model-View-Controller,如图一所示为一个典型的MVC设置。


    图一:mvc
    • Model呈现数据
    • View呈现用户界面
    • Controller调节两者之间的交互。从Model取数据,显示在View中。

    典型的MVC应用里,许多逻辑被放在View Controller中,他们中一些确实属于View Controller,但更多的是表现逻辑,即将Model中数据转换为View可以呈现的内容的事情。例如将JSON包里的某个NSDate转换为特定格式的NSString。这也导致了MVC被人称作Massive-View-Controller(重量级视图控制器)。

    通常Controller中应该只放如下代码:

    • 初始化时构造相应的View和Model
    • 监听Model层的事件,将Model层的数据传递到View层
    • 监听View层的时间,将View层的事件传递到Model层

    仅此而已,除此之外的任何逻辑都不应该放到Controller中。因此这也就有了MVVM

    MVVM

    图二所示为MVVM设置:MVVM其实就是MVC的增强版。我们正式连接了View 和View Controller,并将表示逻辑从Controller中移出,放到了一个新的对象里,即View Model中。


    图二:MVVM.png

    这样做可带来如下的益处:

    • 减少View Controller的复杂性,使得表示逻辑易于测试。
    • 兼容MVC模式
    • MVVM 配合一个绑定机制效果最好

    举例

    下面是一个看一个简单的 Person Model 以及相应的 View Controller。

    @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
    

    现在假设有一个 PersonViewController,在 viewDidLoad里,只需要基于它的 model属性设置一些Label即可。

    - (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实现如下

    //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
    

    现在我们已将viewDidLoad中的表示逻辑放入我们的 View Model 里了。此时,我们新的 viewDidLoad
    就会非常轻量:

    - (void)viewDidLoad { [super viewDidLoad]; 
        self.nameLabel.text = self.viewModel.nameText; 
        self.birthdateLabel.text = self.viewModel.birthdateText;
    }
    

    MVVM作用与问题

    MVVM在实际使用时也有一定的问题,主要体现在两点:

    • 数据绑定使得 Bug 很难被调试。你看到界面异常了,有可能是你 View 的代码有 Bug,也可能是 Model 的代码有问题。数据绑定使得一个位置的 Bug 被快速传递到别的位置,要定位原始出问题的地方就变得不那么容易了。
    • 对于过大的项目,数据绑定需要花费更多的内存。

    ReactiveCocoa

    MVVM引出了一个ReactiveCocoa,ReactiveCocoa作用如图三所示:


    图三:MVVM ReactiveCocoa.png

    如果想要深入了解ReactiveCocoa,可以看下ReactiveCocoa这篇文章。

    备注:本文为读书笔记,主要参考了如下几篇文章:

    相关文章

      网友评论

      • 涅槃简书:楼主似乎把model和viewModel弄混了,model里应该只放数据,比如age、birthdate、firstName、lastName等数据字段,viewModel里是一些数据处理,比如从网络上请求相关的数据-(void)requstNetData,然后用model去解析这些数据[model setValuesForKeysWithDictionary:dic],然后再把model添加到数据源数组当中[self.dataArry addObject:model]。以上仅是个人愚见,如有错误请勿参考。

      本文标题:MVVM架构

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