前端MVC、MVP、MVVM模式

---

简介

MVC、MVP、MVVM是三种前端的软件架构设计模式，主要用于优化代码结构，便于后期的项目开发和维护工作。

---

MVC模式

MVC模式是通过分离Model、View、Controller的方式组织代码。
View负责页面的显示逻辑；
Model负责存储页面的业务数据以及对相应数据的操作；
Controller是View层与Model层之间的纽带，当用户与页面产生交互的时候，Controller中的事件触发器开始工作，调用Model层并对Model层进行修改，之后Model层的改变会通知View层更新页面，（观察者模式,此时View层与Model层进行相互耦合）。
用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新
view的变化，先传到controller中，controller对model中的数据进行更改，model层中数据的更改会被直接通知到view层中

---

MVP模式

MVP模式是通过分离Model、View、Presenter的方式组织代码。
View负责页面的显示逻辑；
Model负责存储页面的业务数据以及对相应数据的操作；
Presenter将View层的变化与Model层的变化绑定在一起，当用户与页面产生交互的时候，View和Model可以进行同步的更新。
MVP中的presenter同时具有View和Model的接口。
Presenter作为一个中转站，view中的变化先传到Presenter
Presenter传到Model中
对Model中的数据进行更改
再通过Presenter将数据更新到view层中

---

MVVM模式

MVVM模式是通过分离Model、View、ViewModel的方式组织代码。
View负责页面的显示逻辑；
Model负责存储页面的业务数据以及对相应数据的操作；
ViewModel使用了双向的数据绑定，
实现View与VM保持同步，
替代了繁琐复杂的DOM操作，
实现了View和Model的自动同步，也就是当Model的属性改变时改变属性后该属性对应View层显示会自动改变。
核心是DOM Listeners和 Data Bindings两个工具。
DOMListeners 工具用于监听 View 中 DOM 的变化，并会选择性的传给 Model；
Data Bindings 工具用于监听 Model 数据变化，并将其更新给 View。

---

MVVM优点：

MVVM模式和MVC模式类似，主要目的是分离视图（View）和模型（Model），有几大优点：

低耦合，视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

可重用性，可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

独立开发，开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。

可测试，界面向来是比较难于测试的，而现在测试可以针对ViewModel来写