MVC和MVVM

妖狐艹你老母 2022-08-28 04:58 150阅读 0赞

## 一、MVC ##

mvc模式，软件代码可以分为3个部分： View(视图)，用户界面；Controller(控制器)，业务逻辑；Model(模型)，数据保存

各部分之间的通信方式如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_13_color_FFFFFF_t_70_g_se_x_16][]

1、View传递指令到Controller

2、Controller完成业务逻辑后，要求model改变状态

3、Model将新数据发送给View，用户得到反馈

所有通信都是单向的

## 二、MVC的互动模式 ##

接受指令时，MVC有两种方式。一种是通过View接受指令，传递给Controller

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_13_color_FFFFFF_t_70_g_se_x_16 1][]

另一种是通过controller接受指令

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_13_color_FFFFFF_t_70_g_se_x_16 2][]

## 三、MVC实际应用 Backbone ##

实际项目往往比较灵活，以Backbone为例

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_14_color_FFFFFF_t_70_g_se_x_16][]

1、用户可以向View发送指令（DOM事件），再由View直接要求Model改变状态；

2、用户也可以直接向Controller发送指令 （改变 URL 触发 hashChange 事件），再由Controller传递给View

3、Controller非常单薄，只起到路由的作用，而View很厚实，业务逻辑都在View中。所以Backbone取消了Controller，只保留一个router

## 四、MVP ##

MVP模式将Controller改为了Presenter，同时改变了通信方向

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_13_color_FFFFFF_t_70_g_se_x_16 3][]

1、各部分之间的通信都是双向的

2、View和Model不发生联系，都通过Presenter传递

3、View非常单薄，不部署任何业务逻辑，是被动视图（Passive View），即没有任何主动性，而 Presenter非常厚，所有业务逻辑都部署在这里

## 五、MVVM ##

MVVM将Presenter改为了 ViewModel，

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_13_color_FFFFFF_t_70_g_se_x_16 4][]

它和MVC和MVP的区别是，它采用了双向数据绑定，View的变动会反映在 ViewModel中，反之亦然。如 angular

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/de49553b4d1d4c6ebf853e0eb08c51f5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_13_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/c0288b3d61104d53a7b9630a9611a371.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_13_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/918d8006dd7144e3b7f8a8ff62f29e96.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/32be08ed304a4a61882b9b80e48dc1bc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_13_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/d4110397b9a448ee998dba83c1f6b821.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_13_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/10a954ae7c1447e7b2ce6d0ef966f215.png