iOS基础 - 架构模式：MVVM

▶ 什么是 MVVM

Model-View-ViewModel 是 M-V-VM 三部分组成，它本质上是 MVC 的改进版

MVVM 就是将其中 V层 的状态和行为抽象化，其中 ViewModel 将 视图UI 和 业务逻辑 分开，它取出 M层 数据的同时也可以帮忙处理 V层 中由于需要展示内容而涉及的业务逻辑

MVVM 采用双向数据绑定。V层 中数据变化将自动反映到 VM 上；同样 M层 中数据变化也将会自动展示在界面上。MVVM 的核心思想就是关注 M层 的变化，让 MVVM 框架利用自己的机制自动更新 DOM，也就是所谓的数据-视图分离

MVVM 的缺点/优点

A. 好处

代码清晰：ViewModel 分离出来大部分的 Controller 代码，更加清晰和容易维护

方便测试：大部分 Bug 来自于逻辑处理，由于 ViewModel 把逻辑分离出来，可对 ViewModel 构造单元测试

开发解耦：一位开发者负责逻辑实现，另一位开发者负责 UI 实现

B. 坏处

代码量比 MVC 多、需对每个 Controller 实现绑定，这是分离不可避免的工作量

▶ MVVM 实战

同 MVP 架构模式一样，我们需要把 VM 和 C 两者绑定在一起，目录结构如下

具体实现如下

// - TestModel.h：数据结构

#import <Foundation/Foundation.h>
@interface TestModel : NSObject
// 数据
@property(nonatomic,copy)NSString *name;

@end

// - TestView.h：视图

#import <UIKit/UIKit.h>
@class TestViewModel;

// 声明协议：同 VM 交互
@protocol TestViewDelegate <NSObject>

-(void)doSomethings;

@end

@interface TestView : UIView

// 控件
@property(nonatomic,strong)UILabel *TVLabel;
// 拥有 VM
@property(nonatomic,weak)TestViewModel *viewModel;
// 代理
@property(nonatomic,weak)id<TestViewDelegate>delegate;

@end

// - TestView.m

#import "TestView.h"
#import "NSObject+FBKVOController.h"
@implementation TestView

// 创建控件
- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        
        self.TVLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 40, self.frame.size.width -40, self.frame.size.height -80)];
        self.TVLabel.backgroundColor = [UIColor orangeColor];
        self.TVLabel.textAlignment = NSTextAlignmentCenter;
        [self addSubview:self.TVLabel];
        
    }
    return self;
}

// 代理
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    if ([self.delegate respondsToSelector:@selector(doSomethings)]) {
        [self.delegate doSomethings];
    }
}


// 重写 setter方法 监听来自 viewModel 的数据
- (void)setViewModel:(TestViewModel *)viewModel{
    
    // 获取数据
    _viewModel = viewModel;
    
    // 实现监听
    // RAC 比较庞大，好多公司使用 MVVM+RAC 两者搭配；而 iOS 自带的 KVO 也太过零碎，使用起来也并不友好
    
    // 这里我们采用 Facebook 封装的 KVOController
    // 链接 https://github.com/facebookarchive/KVOController
    
    __weak typeof(self) weakSelf = self;
    [self.KVOController observe:viewModel keyPath:@"name" options:NSKeyValueObservingOptionNew block:^(id  _Nullable observer, id  _Nonnull object, NSDictionary<NSKeyValueChangeKey,id> * _Nonnull change) {

        // UI 赋值
        weakSelf.TVLabel.text = change[NSKeyValueChangeNewKey];
        
    }];
}

@end

// - TestViewModel.h：VM层

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface TestViewModel : NSObject

// 入口方法
-(instancetype)initWithController:(UIViewController *)controller;

@end

// - TestViewModel.m

#import "TestViewModel.h"
#import "TestView.h"
#import "TestModel.h"
@interface TestViewModel()<TestViewDelegate,UITextFieldDelegate> // 协议

// Controller
@property(nonatomic,weak)UIViewController *controller;

// Model
@property(nonatomic,strong)TestModel *tModel;
// 来自 M 的数据：M 和 VM 两者绑定需要
@property(nonatomic,copy)NSString *name;

@end

@implementation TestViewModel

// 入口：绑定一个 Controller 并处理业务逻辑
-(instancetype)initWithController:(UIViewController *)controller{
    
    if (self = [super init]) {
        
        // 绑定控制器
        self.controller = controller;
        
        // 视图
        TestView *tView = [[TestView alloc] initWithFrame:CGRectMake(30, 80, SCREEN_WIDTH - 60, 200)];
        tView.backgroundColor = [UIColor redColor];
        [self.controller.view addSubview:tView];
        tView.delegate = self;
        // 视图拥有了 viewModel
        tView.viewModel = self;

        // 加载数据模
        _tModel = [TestModel new];
        _tModel.name = @"QQ";

        // 注意和 MVP 不同是：M 和 VM 两者需要绑定
        // 核心思想就是 V、M 能够有拥有 VM，但 V、M 两者独立，互不影响
        self.name = _tModel.name; // 把 Model 的数据绑定到 VM 中
        // 通过 V 和 VM 两者的数据绑定，并且 V 对 VM 进行了监听，那么数据一旦发生改变，V 就能捕获
        
        // 验证监听：动态检测文本内容
        UITextField *testTF = [[UITextField alloc] initWithFrame:CGRectMake(50, 500, controller.view.frame.size.width - 100, 50)];
        testTF.clearButtonMode = UITextFieldViewModeWhileEditing;
        testTF.textColor = [UIColor whiteColor];
        testTF.placeholder = @"点我更改 QQ";
        testTF.backgroundColor = [UIColor redColor];
        [controller.view addSubview:testTF];
        testTF.delegate = self;
        
    }
    
    return self;
    
}

// 动态文本
- (void)textFieldDidChange:(id)sender {
    
    UITextField *field = (UITextField *)sender;
    // 变更数据：数据往往要从 Model 中获取，这里仅作验证
    self.name = field.text;
}

#pragma mark - <UITextFieldDelegate>
// 动态检测文本框内容
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string{

    [textField addTarget:self action:@selector(textFieldDidChange:) forControlEvents:UIControlEventEditingChanged];
    return YES;
}

#pragma mark - <TestViewDelegate>
// 代理
- (void)doSomethings{

    // 随机色
    self.controller.view.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0
                                                           green:arc4random()%255/255.0
                                                           blue:arc4random()%255/255.0
                                                           alpha:1.0];
}

@end

// - ViewController.m

#import "ViewController.h"
#import "TestViewModel.h"
@interface ViewController()

// ViewModel
@property(nonatomic,strong)TestViewModel *viewModel;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor cyanColor];
    
    // 绑定 TestViewModel
    self.viewModel = [[TestViewModel alloc] initWithController:self];

}

@end

运行效果