很早就知道有这三个概念，但是一直都不清楚是怎么回事，在网上搜索，都是泛泛而谈，没有具体例子，新手是看不懂的，直到找到这篇文章，我对这三个架构有了更清楚的了解。
从一个简单的例子去研究这三个架构。
注意，MVC，MVP，MVVM中的C，P，VM，下文都要controller指代。
需求如下
界面上显示100，以及两个按钮，其中一个点一下加1，另外一个点一下减1
如图
诚然，这么简单的需求，并不需要用什么架构去完成，可是如果是复杂的需求，要长篇大论才能说完，所以只拿简单的来做例子，实际开发中，你在完成一个需求之前，是需要好好掂量是否要用架构，要的话，用什么架构（不局限于这三个），架构里面又要用什么设计模式等等。经过我的实践，发现，即使是架构改变了，view是可以完全不变的，所以先展现view层的代码。
html部分
<span id="text">100</span><button id="upBtn">up</button><button id="downBtn">down</button>
js部分
function $(id) { ?return document.querySelector(`#${id}`);}function View(controller) { ?const upBtn = $(‘upBtn‘); ?const downBtn = $(‘downBtn‘); ?const textSpan = $(‘text‘); ?this.render = function(model) { ???textSpan.innerHTML = model.getValue(); ?} ?upBtn.onclick = controller.up; ?downBtn.onclick = controller.down;}render方法是核心，方法名称不能改（后面要依赖这个render方法），其中要实现数据的展示逻辑，然后是一些点击事件的绑定
MVC
model层
function Model() { ?let value = 100; ?this.up = function() { ???value += 1; ?}; ?this.down = function() { ???value -= 1; ?}; ?this.getValue = function() { ???return value; ?};}保存数据，并提供访问，修改数据的方法，如果仅仅是这样，那么当model改变时，view是不知道的，所以需要让model去通知view，我数据改变了，你要更新了。怎么做呢？利用观察者模式。在model中，增加一个数组views，去保存这个model对应的视图，在修改数据的时候，遍历views数组，调用每个view的render方法，参数是自己。
修改后的model
function Model() { ?let value = 100; ?const self = this; ?const views = []; ?this.up = function() { ???value += 1; ?}; ?this.down = function() { ???value -= 1; ?}; ?this.getValue = function() { ???return value; ?}; ?this.broadcast = function() { ???views.forEach(view => view.render(self)); ?}; ?this.subscribe = function(cb) { ???views.push(cb); ?}}仔细看修改后的model，虽然增加了通知的方法（broadcast），但是在修改数据的方法（up和down）中并没有去通知视图。这个工作是由controller承担的，另外把view注册到model中，也是controller做的。
controller层
function Controller() { ?let view = null; ?let model = null; ?this.up = function() { ???// 修改数据 ???model.up(); ???// 通知视图 ???model.broadcast(); ?}; ?this.down = function() { ???model.down(); ???model.broadcast(); ?} ?this.init = function() { ???view = new View(this); ???model = new Model(); ???// 把视图注册到model中 ???model.subscribe(view); ?}}可以看到，controller把自己传给了view去创建视图，同时保存引用，创建model后，把view注册到model中。同时实现了，改变数据，通知视图的工作。
请一定要好好理解MVC，后面的MVP，MVVM都只是稍加修改而已。
MVP
在MVC中，改变数据，通知视图，都是在controller做的，注册视图，以及通知视图，这两个方法的实现，都是model完成的，既然model负责数据处理，这两个工作实际上和改变数据是没关系的，把他们都转移到controller中，不仅可以让model层专注于数据处理，同时也方便多个视图共用一个controller
model层
function Model() { ?let value = 100; ?this.up = function() { ???value += 1; ?}; ?this.down = function() { ???value -= 1; ?}; ?this.getValue = function() { ???return value; ?};}model层更小了，删除了注册，通知方法，只保存数据和提供获取，修改数据的方法
controller层
function Controller() { ?let views = []; ?let model = null; ?function broadcast() { ???views.forEach(view => view.render(model)); ?} ?this.up = function() { ???model.up(); ???broadcast(); ?}; ?this.down = function() { ???model.down(); ???broadcast(); ?} ?this.init = function() { ???views.push(new View(this)); ???model = new Model(); ?}}controller，增加了广播方法，该方法的实现和调用都在controller中，另外，如果想多个视图共用一个controller，如果这多个视图都是同一个model，上面代码能够胜任，如果是这多个视图是不同的model，那就要自己去实现好view和model的对应关系了（要用map来存储对应关系，一个数组做不到）。
MVVM
可以看到，在MVP中，model也有一个up方法，controller也有一个up方法，只是增加了一个广播方法的调用。是不是有些重复呢？把这两个类似的方法整合到controller，model只负责保存数据，不实现修改数据的逻辑，这就是MVVM了，极大地精简model
model层
function Model() { ?let value = 100; ?this.getValue = function() { ???return value; ?}; ?this.setValue = function(v) { ???value = v; ?}}其实，不用函数，单纯地用一个变量，也是可以的，但是为了view层不变，view层中依赖model的getValue方法，所以这里还是用函数去实现model
controller层
function Controller() { ?let views = []; ?let model = null; ?function broadcast() { ???views.forEach(view => view.render(model)); ?} ?this.up = function() { ???model.setValue(model.getValue() + 1); ???broadcast(); ?}; ?this.down = function() { ???model.setValue(model.getValue() - 1); ???broadcast(); ?} ?this.init = function() { ???views.push(new View(this)); ???model = new Model(); ?}}精简model的代价是controller要做更多的事情，实现修改数据的逻辑，通知视图。如果用框架，react或者vue，通知视图这部分框架会帮你实现，只要实现数据修改的逻辑就好了。
至此，三个架构都讲完了，如果错误，欢迎讨论。
代码可在github上下载，需要node环境。
参考资料：http://www.cnblogs.com/zhouyangla/p/6936455.html
实例说明MVC,MVP,MVVM架构
原文地址：http://www.cnblogs.com/maoscut/p/7623462.html