洋仔的博客 洋仔的博客
首页
  • 个人心法总结

    • 价值心法
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • iOS基础知识
  • 前端
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 投资体系
  • 毛选
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

洋仔

奋斗的小青年
首页
  • 个人心法总结

    • 价值心法
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • iOS基础知识
  • 前端
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 投资体系
  • 毛选
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 技术文档

  • GitHub技巧

  • Nodejs

  • 博客搭建

  • iOS基础知识

    • iOS底层相关

    • Runloop系列

    • Runtime系列

    • 内存管理系列

    • Block系列

    • 线程系列

    • KVC跟KVO系列以及通知中心

    • UI系列

    • 离屏渲染系列

    • 组件化系列跟架构

      • iOS组件化系列
      • MVVM、MVC、MVP
        • 简介
        • MVC
          • 用户的交互逻辑
        • MVP设计模式
        • MVVM+RAC设计模式
          • MVVM代码示例
    • OC跟webview交互系列

    • 持久化系列

    • APP编译系列

    • APP性能优化系列

    • cocoapods系列

    • swift系列

    • Git系列

    • 网络相关

    • 三方库系列

    • 系统原理

    • 总结系列

    • 算法系列

    • 数据结构系列

  • 前端

  • 技术
  • iOS基础知识
  • 组件化系列跟架构
洋仔
2023-08-12
目录

MVVM、MVC、MVP

# 简介

MVC,MVP和MVVM都是常见的软件架构设计模式(Architectural Pattern),它通过分离关注点来改进代码的组织方式。不同于设计模式(Design Pattern),只是为了解决一类问题而总结出的抽象方法,一种架构模式往往使用了多种设计模式

它们目标都是解耦,解耦好处一个是关注点分离,提升代码可维护和可读性,并且提升代码复用性。

它们都将应用抽象分离成视图、逻辑、数据3层。

# MVC

  • M: Model 数据层, 负责应用的业务逻辑。它管理着应用的状态。这还包括读取和写入数据,持久化应用程序状态,甚至可能包括与数据管理相关的任务,例如网络和数据验证
  • V: View 视图层,这部分有两个重要的任务:向用户展示数据和处理用户和应用的交互
  • C: Controller控制器, view 层和 model 层经由一个或多个 controller 绑定在一起。

# 用户的交互逻辑

用户点击 View(视图) --> 视图响应事件 -->通过代理传递事件到Controller-->发起网络请求更新Model--->Model处理完数据-->代理或通知给Controller-->改变视图样式-->完成 可以看到Controller强引用View与Model,而View与Model是分离的,所以就可以保证Model和View的可测试性和复用性,但是Controller不行,因为Controller是Model和View的中介,所以不能复用,或者说很难复用。

用户场景:

用户交互输入了某些内容

Controller将用户输入转化为Model所需要进行的更改

Model中的更改结束之后,Controller通知View进行更新以表现出当前Model的状态

iOS开发实际使用的MVC架构

Screenshot-2023-08-27-at-09

在我们实际开发中使用的MVC模式可以看到,View与Controller耦合在一起了。这是由于每一个界面的创建都需要一个Controller,而每一个Controller里面必然会带一个View,这就导致了C和V的耦合。这种结构确实可以提高开发效率,但是一旦界面复杂就会造成Controller变得非常臃肿和难以维护。

MVC代码示例

我们要实现一个简单的列表页面,每行cell都一个按钮,点击按钮前面数字➕1操作。

核心代码:

:::

// Controller
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    __weak typeof(self) wealSelf = self;
    MVCTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell_identifer"];
    if(cell == nil){
        cell = [[MVCTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell_identifer"];
    }
    DemoModel *model = self.dataArray[indexPath.row];
    [cell loadDataWithModel:model];
    cell.clickBtn = ^{
        NSLog(@"id===%ld",model.num);
        [wealSelf changeNumWithModel:model];
    };
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;
}
/*
* 用户点击事件通过Block传递过来后,在Controller层处理更新Mdoel以及更新视图的逻辑
*/
- (void)changeNumWithModel:(DemoModel*)model{

    model.num++;
    NSIndexPath *path = [NSIndexPath indexPathForRow:model.Id inSection:0];
    [self.mainTabelView reloadRowsAtIndexPaths:@[path] withRowAnimation:UITableViewRowAnimationLeft];
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

:::

可以看到用户点击事件通过Block传递过来后,在Controller层处理更新Mdoel以及更新视图的逻辑

# MVP设计模式

Screenshot-2023-08-27-at-09

MVP

M: Model 数据层 代表一组描述业务逻辑和数据的类。它制定了更改和操作数据的规则

V: View 视图层,负责呈现从数据层传递的数据渲染工作,以及与用户的交互,这里把Controller层也合并到视图层

P: Presenter层,presenter 从 View 获取输入,在 model 的帮助下处理数据,并在处理完成后将结果传递回 view。

可以看到 MVP模式跟原始的MVC模式非常相似,完全实现了View与Model层的分离,而且把业务逻辑放在了Presenter层中,视图需要的所有数据都从Presenter获取,而View与 Presenter通过协议进行事件的传递。

MVP 是 MVC 设计模式的衍生品,该模式专注于改进展示逻辑

用户的交互逻辑

用户点击 View(视图) --> 视图响应事件 -->通过代理传递事件到Presenter-->发起网络请求更新Model-->Model处理完数据-->代理或通知给视图(View或是Controller)-->改变视图样式-->完成

业务场景:

用户交互输入了某些内容

View将用户输入转化为发送给Presenter

Presenter控制Model接收需要改变的点

Model将更新之后的值返回给Presenter

Presenter将更新之后的模型返回给View

提示

//DemoProtocal
import <Foundation/Foundation.h>

@protocol DemoProtocal <NSObject>
@optional
//用户点击按钮 触发事件: UI改变传值到model数据改变  UI --- > Model 点击cell 按钮
-(void)didClickCellAddBtnWithIndexPathRow:(NSInteger)index;
//model数据改变传值到UI界面刷新 Model --- > UI
-(void)reloadUI;
@end
1
2
3
4
5
6
7
8
9
10

我们把所有的代理抽象出来,成为一个Protocal文件。这两个方法的作用: -(void)didClickCellAddBtnWithIndexPathRow:(NSInteger)index;:Cell视图调用它去Presenter层实现点击逻辑的处理 -(void)reloadUI;: Presenter调用它去更新主视图View或者Controller

提示

//Presenter.h
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import "DemoProtocal.h"

NS_ASSUME_NONNULL_BEGIN

@interface Presenter : NSObject
@property (nonatomic, strong,readonly) NSMutableArray *dataArray;
@property (nonatomic, weak) id<DemoProtocal>delegate;//协议,去更新主视图UI
// 更新 TableView UI 根据需求
- (void)requestDataAndUpdateUI;
//更新 cell UI
- (void)updateCell:(UITableViewCell*)cell withIndex:(NSInteger)index;
@end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

dataArray : 视图需要的数据源

  • (void)requestDataAndUpdateUI;:主视图Controller调用,去更新自己的UI
  • (void)updateCell:(UITableViewCell*)cell withIndex:(NSInteger)index;:更新 Cell的UI

提示

//Controller 层
- (void)iniData{
    self.presenter = [[Presenter alloc] init];
    self.presenter.delegate = self;
    [self.presenter requestDataAndUpdateUI];
}
...

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return self.presenter.dataArray.count;
}
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    MVPTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell_identifer"];
    if(cell == nil){
        cell = [[MVPTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell_identifer"];
    }
    //更新cell UI 数据
    [self.presenter updateCell:cell withIndex:indexPath.row];
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;
}

#pragma mark - DemoProtocal
//Presenter 的代理回调 数据更新了通知View去更新视图
- (void)reloadUI{
    [self.mainTabelView reloadData];
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Controller层初始化Presenter,调用其方法更新自己的UI,可以看到网络数据的获取,处理都在Presenter中,处理完成后通过协议回调给Controller去reload数据

提示

//Cell
- (void)addBtnDown:(UIButton*)btn{
    NSLog(@"%s",__func__);
    if([self.delegate respondsToSelector:@selector(didClickCellAddBtnWithIndexPathRow:)]){
        [self.delegate didClickCellAddBtnWithIndexPathRow:self.index];
    }
}
1
2
3
4
5
6
7

Cell层点击事件通过协议调用,而这个协议方法的实现是在Presenter中实现的。 MVP模式也有自身的缺点,所有的用户操作和更新UI的回调需要定义,随着交互越来越复杂,这些定义都要有很大一坨代码。逻辑过于复杂的情况下,Present本身也会变得臃肿。所以衍生出了MVVM模式。

# MVVM+RAC设计模式

Screenshot-2023-08-27-at-09

MVVM

M: Model 数据层,负责网络数据的处理,数据持久化存储和读取等工作

V: View 视图层,此时的视图层包括Controller,负责呈现从数据层传递的数据渲染工作,以及与用户的交互

VM:ViewModel层, view-model 既是视图层的抽象,又提供了要访问的模型数据的包装。 也就是说,它包含一个可以被转换为视图的模型,并且还包含了一些命令,视图层可以使用这些命令更改模型。

通过架构图可以看到,MVVM模式跟MVP模式基本类似。主要区别是在MVP基础上加入了双向绑定机制。当被绑定对象某个值的变化时,绑定对象会自动感知,无需被绑定对象主动通知绑定对象。可以使用KVO和RAC实现。我们这里采用了RAC的实现方式。关于RAC如果不熟悉的小伙伴可以点这里,我们这篇文章不在涉及。

业务场景:

  • 用户交互输入

  • View将数据直接传送给ViewModel,ViewModel保存这些状态数据

  • 在有需要的情况下,ViewModel会将数据传送给Model

  • Model在更新完成之后通知ViewModel

  • ViewModel从Model中获取最新的模型,并且更新自己的数据状态

  • View根据最新的ViewModel的数据进行重新渲染

# MVVM代码示例

我们这里包括两层视图:主视图Controller以及Cell,分别对应两层ViewModel:ViewModel和CellViewModel

提示

//ViewModel.h

@interface ViewModel : NSObject
//发送数据请求的Rac,可以去订阅获取 请求结果
@property (nonatomic,strong,readonly) RACCommand *requestCommand;
@property (nonatomic,strong) NSArray *dataArr;//返回子级对象的ViewModel
- (CellViewModel *)itemViewModelForIndex:(NSInteger)index;
@end
1
2
3
4
5
6
7
8

RACCommand *requestCommand:提供供主视图调用的命令,调用它去获取网络数据 NSArray *dataArr: 提供供主视图使用的数据源,注意这里不能用NSMutableArray,因为NSMutableArray不支持KVO,不能被RACObserve。

  • (CellViewModel *)itemViewModelForIndex:(NSInteger)index; 根据Cell的index返回它需要的的ViewModel

提示

@interface CellViewModel : NSObject

@property (nonatomic,copy,readonly) NSString *titleStr;

@property (nonatomic,copy,readonly) NSString *numStr;

@property (nonatomic,copy,readonly) RACCommand *addCommand;

- (instancetype)initWithModel:(DemoModel *)model;

@end
1
2
3
4
5
6
7
8
9
10
11

CellViewModel: 暴露出Cell渲染需要的所有数据 RACCommand *addCommand;: 按钮点击事件的指令,触发后需要在CellViewModel里面做处理。

提示

//controller
- (void)iniData{
    self.viewModel = [[ViewModel alloc] init];
    // 发送请求
    RACSignal *signal = [self.viewModel.requestCommand execute:@{@"page":@"1"}];
    [signal subscribeNext:^(id x) {
        NSLog(@"x=======%@",x);
        if([x boolValue] == 1){//请求成功
            [self.mainTabelView reloadData];
        }
    }];
}
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    MVVMTableVIewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell_identifer"];
    if(cell == nil){
        cell = [[MVVMTableVIewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell_identifer"];
    }
    //更新cell UI 数据
    cell.cellViewModel = [self.viewModel itemViewModelForIndex:indexPath.row];
    cell.selectionStyle = UITableViewCellSelectionStyleNone;

    return cell;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

iniData:初始化ViewModel,并发送请求命令。这里可以监听这个完成信号,进行刷新视图操作 cell.cellViewModel = [self.viewModel itemViewModelForIndex:indexPath.row]; 根据主视图的ViewModel去获取Cell的ViewModel,实现cell的数据绑定。

提示

//TableViewCell

    RAC(self.titleLabel,text) = RACObserve(self, cellViewModel.titleStr);
    RAC(self.numLabel,text) = RACObserve(self, cellViewModel.numStr);

    [[self.addBtn rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(id x) {
        NSLog(@">>>>>");
        [self.cellViewModel.addCommand execute:nil];
    }];

1
2
3
4
5
6
7
8
9
10

在Cell里面进行与ViewModel的数据绑定,这边有个注意Racobserve左边只有self右边才有viewModel.titleStr这样就避Cell重用的问题。 [self.cellViewModel.addCommand execute:nil];:按钮的点击方法触发,事件的处理在CellViewModel中。

编辑 (opens new window)
上次更新: 2023/10/28, 15:22:03
iOS组件化系列
OC跟webview交互系列

← iOS组件化系列 OC跟webview交互系列→

最近更新
01
数组
10-25
02
数组双指针系列之对撞指针
10-25
03
数组双指针系列之快慢指针
10-25
更多文章>
Theme by Vdoing | Copyright © 2019-2024 Evan Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式