没有后端基础如何理解MVC、MVP和MVVM，可以以JavaScript举例吗？

谢谢邀请！

什么是MVC以及它的作用？

MVC是一种分层架构模式，M代表数据模型以及相关数据处理逻辑，V就是用户界面，C代表控制器（可以认为它是逻辑处理路由）！通常的情景是用户操作了可视界面（V），用户的信息传递给了控制器，控制器把用户指令分发给对应的数据层（M），最终数据层处理好数据后，将最新的数据反映到界面上！MVC的作用是将以前杂乱的代码分层解耦，使得代码具有更好的维护性！

如何理解MVC？

在后端的知识体系中，MVC更容易理解！不过在前端中，我们有nodejs可以做后端，我们就拿nodejs举例！

我们把用户操作的界面看作View层，用户操作浏览器后，请求来到服务端，路由将请求交给Controller，Controller调用对应的服务处理数据，数据处理后返回响应！这里我将Router和Controller放在一起，Service和db放在了一起！这样代码调理清晰，对代码增删改查都会非常方便！

如果仅仅是浏览器端的逻辑，也可以采用MVC架构，例如Backbone.js，方式如下：

1、dom 是 View层

2、对dom的事件绑定，可以看作Controller

3、将原始数据和数据的操作封装成数据模型（对象）

4、Controller调用不同的数据模型处理数据

5、数据处理完成后，采用观察者模式及时更新View

什么是MVP、MVVM？

其实MVP和MVVM是MVC的变种，Model和View没有直接的联系了，而是通过中间的那一层进行桥接！目前市场比较流行MVVM模式，比如VUE、REACT等！

总结

不管是哪一种架构模式，其实都是为了方便我们开发和维护，个人认为没有严格的标准去限定有多少层以及层与层的联系，只要适用于业务就是好的架构模式！

MVC、MVP、MVVM这些模式是为了解决开发过程中的实际问题而提出来的，目前作为主流的几种架构模式而被广泛使用。

MVC、MVP、MVVM 三者特点

MVC(同步通信为主) ：Model、View、Controller

MVP(异步通信为主) ：Model、View、Presenter

MVVM(异步通信为主)：Model、View、ViewModel

什么是MVC 模式？

MVC 模式代表 Model-View-Controller（模型-视图-控制器） 模式。这种模式用于应用程序的分层开发。

1. Model（模型） - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。
2. View（视图） - 视图代表模型包含的数据的可视化。
3. Controller（控制器） - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。

什么是MVP模式?

MVP 全称是Model - View - Presenter ，是模型(model)－视图(view)－呈现器(presenter)的缩写。

MVP是把MVC中的Controller换成了Presenter（呈现），目的就是为了完全切断View跟Model之间的联系，由Presenter充当桥梁，做到View-Model之间通信的完全隔离。

1. Model：业务逻辑和数据处理(数据库存储操作，网络数据请求，复杂算法，耗时操作)。
2. View : 对应于Activity，负责View的绘制以及与用户交互。
3. Presenter：负责完成View于Model间的交互 (有一点还需要注意，presenter是双向绑定的关系，因此，在设计的时候就要注意接口和抽象的使用，尽可能的降低代码的耦合度，这也是mvp的宗旨)。

什么是MVVM模式？

MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。

如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。

MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js，Anfular JS

为什么要使用MVVM？

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处

• 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变， 当Model变化的时候View也可以不变。
• 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
• 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
• 可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写

我王者局局mvp

不需要后端基础来理解mvc mvp mvvm。

mvc 就是模型试图控制器，模型类似数据schema，就是这个要渲染视图的数据结构；v就是模板，用于将数据格式化展示；c就是控制器，控制使用哪个模板，并将model与视图做映射，这样模型的数据就绘制到视图了。一般在controller和model中间会加一个service来处理下业务。

mvp跟mvc挺像，所不同是p是presenter，用来替代c，这种模式下，不再是model直接映射到模板，而是通过presenter来把model数据拿到，然后由presenter这个代理器来将数据写入到视图，这样视图与model进行了解绑，开发变得更灵活，presenter还可以操控数据。

mvvm就是从模型数据直接到视图再从视图到模型。这样去掉了v或者p，不再需要一层控制器或者代理器。这样的好处就是，针对数据模型编程，改变了数据也就是改变了视图，由框架来把视图和数据的联动搞定，开发者更多关心是数据逻辑开发，而复杂的dom操作，事件处理交给了框架。这样大型开发会变得容易些。m到v就是要监听到数据的变动，比如defineProperty、proxy、不停数据检测等方式来获知数据发生了改变，然后将改变后的数据更新到视图上；v到m就是监听dom的更新事件，凡事dom更新则将对应model更新。

其实实际工作中仍然会三者有些结合或借鉴。目前大多采用mvvm框架，但是模型仍然是需要独立的，而且也需要service来进行承接，视图与模型的对应也可以视图对应的代理器完成。

有时候我们为了实现松耦合和代码的易维护性，尽量将数据和视图以及连接器等解藕，这时候你觉得哪种实践最合适就怎么做，也不必拘泥于某个固定的形式。

汗啊。JS不就是MVC中的C吗？

这么一说不就很容易理解了吧？

HTML是M

CSS是V

M:有什么

V:什么样

C:怎么样

mvc和mvp基本是一个东西，区别只在于view是否直接操纵model，mvvm则是双向绑定，view可以直接修改model，反过来model的改变直接反应在view上。从js来看，node的express就是mvc，而angular则是mvvm