# MVC、MVP、MVVM

## MVC 架构

MVC 模式下，软件被划分为视图（View：用户界面）、控制器（Controller：业务逻辑）、模型（Model：数据保存）



![MVC架构](./../assets/2018-11-16-MVC.png)

1. 用户操作 View，在 View 上面的事件都将被传递到 Controller 处理
2. Controller 处理事件、请求网络，操作 Model 更新状态
3. Model 将更新后的数据发送到 View，用户得到反馈

所有的通信都是单向的。



### Apple MVC 架构

效果等价于： 

<img src="./../assets/AppleMVCImpl.png" style="zoom:60%" />

最典型的就是 iOS 侧的 UITableView 的设计：

- Controller 感知 View：UIViewController 通过 View 的形式持有 UITableView
- View 事件代理到 Controller：而 View 上的 UI 事件自身不处理，通过代理的形式交给 UIViewController 处理
- Controller 感知 Model：UIViewController 负责从网络或者数据库中拉取数据，持有 Model。在合适的时机上，UIViewController 负责将 Model 数据交给 UIView 去展示（UITableView 的 cellforRow 代理方法中，cell.titleLabel.text = model.title 的形式展示上去） 。也就是说 View 无法感知 Model 的存在。
- Model 的变化通过 Controller 传递到 View 上：View 的点击事件通过代理交给 Controller 处理，往往会涉及 Model 的变化。Model 变化后，还是不直接操作 View。依旧通过 Controller 操作 View 的接口，更新数据

优点：

- View 可以重用。因为 View 不用感知 Model 的存在，View 展示的东西，外部通过访问修改 UI 控件属性的形式去实现。

  ```objective-c
  @interface GoodCell
  @property (nonatomic, strong, readonly) UIImageView *goodsImageView;
  @property (nonatomic, strong, readonly) UILabel *goodsNameLabel;
  @end
    
  // GoodsListViewController
  - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
      GoodsCell *cell = [tableView dequeueReusableCellWithIdentifier:GoodsCellID forIndexPath:indexPath];
      GoodsModel *model = self.goods[indexPath.row];
      cell.goodsImageView.image = [UIImage imageNamed:model.iamge];
      cell.goodsNameLabel.text = model.name;
      return cell;
  }
  ```

  

- Model 可以重用。Model 也不用感知 View 的存在。

缺点：

- Controller 过于臃肿。因为 View 和 Model 彼此独立，所以读取 Model 然后拼装数据，外部通过访问修改 UI 控件属性，负责展示 UI 的逻辑都放在 Controller 中，所以 Controller 就会很臃肿。



### MVC  架构变种

<img src="./../assets/AppleMVCRefine.png" style="zoom:60%" />

改变：

- View 可以拥有 Model，感知 Model。一部分之前放在 Controller 里的逻辑，拆分到 View 里面了

优点：

- 对 Controller 进行了瘦身，这符合“单一职责原则”，使 Controller 更专注于协调和业务逻辑。

  将 UI 配置逻辑内聚到 View 中，避免了 Controller 中冗长的控件操作代码（如 `cell.imageView.image = model.image;`）

- 将 View 内部的细节进行了隐藏，更具备封装性。外界不知道 View 内部具体的实现（Apple MVC 会暴露 UI 控件，现在不用暴露了），更具封装性

  ```objective-c
  // GoodCell.h
  @interface GoodCell
  @property (nonatomic, strong) GoodsModel *model;
  @end
  
  // GoodCell.m
  @interface GoodCell()
  @property (nonatomic, strong, readonly) UIImageView *goodsImageView;
  @property (nonatomic, strong, readonly) UILabel *goodsNameLabel;
  @end
  
  -(void)setModel:(GoodsModel *)model {
  	_model = model;
  	self.goodsImageView.image = [UIImage imageNamed:model.iamge];
    self.goodsNameLabel.text = model.name;
  }
  // GoodsListViewController
  - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
      GoodsCell *cell = [tableView dequeueReusableCellWithIdentifier:GoodsCellID forIndexPath:indexPath];
  	  cell.model = self.goods[indexPath.row];
      return cell;
  }
  ```

缺点：

- View 强依赖于 Model。

### 思考：View 强依赖于 Model 真的是缺点吗？

这个缺点就真的是缺点吗？我一个商品的 GoodsView 展示，就需要展示商品图片、商品名称、商品原价、商品折扣价、销量等信息。单独暴露 UI 控件，然后访问的话很灵活也很独立，但工作量很大，为了 UI 的展示，让 View 持有 Model 真的是缺点吗？



要回答是不是缺点，需要回答2个问题：

1. 何时是合理的设计？

   - View 与 Model 高度绑定

     如果 GoodsCell 仅用于展示 GoodsModel，且2者生命周期一致，这种直接依赖反而合理，此时 View 与 Model 的耦合是**高内聚** 的体现

   - 避免过度抽象

     强行解耦，为 View 抽象设计出一个通用接口，可能引入不必要的复杂度。比如为 GoodsCell 设计一个 `id<GoodsDisplayable>` 协议，在仅有一个 Model 的场景下属于过度设计了

2. 何时可能成为问题？

   - 复用 View 展示不同 Model

     如果希望 GoodsCell 复用展示其他数据（如 `DiscountGoodsModel`），之前那种 GoodsCell 依赖 GoodsModel 的设计，会导致导致代码难以拓展。此时可以考虑 `ViewModel` 模式或者**协议抽象**解耦

   - Model 频繁变更

     如果 GoodsModel 的字段，比如 image 频繁变更，所有直接依赖它的 View 都需要同步修改，此时可以将 Model 到 View 的映射逻辑，迁移到独立的转换层，比如 `GoodsModelConverter`

怎么样优化？

1. 可将 Model 到 View 的映射逻辑移到 **独立的转换层**，隔离变化

   1. `GoodsModel` 结构如下：

      ```objective-c
      // GoodsModel.h
      @interface GoodsModel : NSObject
      @property (nonatomic, copy) NSString *imageName;
      @property (nonatomic, copy) NSString *name;
      @property (nonatomic, assign) CGFloat price;
      @end
      ```

      现在需要将 `GoodsModel` 转换为 View 可直接使用的数据（如处理价格格式化、图片加载）：

      实现 GoodsModelConverter

      ```objective-c
      // GoodsModelConverter.h
      @interface GoodsModelConverter : NSObject
      
      // 将 GoodsModel 转换为字典（Key-Value 形式）
      + (NSDictionary *)convertToDisplayData:(GoodsModel *)model;
      
      @end
      
      // GoodsModelConverter.m
      @implementation GoodsModelConverter
      
      + (NSDictionary *)convertToDisplayData:(GoodsModel *)model {
          // 处理价格格式化
          NSString *priceText = [NSString stringWithFormat:@"¥%.2f", model.price];
          
          // 加载图片（假设 imageName 是本地资源名）
          UIImage *image = [UIImage imageNamed:model.imageName];
          
          return @{
              @"name": model.name,
              @"price": priceText,
              @"image": image
          };
      }
      
      @end
      ```

      修改 View 使用转换后的数据

      ```objective-c
      // GoodsCell.h
      @interface GoodsCell : UITableViewCell
      // 不再直接依赖 GoodsModel，而是通过字典传递数据
      - (void)configureWithDisplayData:(NSDictionary *)displayData;
      @end
      
      // GoodsCell.m
      @implementation GoodsCell {
          UIImageView *_goodsImageView;
          UILabel *_nameLabel;
          UILabel *_priceLabel;
      }
      
      - (void)configureWithDisplayData:(NSDictionary *)displayData {
          _goodsImageView.image = displayData[@"image"];
          _nameLabel.text = displayData[@"name"];
          _priceLabel.text = displayData[@"price"];
      }
      
      @end
      ```

      Controller 调用

      ```objective-c
      // GoodsListViewController.m
      - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
          GoodsCell *cell = [tableView dequeueReusableCellWithIdentifier:GoodsCellID forIndexPath:indexPath];
          GoodsModel *model = self.goods[indexPath.row];
          
          // 通过 Converter 转换数据
          NSDictionary *displayData = [GoodsModelConverter convertToDisplayData:model];
          
          [cell configureWithDisplayData:displayData];
          return cell;
      }
      ```

      如何应对 Model 的变化？

      假设 GoodsModel 的 image 字段变为 remoteImageURL，则不需要每处修改 View 使用的地方，统一在 GoodsModelConverter 即可

      ```objective-c
      // GoodsModelConverter.m
      + (NSDictionary *)convertToDisplayData:(GoodsModel *)model {
          // 新增网络图片加载逻辑（伪代码）
          UIImage *placeholderImage = [UIImage imageNamed:@"placeholder"];
          UIImage *image = placeholderImage;
          
          return @{
              @"name": model.name,
              @"price": priceText,
              @"image": image
          };
      }
      ```

      View 和 Controller 无需任何修改。

      - GoodsCell 仍然接收 displayData 字典，不用关心具体来源
      - Controller 仍然调用 convertToDisplayData 方法

   更优雅的方案是引入 ViewModel 对象。

2. 使用 ViewModel 模式

   将 Model 转换为 View 专用的数据结构，View 仅依赖 ViewModel：

   ```objective-c
   // GoodsCellViewModel.h
   @interface GoodsCellViewModel
   @property (nonatomic, readonly) UIImage *image;
   @property (nonatomic, readonly) NSString *name;
   - (instancetype)initWithGoods:(GoodsModel *)goods;
   @end
   
   // GoodsCell.h
   @interface GoodsCell
   @property (nonatomic, strong) GoodsCellViewModel *viewModel;
   @end
   ```

   优点：

   - View 与 Model 解耦，便于复用
   - ViewModel 可以封装数据转换逻辑（比如多语言本地化、图片加载、字符串格式化拼接）

3. 通过抽象协议依赖

   定义 View 所需数据的协议，Model 实现该协议。

   定义 GoodsDisplayable 协议

   ```objective-c
   // GoodsDisplayable.h
   @protocol GoodsDisplayable
   @property (nonatomic, readonly) NSString *goodsImageName;
   @property (nonatomic, readonly) NSString *goodsName;
   @end
   
   // GoodsModel.h
   @interface GoodsModel : NSObject <GoodsDisplayable>
   @end
   
   // GoodsCell.h
   @interface GoodsCell
   @property (nonatomic, strong) id<GoodsDisplayable> displayData;
   @end
   ```

   在正常商品列表页面，Controller 逻辑为：

   ```objective-c
   // GoodsListViewController.m
   - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
       GoodsCell *cell = [tableView dequeueReusableCellWithIdentifier:GoodsCellID forIndexPath:indexPath];
       cell.displayData = self.goods[indexPath.row];
       return cell;
   }
   ```

   在打折商品列表页面，Controller 逻辑为：

   ```objective-c
   // DiscountGoodsListViewController.m
   - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
       GoodsCell *cell = [tableView dequeueReusableCellWithIdentifier:GoodsCellID forIndexPath:indexPath];
       cell.displayData = self.goods[indexPath.row];
       return cell;
   }
   ```

现在我们可以尝试概括性回答该问题了：

**View 持有 Model 是否是缺点，取决于具体场景：**

- **单一用途、无复用需求**：直接依赖 Model 是合理选择，简化代码且无过度设计。
- **需复用或 Model 不稳定**：通过 ViewModel 或协议解耦，提高灵活性。

最终，**没有绝对的最佳实践，只有适合场景的权衡**。Apple 的 MVC 变种在简单场景下有效，但在复杂场景需结合其他模式优化。




## MVP 架构

MVP 模式将 Controller 改名为 Presenter，通信改变了通信方向

![MVP架构](./../assets/MVPArchStructure.png)

1. 各部分之间的通信都是双向的
2. Model 与 View 不发生联系，都通过 Presenter 传递
3. View 层非常薄。不部署任何业务逻辑，称为“被动视图（Passive View）”，即没有任何主动性
4. 而 Presenter 非常厚，所有的逻辑都部署在这层。比如在 Presenter 里组装 View 展示到 Controller 的 View 上，加载数据，展示到 View 上。
5. 如果 Presenter 这一层很厚的话，可以继续拆，比如再增加一个 Interactor 的角色，专门处理处理 View UI 响应事件。这样子角色更多，职责也更清晰。维护也方便。



### 错误实现

举个例子：

App 只有一个个人中心 ViewController，其 View 上只有1个展示个人信息的子 View，子 View 上只有1个展示头像 UIImageView 和 1个展示昵称的 UILabel。用 MVP 的思想实现如下

模型为

```objective-c
@interface PersonalInfoModel : NSObject
@property (copy, nonatomic) NSString *name;
@property (copy, nonatomic) NSString *image;
@end

```

关键就是要增加一个 `Presenter` 的角色，负责组装 View 展示到 Controller 的 View 上，加载数据，展示到 View 上。

```objective-c
// PersonInfoPresenter.h
@interface PersonInfoPresenter : NSObject
- (instancetype)initWithController:(UIViewController *)controller;
@end
 
// PersonInfoPresenter.m
@interface PersonInfoPresenter() <PersonalInfoViewDelegate>
@property (weak, nonatomic) UIViewController *controller;
@end

@implementation PersonInfoPresenter

- (instancetype)initWithController:(UIViewController *)controller
{
    if (self = [super init]) {
        self.controller = controller;
        
        // 创建View
        PersonalInfoView *personalInfoView = [[PersonalInfoView alloc] init];
        personalInfoView.frame = CGRectMake(100, 100, 100, 150);
        personalInfoView.delegate = self;
        [controller.view addSubview:personalInfoView];
        
        // 加载模型数据
        PersonalInfoModel *model = [[PersonalInfoModel alloc] init];
        model.name = @"杭城小刘";
        model.image = @"UnixKernel";
        
        // 赋值数据
        [personalInfoView setName:app.name andImage:app.image];
    }
    return self;
}

#pragma mark - MJAppViewDelegate
- (void)personalInfoViewDidClick:(PersonalInfoView *)personalInfoView
{
    NSLog(@"presenter 监听了个人信息 View 的点击事件");
}
```

PersonalInfoView

```objective-c
#import <UIKit/UIKit.h>

@class PersonalInfoView;

@protocol PersonalInfoViewDelegate <NSObject>
@optional
- (void)personalInfoViewDidClick:(PersonalInfoView *)personalInfoView;
@end

@interface PersonalInfoView : UIView
- (void)setName:(NSString *)name andImage:(NSString *)image;
@property (weak, nonatomic) id<PersonalInfoViewDelegate> delegate;
@end
  
  
@implementation MJAppView
- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        UIImageView *iconView = [[UIImageView alloc] init];
        iconView.frame = CGRectMake(0, 0, 100, 100);
        [self addSubview:iconView];
        _iconView = iconView;
        
        UILabel *nameLabel = [[UILabel alloc] init];
        nameLabel.frame = CGRectMake(0, 100, 100, 30);
        nameLabel.textAlignment = NSTextAlignmentCenter;
        [self addSubview:nameLabel];
        _nameLabel = nameLabel;
    }
    return self;
}

- (void)setName:(NSString *)name andImage:(NSString *)image {
    _iconView.image = [UIImage imageNamed:image];
    _nameLabel.text = name;
}

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

@end
```

在 ViewController 的使用

```objective-c
@interface ViewController ()
@property (strong, nonatomic) PersonInfoPresenter *presenter;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.presenter = [[PersonInfoPresenter alloc] initWithController:self];
}

@end
```

目前实现的效果是：

- Presenter 负责了 View 的创建与展示，同时调用 Model 的能力，从数据库或者网络加载业务数据，然后更新到 View 上。使得 Controller 逻辑更加单一
- 将大部分 View 的组装逻辑从 Controller 中抽离到 Presenter 中，实现了 Controller 的瘦身
- Model 和 View 无法感知对方，也无法直接访问，保证了 Model 和 View 的复用能力



### 正确实现

目前的实现中，Presenter 中拥有了 View，对于 Presenter 的单元测试不好展开，该如何修改？

- View 还是放在 Controller 中创造
- 为了解耦，将 View UI 事件和数据获取抽成对应的协议
- Model 依旧是薄薄的一层，数据获取放在 Service 里进行

定义 View 刷新协议

```objective-c
// PersonalInfoViewProtocol.h
@protocol PersonalInfoViewProtocol <NSObject>
- (void)displayName:(NSString *)name image:(NSString *)image;
@end
```

View 实现协议

```objective-c
// PersonalInfoView.h
@interface PersonalInfoView : UIView <PersonalInfoViewProtocol>
@property (nonatomic, weak) id<PersonalInfoViewDelegate> delegate;
@end

// PersonalInfoView.m
@implementation PersonalInfoView
// 原有代码不变，但实现 displayName:image: 方法
- (void)displayName:(NSString *)name image:(NSString *)image {
    _iconView.image = [UIImage imageNamed:image];
    _nameLabel.text = name;
}

- (void)didClickProfileView {
  	if (self.delegate && [self.delegate respondsToSelector:@selector(personalInfoViewDidClick:)]) {
        [self.delegate personalInfoViewDidClick:self];
    }
}
@en
```

定义数据拉取协议

```objective-c
// PersonalInfoServiceProtocol.h
@protocol PersonalInfoServiceProtocol <NSObject>
- (void)fetchPersonalInfoWithCompletion:(void (^)(PersonalInfoModel *model))completion;
@end
```

定义数据拉取 Services

```objective-c
// PersonalInfoService.h
@interface PersonalInfoService : NSObject <PersonalInfoServiceProtocol>
@end

// PersonalInfoService.m
@implementation PersonalInfoService
- (void)fetchPersonalInfoWithCompletion:(void (^)(PersonalInfoModel *))completion {
    // 模拟网络请求
    dispatch_async(dispatch_get_global_queue(0, 0), ^{
        PersonalInfoModel *model = [[PersonalInfoModel alloc] init];
        model.name = @"杭城小刘";
        model.image = @"UnixKernel";
        dispatch_async(dispatch_get_main_queue(), ^{
            completion(model);
        });
    });
}
@end
```

重构 Presenter。loadData 数据加载成功后，调用其 View 的代理方法，刷新 UI

```objective-c
// PersonInfoPresenter.h
@interface PersonInfoPresenter : NSObject
- (instancetype)initWithView:(id<PersonalInfoViewProtocol>)view 
                   service:(id<PersonalInfoServiceProtocol>)service;
- (void)loadData;
@end

// PersonInfoPresenter.m
@interface PersonInfoPresenter()
// 重要地方：遵循相应协议的 View 对象
@property (nonatomic, weak) id<PersonalInfoViewProtocol> view;
// 重要地方：遵循相应协议的 Services 对象
@property (nonatomic, strong) id<PersonalInfoServiceProtocol> service;
@end

@implementation PersonInfoPresenter

- (instancetype)initWithView:(id<PersonalInfoViewProtocol>)view 
                   service:(id<PersonalInfoServiceProtocol>)service {
    if (self = [super init]) {
        _view = view;
        _service = service;
    }
    return self;
}

- (void)loadData {
    [self.service fetchPersonalInfoWithCompletion:^(PersonalInfoModel *model) {
        [self.view displayName:model.name image:model.image];
    }];
}

#pragma mark - 点击事件处理（可选）
- (void)handleViewClick {
    NSLog(@"Presenter 处理点击事件");
}
@end
```

Controller 里组装和创建 Presenter，在 `viewDidLoad` 里面调用 presenter 的 loadData 方法，让其内部的 Services 加载网络数据。

```objc
// ViewController.m
@interface ViewController () <PersonalInfoViewDelegate>
@property (nonatomic, strong) PersonInfoPresenter *presenter;
@property (nonatomic, strong) PersonalInfoView *infoView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 创建 View
    self.infoView = [[PersonalInfoView alloc] initWithFrame:CGRectMake(100, 100, 100, 150)];
    self.infoView.delegate = self;
    [self.view addSubview:self.infoView];
    
    // 注入依赖
    id<PersonalInfoServiceProtocol> service = [[PersonalInfoService alloc] init];
    self.presenter = [[PersonInfoPresenter alloc] initWithView:self.infoView service:service];
    
    // 触发数据加载
    [self.presenter loadData];
}

#pragma mark - PersonalInfoViewDelegate
- (void)personalInfoViewDidClick:(PersonalInfoView *)view {
    [self.presenter handleViewClick];
}
@end
```



关键改动点：

1. **Presenter 不再持有 View**：通过协议与 View 通信，避免直接依赖具体类。
2. **数据加载抽象为 Service**：Presenter 通过协议调用 Service，便于模拟不同场景。
3. **布局职责回归 View**：Presenter 不再设置 `frame`，保证单一职责。
4. **依赖注入**：Presenter 的 Service 和 View 通过初始化注入，测试时可替换为 Mock。



思考：如何一个复杂的购物车页面包含很多子 View，按照 MVP 模式，该怎么处理？

- **模块化拆分**：每个功能单元独立为 View-Presenter-Service 组合

  可以把复杂的购物车 view 拆分为独立的几个 View。比如：

  - 商品列表 GoodsListView、商品列表 GoodsListPresenter、商品列表 GoodsListServices
  - 商品统计信息 GoodsSummaryInfoView、商品统计信息  GoodsSummaryInfoPresenter、商品统计信息  GoodsSummaryInfoServices
  - 营销活动展示 GoodsPromoptionView、营销活动展示 GoodsPromoptionPresenter、营销活动展示 GoodsPromoptionServices
  - 每个 View 设计自己对应的 Presenter

- Controller 依旧复杂 View 的组装，和各个 Presenter 的创建工作

- **协调机制**：使用 Coordinator 或响应式编程管理跨模块事件

- 其他流程和单个 View、单个 Presenter 没啥不同。区别在于复杂的业务下，Controller 会存在多个 View、多个 Presenter



## MVVM 架构

MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。

![MVVM架构](./../assets/MVVMArchStructure.png)

区别在于：采用双向绑定的模式。View 的改变，自动反应在 ViewModel 上。 ViewModel 的改变会发应在 View 上。


MVC 等到业务逻辑很复杂的时候被称为 Massive View Controller （重量级视图控制器）。这样的 Controller 后期维护看着阅读成本很高、不易于测试、维护。当时写这个代码的人离职后，几千行规模的代码在后期添加新功能或者修改 Bug 都是一件折磨人的事情。

![典型MVC架构](./../assets/2018-11-16-iOSMVC.png)

看到 View 和 ViewController 是不同的技术组件，但是日常开发中它们总是成对的存在，为什么不考虑将他们的连接正规化呢？

![存在问题](./../assets/2018-11-16-VController-Model.png)

典型的 MVC 存在弊端就是 Controller 层非常复杂，很多逻辑都在里面，包括一些不是逻辑的“表示逻辑”（presentation logic）。用 MVVM 术语来说就是将那些 Model 数据转换为 View 可以呈现的东西。例如将一个 NSDate 格式化为一个“2018-11-17” 这样的 NSString。


上图中缺少一个环节，一个专门用来处理所有的表示逻辑。称为 “ViewModel”。位于 ViewController 与 Model 之间。

![MVVM](./../assets/2018-11-16-iOSmvvm.png)

MVVM 就是 MVC 的增强版，将展示层逻辑单独拎出来，即 ViewModel。iOS 使用 MVVM 可以降低 ViewController 的复杂性并使得表示逻辑易于测试。


- MVVM 兼容当下的 MVC 机构
- MVVM 增加应用的可测试性
- MVVM 配合一个绑定机制效果最好



### **MVVM 核心改造点**

1. **引入 ViewModel**：负责数据转换、业务逻辑，通过数据流驱动 UI 更新
2. **数据双向绑定**：使用 ReactiveCocoa（RAC）建立 View 和 ViewModel 的绑定关系
3. **事件命令化**：用户交互事件封装为 Command，由 ViewModel 处理



改造如下：

定义 ViewModel（核心）

```objc
// PersonalInfoViewModel.h
#import <ReactiveObjC/ReactiveObjC.h>

@class PersonalInfoModel;

@interface PersonalInfoViewModel : NSObject

// 输出属性（供 View 绑定）
@property (nonatomic, strong, readonly) RACSignal<NSString *> *nameSignal;
@property (nonatomic, strong, readonly) RACSignal<UIImage *> *imageSignal;

// 输入命令（处理 View 事件）
@property (nonatomic, strong, readonly) RACCommand *viewDidClickCommand;

// 初始化方法（依赖注入）
- (instancetype)initWithService:(id<PersonalInfoServiceProtocol>)service;

@end

// PersonalInfoViewModel.m
@interface PersonalInfoViewModel()

@property (nonatomic, strong) id<PersonalInfoServiceProtocol> service;
@property (nonatomic, strong) RACSubject *nameSubject;
@property (nonatomic, strong) RACSubject *imageSubject;

@end

@implementation PersonalInfoViewModel

- (instancetype)initWithService:(id<PersonalInfoServiceProtocol>)service {
    if (self = [super init]) {
        _service = service;
        _nameSubject = [RACSubject subject];
        _imageSubject = [RACSubject subject];
        
        // 暴露信号
        _nameSignal = _nameSubject;
        _imageSignal = _imageSubject;
        
        // 初始化命令
        [self setupCommands];
        [self loadData];
    }
    return self;
}

#pragma mark - 初始化命令
- (void)setupCommands {
    @weakify(self);
    _viewDidClickCommand = [[RACCommand alloc] 
        initWithSignalBlock:^RACSignal *(id input) {
            @strongify(self);
            NSLog(@"ViewModel 处理点击事件");
            return [RACSignal empty];
        }];
}

#pragma mark - 数据加载
- (void)loadData {
    @weakify(self);
    [self.service fetchPersonalInfoWithCompletion:^(PersonalInfoModel *model) {
        @strongify(self);
        // 更新数据流
        [self.nameSubject sendNext:model.name];
        [self.imageSubject sendNext:[UIImage imageNamed:model.image]];
    }];
}

@end
```

改造 View

```objective-c
// PersonalInfoView.h（协议不再需要）
@interface PersonalInfoView : UIView

// 暴露 UI 组件用于绑定
@property (nonatomic, strong) UIImageView *iconView;
@property (nonatomic, strong) UILabel *nameLabel;

// 绑定 ViewModel
- (void)bindViewModel:(PersonalInfoViewModel *)viewModel;

@end

// PersonalInfoView.m
#import <ReactiveObjC/ReactiveObjC.h>

@implementation PersonalInfoView

- (instancetype)initWithFrame:(CGRect)frame {
    // ... 原有初始化代码不变 ...
}

- (void)bindViewModel:(PersonalInfoViewModel *)viewModel {
    // 绑定数据到 UI
    RAC(self.nameLabel, text) = [viewModel.nameSignal deliverOnMainThread];
    RAC(self.iconView, image) = [viewModel.imageSignal deliverOnMainThread];
    
    // 绑定点击事件到 Command
    @weakify(viewModel);
    [self addGestureRecognizer:[[UITapGestureRecognizer alloc] 
        initWithTarget:self action:@selector(handleTap)]];
    [[self rac_signalForSelector:@selector(handleTap)] 
        subscribeNext:^(id x) {
            @strongify(viewModel);
            [viewModel.viewDidClickCommand execute:nil];
        }];
}

- (void)handleTap {
    // 空方法，仅用于触发 RAC 信号
}

@end
```

改造 ViewController（胶水、组装）

```objective-c
// ViewController.m
@interface ViewController ()
@property (nonatomic, strong) PersonalInfoView *infoView;
@property (nonatomic, strong) PersonalInfoViewModel *viewModel;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 创建 View
    self.infoView = [[PersonalInfoView alloc] initWithFrame:CGRectMake(100, 100, 100, 150)];
    [self.view addSubview:self.infoView];
    
    // 创建 Service 和 ViewModel
    id<PersonalInfoServiceProtocol> service = [[PersonalInfoService alloc] init];
    self.viewModel = [[PersonalInfoViewModel alloc] initWithService:service];
    
    // 绑定 ViewModel
    [self.infoView bindViewModel:self.viewModel];
}

@end
```



## 一个简单的例子

PersonModel
```objective-c
@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
```objective-c
- (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];
}
```
上面是标准的 MVC。现在我们考虑用 ViewModel 增加改进下

PersonViewModel
```objective-c
@interface PersonViewModel : NSObject

- (instancetype)initWithPerson:(Person *)person;

@property (nonatomic, readonly) Person *person;

@property (nonatomic, readonly) NSString *nameText;
@property (nonatomic, readonly) NSString *birthdateText;
- (instancetype)initWithPerson:(Person *)person;
@end


@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
```

此时，我们的 ViewController 会很轻量
```objective-c
- (void)viewDidLoad {
    [super viewDidLoad];
    self.nameLabel.text = self.viewModel.nameText;
    self.birthdateLabel.text = self.viewModel.birthdateText;
}
```
可测试？View Controller 是出了名的难测试。因为传动的 VC 很重，在 MVVM 的世界里，代码各司其职，测试 View Controller 变得较为容易
```objective-c
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
```



## VIPER 架构

`View-Interactor-Presenter-Entity-Routing` ，一种基于单一职责原则和清晰的模块界限的架构模式，包含五个主要组成部分：

- View（视图层）：负责显示用户界面和接收用户输入。它将用户输入传递给 Presenter
- Presenter（演示者）：将从 View 层获取指令转到 Interactor 处理并接收处理后的数据，并将其格式化为适合 View 显示的格式，然后将这些数据传递给 View 去显示更新
- Interactor（交互器）：负责处理具体的业务逻辑。它获取数据（可能来自网络、数据库等），处理业务规则和数据，并将结果传递给Presenter
- Entity（实体层）：应用的基本数据对象，类似 MVC 架构中的 Model 层，例如数据库对象或网络请求的 JSON 对象等
- Routing（路由层）：负责页面之间的导航逻辑跳转

VIPER 架构的优点在于模块职责划分清晰，模块间的耦合度低，特别适合大项目的开发, 其主要缺点是由于层的划分较多，增加了代码复杂性，对于小型项目而言可能会显得过度设计

这么看来 VIPER 很像前端中 Redux 的设计：

- VIPER 相比 Redux 简化了 UI 事件 Action 和 ActionCreator  这个角色
- Interactor 做的事情类似 Reducer ，都会根据对应的事件类型，判断如何处理数据。区别在于前端约定 Reducer 的实现必须是纯函数

除了角色不同外，VIPER 和 Redux 对于 UI 展示和事件响应、处理的整个流程很类似。所以可以理解为「 VIPER 是 Redux 在客户端的简易实现」。