Skip to content

Commit 3ebe889

Browse files
committed
update readme
1 parent 299ea7e commit 3ebe889

File tree

3 files changed

+53
-28
lines changed

3 files changed

+53
-28
lines changed

domain-driven-design/READM.md renamed to domain-driven-design/README.md

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,28 @@
55
## DDD 结构图形示例
66

77
```
8-
+---------------------+
9-
| 用户界面(UI) |
10-
+---------▲-----------+
8+
+--------------------+
9+
| 用户界面层 |
10+
| User Interface |
11+
+--------------------+
1112
|
12-
+---------|-----------+
13-
| 应用服务层(Application Service)|
14-
+---------▲-----------+
13+
v
14+
+--------------------+
15+
| 应用服务层 |
16+
| Application Layer |
17+
+--------------------+
1518
|
16-
+---------|-----------+
17-
| 领域层(Domain) |
18-
+---------▲-----------+
19+
v
20+
+--------------------+
21+
| 领域层 |
22+
| Domain Layer |
23+
+--------------------+
1924
|
20-
+---------|-----------+
21-
| 基础设施层(Infrastructure)|
22-
+---------------------+
25+
v
26+
+----------------------+
27+
| 基础设施层 |
28+
| Infrastructure Layer |
29+
+----------------------+
2330
```
2431

2532
### 各层职责

mvx/README.md

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,61 +6,73 @@ MVX 是一类用于软件架构设计的模式,包括 MVC(Model-View-Control
66

77
### MVC(Model-View-Controller)
88
```
9-
// https://developer.mozilla.org/en-US/docs/Glossary/MVC
109
User Input
11-
| 从Controller起发起,建立View与Model的联系
10+
|
1211
v
1312
+---------+ +-----------+ +-----------+
14-
| View | <---> | Controller| ---> | Model |
13+
| View | <--- | Controller| ---> | Model |
1514
+---------+ +-----------+ +-----------+
1615
^ v
1716
| Model数据映射到View |
1817
****--------------------------------****
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+
1925
```
2026
**特点**
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 来进行绑定
2531

2632
### MVP(Model-View-Presenter)
2733
```
2834
User Input
29-
| 从View起触发
30-
v 由主持者代理View和Model交互
35+
|
36+
v 由主持人代理View和Model交互
3137
+---------+ +-----------+ +-----------+
3238
| View | <--> | Presenter | <---> | Model |
3339
+---------+ +-----------+ +-----------+
40+
41+
1. MVP 主要用于前端开发,尤其是界面渲染,当一个界面需要针对多个视图数据进行渲染时,采用MVP比MVC更合适。
42+
2. MVP 下 View 与 Model 隔离,View 中没有对应 Model 概念,数据由 Presenter 代为传递。
3443
```
3544
**特点**
3645
- View 只负责 UI 显示,不包含业务逻辑。
3746
- Presenter 充当中间层,处理业务逻辑,并与 View 交互。
38-
- Model 负责数据管理
47+
- Model 负责数据建模与核心逻辑处理
3948
- View 和 Model 不能直接通信,所有交互都必须经过 Presenter。
4049

4150
### MVVM(Model-View-ViewModel)
4251
```
4352
User Input
44-
| 从View起触发
53+
|
4554
v 将View与Model双向数据绑定
4655
+---------+ +-----------+ +-----------+
4756
| View | ---> | ViewModel | <--> | Model |
4857
+---------+ +-----------+ +-----------+
4958
^ |
5059
| v
5160
Data Binding(由Agent监听数据变化)
61+
62+
1. MVVM 从 View 触发,监听事件执行数据更新。
63+
2. 通过代理监听数据变化,自动更新视图。
5264
```
5365
**特点**
54-
- ViewModel 作为 View 和 Model 的桥梁,封装 UI 逻辑
55-
- View 通过数据绑定与 ViewModel 交互,而不是直接访问 Model。
66+
- ViewModel 作为 View 和 Model 的桥梁,封装 UI 处理逻辑
67+
- View 通过数据绑定与 ViewModel 建立联系,而不是直接在 View 中访问 Model。
5668
- Model 的数据变化会自动更新 View,View 变化也能同步到 Model。
5769

5870
## 各种 MVX 分层架构
5971

6072
| 架构 | 主要作用 | 适用场景 |
6173
|------|---------|---------|
62-
| MVC | 经典架构模式,适用于小型应用 | 适用于前后端分离、Web 开发 |
63-
| MVP | 适用于解耦 UI 与逻辑的项目 | 适用于桌面应用、Android 开发 |
74+
| MVC | 经典架构模式,适用于各种系统开发 | 适用于前后端分离、Web 开发 |
75+
| MVP | 适用于解耦 UI 与逻辑的项目 | 适用于桌面应用、前端开发、Android 开发 |
6476
| MVVM | 适用于数据驱动 UI,提升响应性 | 适用于前端框架,如 Vue、React |
6577

6678
## 各种 MVX 的应用场景
@@ -247,3 +259,8 @@ viewModel.model.data = 'new Data.';
247259
- **MVC 适用于前后端分离的 Web 应用。**
248260
- **MVP 适用于 UI 逻辑与数据分离的桌面或 Android 应用。**
249261
- **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)

mvx/mvvm/mvvm.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,9 @@ MVVM的三大组件
9696
this.view = view
9797
this.model = model
9898

99-
// 使用代理监听数据变化,绑定model.data
99+
// 使用代理监听数据变化,关联model与view
100100
this.data = new Agent(model.data, (obj, prop, value) => {
101+
// 数据变化时可以获得数据以及具体变化的属性和值
101102
this.view.render(this.data) // 数据变化时更新视图
102103
})
103104
// init可以放在构造器或外层

0 commit comments

Comments
 (0)