@@ -6,61 +6,73 @@ MVX 是一类用于软件架构设计的模式,包括 MVC(Model-View-Control
6
6
7
7
### MVC(Model-View-Controller)
8
8
```
9
- // https://developer.mozilla.org/en-US/docs/Glossary/MVC
10
9
User Input
11
- | 从Controller起发起,建立View与Model的联系
10
+ |
12
11
v
13
12
+---------+ +-----------+ +-----------+
14
- | View | <---> | Controller| ---> | Model |
13
+ | View | <--- | Controller| ---> | Model |
15
14
+---------+ +-----------+ +-----------+
16
15
^ v
17
16
| Model数据映射到View |
18
17
****--------------------------------****
18
+
19
+ 1. 如果是前端MVC,则由View的事件触发。
20
+ https://developer.mozilla.org/en-US/docs/Glossary/MVC
21
+
22
+ 2. 如果是后端MVC,则由Controller作为入口。
23
+ https://spring.io/blog/2011/01/04/green-beans-getting-started-with-spring-mvc
24
+
19
25
```
20
26
** 特点** :
21
- - Model 负责数据处理和业务逻辑。
22
- - View 负责 UI 展示,但不会直接与 Model 交互。
23
- - Controller 负责接收用户输入,更新 Model,并通知 View 更新 。
24
- - View 不能直接访问 Model,必须通过 Controller 传递 。
27
+ - Model 负责数据处理和业务逻辑。一般还有层Service,Model负责数据建模,Service则负责处理业务流程。
28
+ - View 负责 UI 展示,但不会直接与 Model 交互,仅针对 Model 进行渲染 。
29
+ - Controller 负责接收用户输入,更新 Model,并通知 View 渲染 。
30
+ - View 关联到某个 Model,可以直接绑定 Model 或 通过 Controller 来进行绑定 。
25
31
26
32
### MVP(Model-View-Presenter)
27
33
```
28
34
User Input
29
- | 从View起触发
30
- v 由主持者代理View和Model交互
35
+ |
36
+ v 由主持人代理View和Model交互
31
37
+---------+ +-----------+ +-----------+
32
38
| View | <--> | Presenter | <---> | Model |
33
39
+---------+ +-----------+ +-----------+
40
+
41
+ 1. MVP 主要用于前端开发,尤其是界面渲染,当一个界面需要针对多个视图数据进行渲染时,采用MVP比MVC更合适。
42
+ 2. MVP 下 View 与 Model 隔离,View 中没有对应 Model 概念,数据由 Presenter 代为传递。
34
43
```
35
44
** 特点** :
36
45
- View 只负责 UI 显示,不包含业务逻辑。
37
46
- Presenter 充当中间层,处理业务逻辑,并与 View 交互。
38
- - Model 负责数据管理 。
47
+ - Model 负责数据建模与核心逻辑处理 。
39
48
- View 和 Model 不能直接通信,所有交互都必须经过 Presenter。
40
49
41
50
### MVVM(Model-View-ViewModel)
42
51
```
43
52
User Input
44
- | 从View起触发
53
+ |
45
54
v 将View与Model双向数据绑定
46
55
+---------+ +-----------+ +-----------+
47
56
| View | ---> | ViewModel | <--> | Model |
48
57
+---------+ +-----------+ +-----------+
49
58
^ |
50
59
| v
51
60
Data Binding(由Agent监听数据变化)
61
+
62
+ 1. MVVM 从 View 触发,监听事件执行数据更新。
63
+ 2. 通过代理监听数据变化,自动更新视图。
52
64
```
53
65
** 特点** :
54
- - ViewModel 作为 View 和 Model 的桥梁,封装 UI 逻辑 。
55
- - View 通过数据绑定与 ViewModel 交互,而不是直接访问 Model。
66
+ - ViewModel 作为 View 和 Model 的桥梁,封装 UI 处理逻辑 。
67
+ - View 通过数据绑定与 ViewModel 建立联系,而不是直接在 View 中访问 Model。
56
68
- Model 的数据变化会自动更新 View,View 变化也能同步到 Model。
57
69
58
70
## 各种 MVX 分层架构
59
71
60
72
| 架构 | 主要作用 | 适用场景 |
61
73
| ------| ---------| ---------|
62
- | MVC | 经典架构模式,适用于小型应用 | 适用于前后端分离、Web 开发 |
63
- | MVP | 适用于解耦 UI 与逻辑的项目 | 适用于桌面应用、Android 开发 |
74
+ | MVC | 经典架构模式,适用于各种系统开发 | 适用于前后端分离、Web 开发 |
75
+ | MVP | 适用于解耦 UI 与逻辑的项目 | 适用于桌面应用、前端开发、 Android 开发 |
64
76
| MVVM | 适用于数据驱动 UI,提升响应性 | 适用于前端框架,如 Vue、React |
65
77
66
78
## 各种 MVX 的应用场景
@@ -247,3 +259,8 @@ viewModel.model.data = 'new Data.';
247
259
- ** MVC 适用于前后端分离的 Web 应用。**
248
260
- ** MVP 适用于 UI 逻辑与数据分离的桌面或 Android 应用。**
249
261
- ** MVVM 适用于数据驱动的现代前端开发。**
262
+
263
+ ## 更多例子与源码
264
+ [ https://github.com/microwind/design-patterns/tree/main/mvx ] ( https://github.com/microwind/design-patterns/tree/main/mvx )
265
+ [ https://microwind.github.io/design-patterns/ ] ( https://microwind.github.io/design-patterns/ )
266
+ [ mvc_mvp_mvvm例子详解] ( https://microwind.github.io/design-patterns/mvc_mvp_mvvm.html )
0 commit comments