成熟让步 發表於 2023-3-24 15:23:23

iOS架构从 MVC、MVP 到 MVVM

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>概述</li><li>1.传统的MVC设计模式</li><ul class="second_class_ul"><li>用户的交互逻辑</li><li>iOS开发实际使用的MVC架构</li></ul><li>2.MVP设计模式</li><ul class="second_class_ul"><li>用户的交互逻辑</li><li>MVP代码示例</li></ul><li>3.MVVM+RAC设计模式</li><ul class="second_class_ul"><li>MVVM代码示例</li></ul><li>总结</li><ul class="second_class_ul"></ul></ul></div><p class="maodian"></p><h2>概述</h2>
<p>做了这么多年的客户端研发一直在使用苹果爸爸推荐的MVC架构模式。MVC从应用层面进行分层开发，极大优化了我们的代码结构，简单易上手，很容易被程序员所接受。程序员刚接手一个新项目，如果是MVC的架构模式，会减少代码熟悉时间，快速的进行开发和维护工作，实际上对于多人开发维护的项目，MVC仍然是非常好的架构模式，这也是这种架构模式经久不衰的原因。<br />但是任何事物都有两面性，随着项目需求的增加，业务逻辑、网络请求、代理方法等都往Controller层加塞，导致Controller层变得越来越臃肿，动辄上千行的代码量绝对是维护人员的噩梦，因此在MVC基础上逐渐衍生出来了MVP、MVVM等架构模式。<br />本文是基于OC代码进行阐述的，使用iOS开发经典的 TableView 列表来分析每个架构模式。相信看了这篇文章你会有所领悟。当然一千个人眼中有一千种哈姆雷特，具体在业务开发中使用哪种模式需要你自己去衡量。</p>
<p class="maodian"></p><h2>1.传统的MVC设计模式</h2>
<p style="text-align:center"><img alt="" height="286" src="https://img.jbzj.com/file_images/article/202303/202332495431178.jpg?20232249550" width="769" /></p>
<p>MVC<br />M: Model 数据层，负责网络数据的处理，数据持久化存储和读取等工作<br />V: View 视图层，负责呈现从数据层传递的数据渲染工作，以及与用户的交互工作<br />C: Controller控制器，负责连接Model层跟View层，响应View的事件和作为View的代理，以及界面跳转和生命周期的处理等任务</p>
<p class="maodian"></p><p class="maodian"></p><h3>用户的交互逻辑</h3>
<p>用户点击 View(视图) --&gt; 视图响应事件 --&gt;通过代理传递事件到Controller&ndash;&gt;发起网络请求更新Model&mdash;&gt;Model处理完数据&ndash;&gt;代理或通知给Controller&ndash;&gt;改变视图样式&ndash;&gt;完成</p>
<p>可以看到Controller强引用View与Model，而View与Model是分离的，所以就可以保证Model和View的可测试性和复用性，但是Controller不行，因为Controller是Model和View的中介，所以不能复用，或者说很难复用。</p>
<p class="maodian"></p><h3>iOS开发实际使用的MVC架构</h3>
<p style="text-align:center"><img alt="" height="286" src="https://img.jbzj.com/file_images/article/202303/202332495926321.jpg?202322495948" width="800" /></p>
<p>在实际MVC在我们实际开发中使用的MVC模式可以看到，View与Controller耦合在一起了。这是由于每一个界面的创建都需要一个Controller，而每一个Controller里面必然会带一个View，这就导致了C和V的耦合。这种结构确实可以提高开发效率，但是一旦界面复杂就会造成Controller变得非常臃肿和难以维护。</p>
<p><span style="font-size:14px">MVC代码示例<br />我们要实现一个简单的列表页面，每行cell都一个按钮，点击按钮前面数字➕1操作</span>。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202303/2023324100324707.jpg?202322410354" /></p>
<p>mvcexamp核心代码：</p>
<div class="jb51code"><pre class="brush:cpp;">// Controller
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
   
    __weak typeof(self) wealSelf = self;
    MVCTableViewCell *cell = ;
    if(cell == nil){
      cell = [ initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell_identifer"];
    }
    DemoModel *model = self.dataArray;
    ;
    cell.clickBtn = ^{
      NSLog(@"id===%ld",model.num);
      ;
    };
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;
}
/*
* 用户点击事件通过Block传递过来后，在Controller层处理更新Mdoel以及更新视图的逻辑
*/
- (void)changeNumWithModel:(DemoModel*)model{
   
    model.num++;
    NSIndexPath *path = ;
    withRowAnimation:UITableViewRowAnimationLeft];
}</pre></div>
<p>可以看到用户点击事件通过Block传递过来后，在Controller层处理更新Mdoel以及更新视图的逻辑</p>
<p class="maodian"></p><h2>2.MVP设计模式</h2>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202303/2023324100924142.jpg?202322410948" /></p>
<p>MVPM: Model 数据层，负责网络数据的处理，数据持久化存储和读取等工作<br />V: View 视图层，负责呈现从数据层传递的数据渲染工作，以及与用户的交互，这里把Controller层也合并到视图层<br />P: Presenter层，负责视图需要数据的获取，获取到数据后刷新视图。响应View的事件和作为View的代理。</p>
<p>可以看到 MVP模式跟原始的MVC模式非常相似，完全实现了View与Model层的分离，而且把业务逻辑放在了Presenter层中，视图需要的所有数据都从Presenter获取，而View与 Presenter通过协议进行事件的传递。</p>
<h3>用户的交互逻辑</h3>
<p>用户点击 View(视图) --&gt; 视图响应事件 --&gt;通过代理传递事件到Presenter&ndash;&gt;发起网络请求更新Model&ndash;&gt;Model处理完数据&ndash;&gt;代理或通知给视图(View或是Controller)&ndash;&gt;改变视图样式&ndash;&gt;完成</p>
<p class="maodian"></p><h3>MVP代码示例</h3>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202303/2023324101141797.jpg?202322410124" /></p>
<p>项目结构</p>
<div class="jb51code"><pre class="brush:cpp;">//DemoProtocal
import &lt;Foundation/Foundation.h&gt;


@protocol DemoProtocal &lt;NSObject&gt;
@optional
//用户点击按钮 触发事件： UI改变传值到model数据改变UI --- &gt; Model 点击cell 按钮
-(void)didClickCellAddBtnWithIndexPathRow:(NSInteger)index;
//model数据改变传值到UI界面刷新 Model --- &gt; UI
-(void)reloadUI;
@end</pre></div>
<p>我们把所有的代理抽象出来，成为一个Protocal文件。这两个方法的作用：<br />-(void)didClickCellAddBtnWithIndexPathRow:(NSInteger)index;:Cell视图调用它去Presenter层实现点击逻辑的处理<br />-(void)reloadUI;: Presenter调用它去更新主视图View或者Controller</p>
<div class="jb51code"><pre class="brush:cpp;">//Presenter.h
#import &lt;Foundation/Foundation.h&gt;
#import &lt;UIKit/UIKit.h&gt;
#import "DemoProtocal.h"

NS_ASSUME_NONNULL_BEGIN

@interface Presenter : NSObject
@property (nonatomic, strong,readonly) NSMutableArray *dataArray;
@property (nonatomic, weak) id&lt;DemoProtocal&gt;delegate;//协议，去更新主视图UI
// 更新 TableView UI 根据需求
- (void)requestDataAndUpdateUI;
//更新 cell UI
- (void)updateCell:(UITableViewCell*)cell withIndex:(NSInteger)index;
@end
</pre></div>
<p>dataArray : 视图需要的数据源<br />- (void)requestDataAndUpdateUI;:主视图Controller调用，去更新自己的UI<br />- (void)updateCell:(UITableViewCell*)cell withIndex:(NSInteger)index;:更新 Cell的UI</p>
<div class="jb51code"><pre class="brush:cpp;">//Controller 层
- (void)iniData{
    self.presenter = [ init];
    self.presenter.delegate = self;
    ;
}
...

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return self.presenter.dataArray.count;
}
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    MVPTableViewCell *cell = ;
    if(cell == nil){
        cell = [ initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell_identifer"];
    }
    //更新cell UI 数据
    ;
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;
}

#pragma mark - DemoProtocal
//Presenter 的代理回调 数据更新了通知View去更新视图
- (void)reloadUI{
    ;
}</pre></div>
<p>Controller层初始化Presenter，调用其方法更新自己的UI，可以看到网络数据的获取，处理都在Presenter中，处理完成后通过协议回调给Controller去reload数据</p>
<div class="jb51code"><pre class="brush:cpp;">//Cell
- (void)addBtnDown:(UIButton*)btn{
    NSLog(@"%s",__func__);
    if(){
        ;
    }
}</pre></div>
<p>Cell层点击事件通过协议调用，而这个协议方法的实现是在Presenter中实现的。</p>
<p>MVP模式也有自身的缺点，所有的用户操作和更新UI的回调需要定义，随着交互越来越复杂，这些定义都要有很大一坨代码。逻辑过于复杂的情况下，Present本身也会变得臃肿。所以衍生出了MVVM模式。</p>
<p class="maodian"></p><h2>3.MVVM+RAC设计模式</h2>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202303/2023324102240997.jpg?202322410239" /></p>
<p>MVVM<br />M: Model 数据层，负责网络数据的处理，数据持久化存储和读取等工作<br />V: View 视图层，此时的视图层包括Controller，负责呈现从数据层传递的数据渲染工作，以及与用户的交互<br />VM:ViewModel层，负责视图需要数据的获取，获取到数据后刷新视图。响应View的事件和作为View的代理等工作。<br />通过架构图可以看到，MVVM模式跟MVP模式基本类似。主要区别是在MVP基础上加入了双向绑定机制。当被绑定对象某个值的变化时，绑定对象会自动感知，无需被绑定对象主动通知绑定对象。可以使用KVO和RAC实现。我们这里采用了RAC的实现方式。关于RAC如果不熟悉的小伙伴可以点这里,我们这篇文章不在涉及。</p>
<p class="maodian"></p><h3>MVVM代码示例</h3>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202303/2023324102402789.jpg?2023224102423" /></p>
<p>我们这里包括两层视图：主视图Controller以及Cell，分别对应两层ViewModel：ViewModel和CellViewModel</p>
<div class="jb51code"><pre class="brush:cpp;">//ViewModel.h

@interface ViewModel : NSObject
//发送数据请求的Rac，可以去订阅获取 请求结果
@property (nonatomic,strong,readonly) RACCommand *requestCommand;
@property (nonatomic,strong) NSArray *dataArr;//返回子级对象的ViewModel
- (CellViewModel *)itemViewModelForIndex:(NSInteger)index;
@end</pre></div>
<p>RACCommand *requestCommand:提供供主视图调用的命令，调用它去获取网络数据<br />NSArray *dataArr: 提供供主视图使用的数据源，注意这里不能用NSMutableArray，因为NSMutableArray不支持KVO，不能被RACObserve。<br />- (CellViewModel *)itemViewModelForIndex:(NSInteger)index; 根据Cell的index返回它需要的的ViewModel</p>
<div class="jb51code"><pre class="brush:cpp;">@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</pre></div>
<p>CellViewModel: 暴露出Cell渲染需要的所有数据<br />RACCommand *addCommand;: 按钮点击事件的指令，触发后需要在CellViewModel里面做处理。</p>
<div class="jb51code"><pre class="brush:cpp;">//controller
- (void)iniData{
    self.viewModel = [ init];
    // 发送请求
    RACSignal *signal = ;
    [signal subscribeNext:^(id x) {
        NSLog(@"x=======%@",x);
        if( == 1){//请求成功
            ;
        }
    }];
}
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    MVVMTableVIewCell *cell = ;
    if(cell == nil){
        cell = [ initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell_identifer"];
    }
    //更新cell UI 数据
    cell.cellViewModel = ;
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
        
    return cell;
}</pre></div>
<p>iniData:初始化ViewModel，并发送请求命令。这里可以监听这个完成信号，进行刷新视图操作<br />cell.cellViewModel = ; 根据主视图的ViewModel去获取Cell的ViewModel，实现cell的数据绑定。</p>
<div class="jb51code"><pre class="brush:cpp;">//TableViewCell

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

    [ subscribeNext:^(id x) {
        NSLog(@"&gt;&gt;&gt;&gt;&gt;");
        ;
    }];</pre></div>
<p>在Cell里面进行与ViewModel的数据绑定，这边有个注意Racobserve左边只有self右边才有viewModel.titleStr这样就避Cell重用的问题。<br />;:按钮的点击方法触发，事件的处理在CellViewModel中。</p>
<p class="maodian"></p><h2>总结</h2>
<p>到此这篇关于iOS架构从 MVC、MVP 到 MVVM的文章就介绍到这了,更多相关浅谈MVC的内容请搜索琼殿技术社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持琼殿技术社区！。</p>
                           
                            <div class="art_xg">
                              <b>您可能感兴趣的文章:</b><ul><li>SpringMVC之异常处理解读</li><li>Spring&nbsp;MVC&nbsp;图片的上传和下载功能</li><li>Spring&nbsp;MVC注解式开发示例完整过程</li></ul>
                            </div>

                        </div>
                        <!--endmain-->
頁: [1]
查看完整版本: iOS架构从 MVC、MVP 到 MVVM