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

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

MV*模式

MVC

Smalltalk-80 MVC解释

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

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

优缺点

• 优点&＃xff1a;逻辑分离&＃xff08;应用逻辑、业务逻辑、展示逻辑&＃xff09;、多视图更新&＃xff08;观察者模式&＃xff09;。
• 缺点&＃xff1a;单元测试困难&＃xff0c;View无法组件化&＃xff08;高度依赖Model&＃xff09;。

前端思考&＃xff1a;

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

MVP

解释

大致与MVC相同&＃xff0c;唯一不同的是Controller变成了Presenter。

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

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

优缺点

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

MVVM

解释

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

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

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

优缺点

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