接触过软件开发应该都会听说过MVXX架构模式，最初的MVC架构当时是为了分离关注点来改进代码而抽象出来的组织方式，如今开发web app以及十分普遍，许多软件开发的思想也应用在web前端开发上，为了便捷开发以及开发出可以更加容易维护且体验更好的web app，web前端也诞生了许多MVC、MVP和MVVM等一系列的架构模式，那么如何区分这些MVXX架构，他们的共同点和不同点在哪？本文将从前端的角度对着三种架构进行介绍和解释。
MVC
MVC是Model-View-Controller的简称。MVC架构把应用分为三层：View，Model和Controller，他们之间的关系以及和用户之间的关系如下：
用户通过调用Controller层，将需要修改的事件传递给Model层，Model存储的是业务的数据，当Controller层将需要修改的数据信息传递给Model层时，Model就会根据数据的变动，将修改的模型更新至View层，最后用户就能看到他之前所做的修改。可以看到，在MVC里，用户不能直接操作View视图，必须通过Controller对视图进行修改或更新，这样一个MVC架构实现了视图View和控制器Controller的分离。
那么MVC是不是就很适合进行APP开发呢，并不是，MVC有以下缺点：
-
MVC的业务逻辑主要集中在Controller，例如用户事件处理，数据更新通知发放都集中在这一层，如果应用稍微复杂，那么Controller就会变得非常臃肿。
-
要触发一个View变动，MVC需要固定经过Controller->Model->View的流程，也就是一个View对应一个Controller，一个流程捆绑起来就是一个组件，View和Controller的关系过于紧密也导致了Controller的复用变得十分困难。
为了改进MVC的不足，MVC架构中进化出了MVP，解决了View和Controller过于紧密的问题。
MVP
MVP，即Model-View-Presenter，他和MVC的相同之处在于：Controller/Presenter负责业务逻辑，Model管理数据，View负责视图显示。MVP的架构模型如下：
在MVP中，View和Model和MVC是基本一致的，区别在于Presenter。MVP定义了Presenter和View之间的接口，用户通过View暴露出来的接口，将用户的事件操作传递给Presenter，Presenter处理事件后，将需要进行的更改操作通知到Model层，Model层接收到通知后，将更新后的状态发回Presenter，Presenter再利用View暴露的接口这View进行视图更新。
和MVC的区别
- MVP利用Presenter作为View和Model的桥梁，将View和Model进行解耦，完全分离视图和模型使得指责分化更加清晰，代码更加容易维护。
- View对Model的依赖程度降低，那么View就可以做成组件，只将需要进行操作的接口暴露出来，供Presenter调用。
MVP的不足
MVP依旧存在不足：
1.Model的变动并不会通过Presenter自动更新视图，事实上还需要通过Presenter“手动”更新视图；
2.对View的接口还存在依赖，如果View需要进行修改，那么Presenter也需要进行相应的调整；
3.如果对View的操作增加，那势必增加Presenter的操作量，Presenter层也会变得很臃肿。
因此，为了更好的开发体验，诞生了第三种架构：MVVM，MVVM通过数据绑定，很容易的实现View和Model的同步逻辑自动化；
MVVM
MVVM即Model-View-ViewModel，他同样拥有三层，结构模型有点类似于MVP，不过MVVM里处于View和Model之间的是ViewModel。ViewModel利用数据双向绑定（Two-Way-Data-Binding），在View视图发生变化时，能实时让Model中数据的变化；当Model的数据变化时，也实时的让View视图发生变化。因此用户从发出一个操作到更新整个视图，不必重新渲染整个页面。MVVM的各个层级的关系如下：
和MVC的区别
- MVVM将View和Model进行解耦，View能够脱离Model进行组件化封装，多次复用。
- 利用到数据双向绑定，将Model的数据变动自动更新到View层，不再需要通过Controller->Model->View这样的繁琐操作更新视图。
和MVP的区别
- MVVM利用数据双向绑定，使得处于中间层的ViewModel不用去管View如何渲染，而MVP里Presenter还需要知道View视图如何渲染，还需要调用View的接口去更新视图。
总结
MVXX的目的是把应用程序的数据、业务逻辑和界面这三块解耦，分离关注点，便于团队的分工合作。本文简单的介绍了并对比了MVC、MVP和MVVP的框架模式和优缺点，在实际工作中那么如何选择和应用MVXX进行软件应用程序开发，还是要从业务的复杂度、难易度以及可维护性入手。
(完)
参考：
An Overview of Web App Architectures
