写点什么

MVVP:一种基于状态的架构模式的设计与实现

用户头像
行者
关注
发布于: 2021 年 04 月 06 日

1、常见架构模式

MVC

MVC 模式的意思是,软件可以分成三个部分。



  • 视图(View):用户界面。

  • 控制器(Controller):业务逻辑

  • 模型(Model):数据保存


MVP

MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。



1. 各部分之间的通信,都是双向的。

2. View 与 Model 不发生联系,都通过 Presenter 传递。

3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter 非常厚,所有逻辑都部署在那里。

MVVM

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



唯一的区别是,它采用双向绑定(data-binding):View 的变动,自动反映在 ViewModel,反之亦然。


2、什么是 MVVP 模式,为什么要用 MVVP


什么是 MVVP


MVVP 是 MVP 的升级版本。MVVP 比 MVP 多了一个ViewState状态,MVVP 是一种基于ViewState状态机的新型架构模式。

为什么要用 MVVP


为什么要用 MVVP 呢? MVP 和 MVVM 难道不够用吗? 下面来详细解答一下。

在 MVP 中,View 和 Presenter 是直接交互的,View 的状态变化,都是通过 Presenter 直接改变和传递。 这会有几个问题:


  • View 和 Presenter 的强耦合: View 和 Presenter 直接调用,不相互独立

  • 无法跟踪视图的状态变化。对于视图中发生的不同状态变化,没有可追溯性

  • 可测试性不足,特别是 MVVM,只能通过观察属性的变化来进行测试

  • 多线程环境中可能会有状态冲突的问题


基于以上的存在的几个问题,让我们在 MVP 架构中引入一个新的概念ViewStateViewState代表视图当前的状态快照。与其在视图模型的不同位置设置不同的输出,不如每次都设置一个新的视图状态。

ViewState代码实例


举个例子,ProductListViewController是商品列表的页面,我们定义此页面的ViewStateProductListViewStateViewController视图的变化都是通过 render(state: ProductListViewState) 函数来渲染和变化的,render函数的入参就是ProductListViewState,通过ViewState的变化更新视图,从而实现视图随状态更新而变化。



enum ProductListViewState { case loading case loaded([Product]) case error(Error)}
class ProductListViewController { func render(state: ProductListViewState) { switch state { case .loading: renderLoading() case .loaded(let products): render(products) case .error(let error): render(error) } }}
复制代码


MVVP 新架构图


MVVP 架构图如下所示:



通过状态机 ViewState 这一桥梁,能够很好地把 Presenter、Model、ViewController 三者分离开来,实现解耦的目的。这样各自的职责更清晰,分工更明确,具有良好的可测试性。


3、MVVP 代码实例


写了一个简单的 Example, 放在 GitHub 上,供大家下载和参考。欢迎大家 star,如果有问题或者更好的建议也可以在 github 上提一下 issue。


Github 示例代码下载地址: https://github.com/SwiftyKit/MVVP


发布于: 2021 年 04 月 06 日阅读数: 25
用户头像

行者

关注

还未添加个人签名 2020.05.13 加入

还未添加个人简介

评论

发布
暂无评论
MVVP:一种基于状态的架构模式的设计与实现