前端开发时，常接触到MVC，MVP和MVVM这些名词，它们都是软件架构设计的一种方式，最初都是为桌面应用软件的设计而实现的，后来有了应用在WEB上的变体，《到底什么是MVC？》这篇文章有详细的介绍。那他们在WEB前端如何应用呢？

MVC

先看下MVC（Model-View-Controller）的概念：

Model：定义数据模型，实现业务逻辑，当数据发生变化时，通过事件通知View来更新。
View：界面视图，能从Model获取数据。
Controller：响应用户的界面交互操，能调用Model执行业务逻辑。

真正意义上的MVC，不适合在前端实现，因为用户通过浏览器来操作界面，都是先由View来响应。Backbone.js常被称为是前端的MVC框架，实际并不是，用户的与界面的交互还是先到View，它的Controller只是做为路由器。

MVP

再看下MVP（Model-View-Presenter）的概念，MVP可分为Supervising Controller和Passive View模式：

• Supervising Controller模式

Model：定义数据模型，实现业务逻辑，数据发生变化时，通过事件通知View来更新视图。
View：界面视图，响应用户的界面交互操作请求，然后将请求转给Presenter执行，View还能直接从Model获取数据。
Presenter：接受View的请求，然后可以做一些简单的控制或数据验证等处理，响应给View，或者调用Model执行业务逻辑。

• Passive View模式

Model：定义数据模型，实现业务逻辑，数据发生变化时，通过事件通知Presenter，Presenter再来操作View，更新界面视图。
View：界面视图，响应用户的界面交互操作请求，然后将请求转给Presenter执行。
Presenter：接受View的请求，可以是做一些简单的控制或数据验证等处理或者是从Model获取数据，再响应给View，也可以是调用Model执行业务逻。

这两种模式在WEB前端实现，就是把页面的DOM事件逻辑提取出来，放到Presenter里，同时Presenter还充当View和Model通信的中介，实际应用中，很少严格按MVP方式来设计。

MVVM

不管是MVC还是MVP，都只是一种设计上的思路，目标是实现界面视图和业务逻辑解耦分离，在WEB前端，很多框架是用的这种方式来实现的，MVVM（Model-View-ViewModel）的概念：

Model：定义数据模型，实现业务逻辑，当Model数据发生变化时，通过事件通知ViewModel数据更新。
View：界面视图，响应用户的界面交互操作请求，然后将请求转给ViewModel执行。
ViewModel：能接受View的请求，操作View以及调用Model执行业务逻辑，ViewModel的数据跟View关联，当ViewModel数据变化后，自动更新对应的View的界面视图。

现在流行的MVVM开发框架，例如Vue，自身支持下面三个特性，这样能为开发节省大量的工作

• Model数据变化后通知对应的ViewModel数据更新
• 用户的操作交互响应通过View转发给ViewModel（DOM节点自动绑定事件）
• ViewModel数据变化后通知对应的View更新界面视图（界面自动绑定数据）

参考文章：

• 《到底什么是MVC？》
• 《界面之下：还原真实的MV*模式》

前端MV*