MVC，MVP，MVVM架构模式

MVC（model-view-controller）

MVC概念解释
MVC：MVC是三个单词的首字母缩写，它们分别是Model（模型），View（视图）和Controller（控制器）

• Model：数据层，是应用程序中用于处理应用程序数据逻辑的部分。
• View：视图层，它是提供给用户操作的界面，是程序的外壳，是应用程序中处理数据显示的部分。
• Controller：控制层，它负责根据用户从视图层输入的指令，选取数据层中的数据，然后对其进行相应的操作，产生最终结果。
  
  理解：
  用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）
  三层的联系：
  这三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。这样一来，软件就可以实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。

MVP（model-view-presenter）

MVP概念解释：
MVP是把MVC中的Controller换成了Presenter，它完全切断了view和model的联系，由Presenter充当桥梁，做到了View-Model之间通信的完全隔离。

• Model：数据层，是应用程序中用于处理应用程序数据逻辑的部分。
• View：视图层，它是提供给用户操作的界面，是程序的外壳，是应用程序中处理数据显示的部分。
• Presenter：Presenter既是中间人，在View和Model之间起到桥梁的作用，又是一个独立的大模块，封装了业务的复杂度，将UI和业务逻辑拆分开来，使UI和业务都可以独立的进行变化。从整体的数据流向上看，Presenter从Model层获取数据，并通过接口发送给View层展示；View层将用户交互传递给Presenter，由Presenter完成相应的业务逻辑，这其中可能会有Model层的参与，比如Presenter调用Model层的接口来保存数据。
  

MVVM（model-view-viewModel）

MVVM产生背景：
在ASP中，一个asp文件就是一个HTML，但是，需要替换的变量用特殊的<%=var%>标记出来了，再配合循环、条件判断，创建动态HTML就比CGI要容易得多。
但是，一旦浏览器显示了一个HTML页面，要更新页面内容，唯一的方法就是重新向服务器获取一份新的HTML内容。如果浏览器想要自己修改HTML页面的内容，就需要等到1995年年底，JavaScript被引入到浏览器。
有了JavaScript后，浏览器就可以运行JavaScript，然后，对页面进行一些修改。JavaScript还可以通过修改HTML的DOM结构和CSS来实现一些动画效果，而这些功能没法通过服务器完成，必须在浏览器实现。
用JavaScript在浏览器中操作HTML，经历了若干发展阶段：

1. 第一阶段：直接用JavaScript操作DOM节点，使用浏览器提供的原生API：

var dom = document.getElementById('name');
dom.innerHTML = 'Homer';
dom.style.color = 'red';

2. 第二阶段，由于原生API不好用，还要考虑浏览器兼容性，jQuery横空出世，以简洁的API迅速俘获了前端开发者的芳心：

 $('#name').text('Homer').css('color', 'red');

3. MVC模式，需要服务器端配合，JavaScript可以在前端修改服务器渲染后的数据。

理解：
MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

设计思想：
关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！

MVVM和MVC的区别和联系

举个栗子：
假如我想在一个模块中显示一段文字，这段文字是从网上获取下来的。那么使用MVC的话，在C中肯定需要一个UILabel（V）作为属性来显示这段文字，而这段文字由谁来获取呢，肯定是由M来获取了。而获取的地方在哪里呢？通常在C的生命周期里面，所以往往是在C的一个生命周期方法比如viewDidLoad里面调用M获取数据的方法来获取数据。现在问题来了，M获取数据的方法是异步的网络请求，网络请求结束后，C才应该用请求下来的数据重新赋值给V，现在的问题是，C如何知道网络请求结束了？

这里我们一定要换一种角度去思考，我们进一步考虑M和V之间的关系：它们应该是一种同步的关系，也就是，不管任何时刻，只要M的值发生改变，V的显示就应该发生改变（显示最新的M的内容）。所以我们可以关注M的值改变，而不用关心M的网络请求是否结束了。实际上C根本不知道M从哪去拿的数据，C的责任是负责把M最新的数据赋值给V。所以C应该关注的事件是：M的值是否发生了变化。

在MVVM中，Controller不再像MVC那样直接持有Model了。想象Controller是一个Boss，数据是一堆文件（Model），如果现在是MVC，那么数据解析（比如整理文件）需要由Boss亲自完成，然而实际上Boss需要的仅仅是整理好的文件而不是那一堆乱七八糟的整理前的文件。所以Boss招聘了一个秘书，现在Boss就不再需要管理原始数据（整理之前的文件）了，他只需要去找秘书：你帮我把文件整理好后给我。那么这个秘书就首先去拿到文件（原始数据），然后进行整理（数据解析），接下来把整理的结果给Boss。所以秘书就是VM了，并且Controller（Boss）现在只需要直接持有VM而不需要再持有M了。如果再进一步理解C、VM、M之间的关系：因为Controller只需要数据解析的结果而不关心过程，所以就相当于VM把“如何解析Model”给封装起来了，C甚至根本就不需要知道M的存在就能把工作做好，前提它需要持有一个VM。那么我们MVVM中的持有关系就是：C持有VM，VM持有M。

使用MVC的目的就是将M和V的代码分离。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，只是在MVC的基础上增加了一层VM，只不过是弱化了C的概念，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

总结：

• MVC模型中，C为（controller）。主要处理逻辑为：View触发事件，controller响应并处理逻辑，调用Model，Model处理完成后将数据发送给View，View更新。
• MVP模型中，P为Presenter，并以Presenter为核心，负责从model获取数据，并填充到View中。该模型使得Model和View不再有联系，且View被称为“被动视图”，暴露出setter接口。
• MVVM模型中，VM为ViewModel，同样是以VM为核心，但是不同于MVP，MVVM采用了数据双向绑定的方案，替代了繁琐复杂的DOM操作。该模型中，View与VM保持同步，View绑定到VM的属性上，如果VM数据发生变化，通过数据绑定的方式，View会自动更新视图；VM同样也暴露出Model中的数据。

【🌟🌟❤️🌟🌟】

看到这里了就点个赞支持下吧，你的「赞」是我创作的动力。
来自：一位喜欢前端的杰迷

【🌟🌟❤️🌟🌟】