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的繁琐步骤中解脱出来！