说实话，我觉得MVC和MVVM框架没有什么难的，直到我想写一篇文章系统地解释它们。我遇到过以下问题，1.不同的文章说的不一样2.没有明确的大纲和框架分类。于是查了很多资料，希望能从自己的角度，用通俗易懂的语言，解释一下前端框架的演变过程。1Evolution目的Evolution目的：用一种简单的方法来处理越来越复杂的View层。一开始View层很简单，甚至没有图片；越来越复杂。现在，前端页面会有很多复杂的交互逻辑和用户体验。如果仍然使用旧的框架，将很难维护View层的运行。这是前端框架不断进化的主要原因。2框架的分类框架的分类：讨论框架必须结合应用场景和历史背景70年代，MVC诞生了。它最初是应用于GUI程序（图形界面程序）而不是WEB程序——对于这种MVC，我们称之为经典MVC。后来，WEB程序上的MVC是经典MVC的变种；而且在WEB程序上后端MVC和前端MVC也会有一些区别。所以，不分清楚应用场景和历史背景就把经典MVC和WEBMVC混在一起是非常不负责任的。另外，不管MVC、MVP、MVVM及其众多变种MVX，本质上都是三层结构。Model管理数据和业务逻辑View渲染页面X负责这两者的关系总而言之，看下面的内容。3.MVC的第二部分前面已经说了，因为MVC的变种很多，不结合应用场景和历史背景的讨论都是耍流氓。3.1经典MVC70年代，因为没有操作系统和消息循环，连鼠标光标都需要我们的UI系统自己绘制，所以这时候用户的输入都是由Controller[1]获取的。Controller获取到用户的输入后，调用对应的Model修改数据，同时修改View响应用户的输入。Model的数据修改后，会通??知相关的View。View监听Model，收到通知后修改样式。调用关系如下[2]：3.2WEBMVC我们可以看到WEBMVC和经典MVC在本质上是一样的，都是有一个Controller来修改Model的调用关系。但是，它们之间有两个区别：用户输入从Controller变为View：View接管了Controller的部分功能，负责处理用户输入，但它不必知道下一步要做什么。它依靠控制器为她做出决定或处理用户事件。Controller的作用变小了：在经典MVC中，“Controller是连接用户和系统的纽带”，但在WEBMVC中，View可以委托Controller修改Model，也可以独立处理用户事件。在经典MVC中，Controller要做的大部分工作是将用户输入分发到不同的View中，而这部分工作在WEBMVC中已经由系统完成。[3]因此，在WEBMVC中，Controller变得很瘦，只留下一些验证输入和路由的工作。3.3MVC的优缺点优点：将业务逻辑和显示逻辑分离，模块化程度高。并且当应用逻辑需要改变时，不需要改变业务逻辑和显示逻辑，只需要将Controller换成另一个Controller即可。观察者模式可以同时更新多个视图。缺点：控制器测试困难。因为视图同步操作是由View自己来完成的，而View只能运行在有UI的环境中。在没有UI环境的情况下对Controller进行单元测试时，无法验证应用逻辑的正确性：更新Model时，无法断言View的更新操作。视图不能组件化。视图强烈依赖于特定的模型。很难将此视图提取为另一个应用程序的可重用组件。因为不同程序的DomainModel是不一样的。[1]4.MVVM4.1MVVM感谢前端前辈们，我们没有停留在MVP阶段，而是大踏步的进入了MVVM阶段。其实MVP和MVVM的主要区别在于是否有双向数据绑定。有兴趣的可以看看《浅析 MVC, MVP 与 MVVM之间的异同》自己去了解。在3.2中，我们实现了一个简单的MVC。想象一下，页面上不只有一个按钮，而是有1000个按钮。每个按钮还操作不同的DOM对象，因为MVC无法组件化。这时候，View的逻辑就会变得非常复杂，难以维护。为了解决这个问题，MVVM应运而生。用户与View交互，触发用户事件；View根据事件类型调用ViewModel中相应的响应逻辑；然后ViewModel中的响应逻辑经过适当处理后会调用Model层的接口；接口的调用执行导致Model层数据的变化触发相应的数据变化事件；该事件由ViewModel模块监控；当获取到新的Model数据时，ViewModel中的显示逻辑会修改ViewModel中的state数据；ViewModel中状态数据的变化最终导致View的状态变化完成对用户事件的响应。4.1MVVM的优缺点优点：组件化。视图不依赖于模型。这样View就可以脱离具体的业务场景，写出高复用的组件。提高可维护性。解决了MVP中大量手动View和Model同步的问题，提供双向绑定机制。因为同步逻辑交给了Binder，View和Model同时发生变化，所以你只需要保证Model的正确性，View就会正确。显着减少了对视图同步更新的测试。缺点：过于简单的图形界面不适用5.参考文献《前端设计模式》《浅析 MVC, MVP 与 MVVM之间的异同》《界面之下，还原真实的MV*》《前端MVC变形记》《MVC wiki》《谈谈UI架构设计的演化》《MVC,MVP,MVVM的图示》
