MVC, MVP, MVVM

参考：https://shenlvmeng.github.io/blog/2017/05/12/Frontend-FAQ-part1/

框架模式不是一门写代码的学问，而是一门管理与组织代码的学问。其本质是一种软件开发的模型。与设计模式不同，设计模式是在解决某类特定问题时总结抽象出的公共方法，是方法论的范畴，一种框架模式往往使用了多种设计模式，且和技术栈有耦合的关系。

视图（View）从本质上讲是数据在图像上的一种体现和映射。用户在操作图像时可以达到操作数据的目的，在数据更改后，需要重新将数据映射到视图上。这实际上就是MVC的出发点。

image.png

• View: 放置视图相关的代码，原则上里面不应该有任何业务逻辑。
• Controller: 放置视图与模型之间的映射，原则上这里应该很薄，他只放一些事件绑定相关的代码(router)，但并不实现真正的功能，他只是一个桥梁。
• Model: 这里的model不是说实体类，它是主要实现业务逻辑的地方。

开发流程是先创建视图组件，再将之关联到Model上，通过View修改Model中的值时，Model会触发绑定在之上的所有View的更新。Backbone是个MVC典型的例子。这么做部分分离了视图和逻辑。但是，在情况复杂时，Model的代码量将会大大膨胀。

MVP因此而生，其中Presenter（分发器）代替了原来的Controller，分担了Model的部分功能。针对上面的问题，Presetner隔断了Model和View，当M改变时，会通知P去更新视图。业务逻辑和绑定逻辑从V和M中分离出来到P中。使得MVP三方分工更加鲜明。绝大多数的PHP框架都是MVP类型的。

image.png

MVVM是Model-View-ViewModel的缩写。在MVVM中，View和ViewModel是双向或单向数据绑定的关系。当ViewModel反应了Model中的数据模型，并绑定到视图属性上，反过来，视图属性变化后也会通过ViewModel影响Model。React，Vue这些流行的前端框架都是MVVM类型的。

image.png

不管是MVC还是MVP或MVVM，他们都是数据驱动的。核心上基于M推送消息，V或P来订阅这个模型。使用者需要维护的不再是UI树，而是抽象的数据。当UI的状态一旦多起来，这种框架模式的优势就很明显了。