理解MVC、MVP、MVVM在干什么，进化的原因。

本文参考 戴嘉华《界面之下：还原真实的MV*模式》。以下是我学习的笔记，和些许个人的思考。

MV*模式

MVC

Smalltalk-80 MVC解释

• View：管理用户界面的层次。
• Model：提供操作数据的接口，执行业务逻辑。
• Controller：View和Model之间的协作。

用户对View操作后，View将处理的权限移交给Controller。Controller进行应用逻辑（调Model哪个接口、对View数据预处理…），具体的业务逻辑交给Model。当Model变更时通过观察者模式告诉View，View收到消息后向Model请求最新的数据，更新界面。

优缺点

• 优点：逻辑分离（应用逻辑、业务逻辑、展示逻辑）、多视图更新（观察者模式）。
• 缺点：单元测试困难，View无法组件化（高度依赖Model）。

前端思考：

1. 前端由于HTTP是单工协议，服务端无法向前端发送消息（websocket除外），只能前端发送请求到后端。
2. MVC模式有点类似于Vuex。在Vuex中，更改state状态的唯一方法就是提交mutation，即业务逻辑。进行应用逻辑的类似于action，action中提交的是mutation。展示逻辑就类似于Getters，负责将数据归纳整理，提供给页面想要的数据。

MVP

解释

大致与MVC相同，唯一不同的是Controller变成了Presenter。

用户对View操作后，View将处理的权限移交给Presenter。Presenter进行应用逻辑（调Model哪个接口、对View数据预处理…），具体的业务逻辑交给Model。

不同的是，当Model变更时通过观察者模式告诉Presenter，Presenter通过View提供的接口告诉View。

优缺点

• 优点：便于对Presenter单元测试、View可组件化。
• 缺点：Presenter变得臃肿，不仅有应用逻辑，还有同步逻辑。

MVVM

解释

大致与MVP相同，唯一不同的是将Presenter中的同步逻辑分给了“Binder”。Binder主要是负责View和Model双向绑定。

用户对View操作后，View将处理的权限移交给View-Model。View-Model进行应用逻辑（调Model哪个接口、对View数据预处理…），具体的业务逻辑交给Model。

不同的是，当Model变更时，通过Binder自动把数据更新到View上。当用户对View操作时，也会自动更新到Model。

优缺点

• 优点：解决了大量同步问题，提高代码可维护性。便于测试，由于Binder的存在，Model正确即View正确，减少View同步更新测试。
• 缺点：建立大量View-Model、数据绑定以指令写在View中不便测试。