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

1、常见架构模式

MVC

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

image

• 视图（View）：用户界面。

• 控制器（Controller）：业务逻辑

• 模型（Model）：数据保存

MVP

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

image

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

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

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

MVVM

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

image

唯一的区别是，它采用双向绑定（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 架构中引入一个新的概念ViewState。ViewState代表视图当前的状态快照。与其在视图模型的不同位置设置不同的输出，不如每次都设置一个新的视图状态。

ViewState代码实例

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

复制代码

MVVP 新架构图

MVVP 架构图如下所示：

image

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

3、MVVP 代码实例

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

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