MVC、MVP、MVVM与DDD架构设计比较，不同语言源码实现

MVC与MVP/MVVM/DDD架构对比，不同语言实现

MVC 分层架构设计概述

模型-视图-控制器（Model-View-Controller，简称 MVC）是一种经典软件架构设计，通过分层解耦，使得系统结构清晰和易于维护，具有良好的可扩展性。MVC 适用于需要清晰分离用户界面、业务逻辑和数据管理的应用场景。随着MVC的发展，还衍生出了MVP、MVVM以及领域驱动设计（DDD）等架构，这些都是为了让庞大的系统变得简单，易于人们理解。

MVC 结构图形示例

以Web后端开发为例

1.                      用户请求  
2.                        |  
3.                        v
4. +---------+       +-----------+      +-----------+
5. |  View   |  <--- | Controller| ---> |   Model   |
6. +---------+       +-----------+      +-----------+
7.     ^                                      v
8.     |            Model数据映射到View         |
9.     ****--------------------------------****

复制代码

MVC各层职责

• 视图层（View）：处理用户界面展示和用户输入事件
  
• 控制器层（Controller）：接收用户请求，协调模型和视图
  
• 模型层（Model）：封装业务逻辑和数据结构
  

MVC是一种软件分层设计模式，目的是为了使得各层级解耦，使得代码更清晰和易于维护。常用来跟MVP、MVVM以及DDD分层架构对比，以下对这几种架构进行详细分析。MVC不同语言源码实现：https://github.com/microwind/design-patterns/tree/main/mvx/mvc
MVC 分层架构与 DDD 分层架构对比

MVC 以界面与数据分离为核心目标，强调快速开发；DDD 以领域模型驱动为核心思想，专注于复杂业务系统的可持续架构设计。
DDD 结构图形示例

1. +--------------------+
2. |     用户界面层       |
3. |   User Interface   |
4. |   含Controller/UI   |
5. +--------------------+
6.           |
7.           v
8. +--------------------+
9. |      应用服务层      |
10. |  Application Layer |
11. |   含Service/DTO    |
12. +--------------------+
13.           |
14.           v
15. +--------------------+
16. |       领域层        |
17. |    Domain Layer    |
18. |   含Model/Service  |
19. +--------------------+
20.           |
21.           v
22. +----------------------+
23. |       基础设施层       |
24. | Infrastructure Layer |
25. | 含Repository/Message |
26. +----------------------+

复制代码

DDD各语言源码：https://github.com/microwind/design-patterns/tree/main/domain-driven-design
MVC 分层架构与 DDD 分层架构特点

特性MVCDDD主要目标分离 UI、逻辑和数据解决复杂领域建模问题核心分层3 层（View、Controller、Model）4 层（UI、应用、领域、基础设施）适用场景Web 应用、前端交互密集型系统企业级复杂业务系统（如金融交易、供应链管理）开发效率快速原型开发，中小型项目友好需前期领域建模，适合长期演进的大型项目MVC与MVP、MVVM的分层架构对比

MVC与MVP总体上一致，只是在View与Model是否完全解耦上有差别。MVP通过接口隔离实现完全解耦，而MVC允许视图直接访问模型。MVC与MVVM的本质差异在于数据同步机制：MVVM通过双向绑定实现自动数据同步，MVC则依赖手动进行状态管理。
MVP（Model-View-Presenter）结构图形

1. User Input  
2.     |
3.     v        由主持人代理View和Model交互
4. +---------+      +-----------+       +-----------+
5. |  View   | <--> | Presenter | <---> |   Model   |
6. +---------+      +-----------+       +-----------+
8. 1. MVP 主要用于前端开发，尤其是界面渲染，当一个界面需要针对多个视图数据进行渲染时，采用MVP比MVC更合适。
9. 2. MVP 下 View 与 Model 隔离，View 中没有对应 Model 概念，数据由 Presenter 代为传递。

复制代码

MVP各语言源码：https://github.com/microwind/design-patterns/tree/main/mvx/mvp
MVVM（Model-View-ViewModel）

1. User Input  
2.     |
3.     v         将View与Model双向数据绑定
4. +---------+      +-----------+      +-----------+
5. |  View   | ---> | ViewModel | <--> |   Model    |
6. +---------+      +-----------+      +-----------+
7.                    ^        |
8.                    |        v
9.           Data Binding(由Agent监听数据变化)
11. 1. MVVM 从 View 触发，监听事件执行数据更新。
12. 2. 通过代理监听数据变化，自动更新视图。

复制代码

MVVM各语言源码：https://github.com/microwind/design-patterns/tree/main/mvx/mvvm
MVC与MVP、MVVM的分层架构特点

模式控制流程描述View与Model耦合度组件角色MVC请求驱动模式：
Controller 接收 View 请求 → 操作 Model → Model 直接通知 View 更新；View 主动监听 Model 事件。存在一定耦合，View 直接绑定 Model。Controller 处理逻辑；View 展示数据；Model 管理数据。MVP中介者模式：View 与 Presenter 双向交互：用户操作触发事件 → Presenter 调用 Model 更新 → Presenter 通知 View 更新。完全解耦，View 仅与 Presenter 交互，Model 不直接通知 View。Presenter 充当中介者；View 仅负责展示；Model 管理数据。MVVM响应式编程模式：利用数据绑定：View 与 ViewModel 双向绑定，ViewModel 操作 Model 后自动反映在 View 上。完全解耦，借助数据绑定技术实现 View 与 Model 之间的间接通信。ViewModel 充当桥梁；View 为声明式UI层；Model 纯数据结构。MVC是分层架构思想的先驱，后来MVP、MVVM、DDD等才流行开来，可以对比下几种分层代码，理解其中的变迁：https://github.com/microwind/design-patterns/tree/main/mvx
MVC 的应用场景

• Web 应用程序（如电商网站、博客系统）
  
• 前后端分离项目（RESTful API + 前端框架）
  
• 桌面 GUI 应用（Java Swing、C# WinForms）
  
• 移动端应用（Android Activity 结构）
  

MVC 的例子（C、Java、JavaScript、Go、Python等）

MVC最早从Smalltalk语言发展而来，后来经过Java、C++、.NET等将其发扬光大，除了传统的面向对象语言可以实现MVC模式，其他各种高级语言都可以实现MVC。需要注意的是MVC并非一种技术，而是一种理念。只要秉持这种分层思想，那么任何语言都可以实现MVC思想。
C 语言实现 MVC

1. /* 视图层（View）*/
2. // view.c
3. #include <stdio.h>
4. #include "controller.h"
6. void display_order(Order order) {
7.     printf("Order ID: %s\nCustomer: %s\nAmount: %.2f\n",
8.            order.id, order.customer_name, order.amount);
9. }
11. /* 控制器层（Controller）*/
12. // controller.c
13. #include "controller.h"
14. #include "repository.h"
16. void create_order(Order order) {
17.     save_order(order);
18. }
20. Order get_order(char* id) {
21.     return find_order(id);
22. }
24. /* 模型层（Model）*/
25. // order.h
26. typedef struct {
27.     char id[10];
28.     char customer_name[50];
29.     float amount;
30. } Order;
32. /* 数据访问层（Repository）*/
33. // repository.c
34. #include <string.h>
35. #include "repository.h"
37. static Order orders[100];
38. static int count = 0;
40. void save_order(Order order) {
41.     orders[count++] = order;
42. }
44. Order find_order(char* id) {
45.     for (int i = 0; i < count; i++) {
46.         if (strcmp(orders[i].id, id) == 0) {
47.             return orders[i];
48.         }
49.     }
50.     Order empty = { "", "", 0 };
51.     return empty;
52. }

复制代码

Java 语言实现 MVC

1. /* 视图层（View）*/
2. // Thymeleaf 模板 (orders.html)
3. <!DOCTYPE html>
4. <html xmlns:th="http://www.thymeleaf.org">
5. <body>
6.     <h1>订单列表</h1>
7.     <ul>
8.         <li th:each="order : ${orders}">
9.              -
10.             
11.         </li>
12.     </ul>
13. </body>
14. </html>
16. /* 控制器层（Controller）*/
17. // OrderController.java
18. @Controller
19. @RequestMapping("/orders")
20. public class OrderController {
21.     private final OrderService service;
23.     @Autowired
24.     public OrderController(OrderService service) {
25.         this.service = service;
26.     }
28.     @GetMapping
29.     public String listOrders(Model model) {
30.         model.addAttribute("orders", service.getAllOrders());
31.         return "orders";
32.     }
33. }
35. /* 模型层（Model）*/
36. // Order.java
37. @Entity
38. public class Order {
39.     @Id
40.     @GeneratedValue(strategy = GenerationType.IDENTITY)
41.     private Long id;
42.     private String customerName;
43.     private BigDecimal amount;
45.     // Getters & Setters
46. }
48. /* 数据访问层（Repository）*/
49. // OrderRepository.java
50. public interface OrderRepository extends JpaRepository<Order, Long> {
51.     List<Order> findByCustomerName(String name);
52. }

复制代码

Go 语言实现 MVC

1. /* 视图层（View）*/
2. // view.go
3. func RenderOrder(w http.ResponseWriter, order Order) {
4.     fmt.Fprintf(w, "ID: %s\nCustomer: %s\nAmount: %.2f",
5.         order.ID, order.CustomerName, order.Amount)
6. }
8. /* 控制器层（Controller）*/
9. // controller.go
10. func OrderHandler(w http.ResponseWriter, r *http.Request) {
11.     id := r.URL.Query().Get("id")
12.     order := repository.GetOrder(id)
13.     RenderOrder(w, order)
14. }
16. /* 模型层（Model）*/
17. // order.go
18. type Order struct {
19.     ID           string
20.     CustomerName string
21.     Amount       float64
22. }
24. /* 数据访问层（Repository）*/
25. // repository.go
26. var orders = make(map[string]Order)
28. func GetOrder(id string) Order {
29.     return orders[id]
30. }
32. func SaveOrder(order Order) {
33.     orders[order.ID] = order
34. }

复制代码

Python 语言实现 MVC（Flask）

1. # 视图层（View）
2. # templates/orders.html
3. <html>
4. <body>
5.     <h1>Orders</h1>
6.     <ul>
7.         {% for order in orders %}
8.             <li>{{ order.id }} - {{ order.customer_name }}</li>
9.         {% endfor %}
10.     </ul>
11. </body>
12. </html>
14. # 控制器层（Controller）
15. # app.py
16. from flask import Flask, render_template
17. from service import OrderService
19. app = Flask(__name__)
20. service = OrderService()
22. @app.route('/orders')
23. def list_orders():
24.     orders = service.get_all_orders()
25.     return render_template('orders.html', orders=orders)
27. # 模型层（Model）
28. # order.py
29. class Order:
30.     def __init__(self, id, customer_name, amount):
31.         self.id = id
32.         self.customer_name = customer_name
33.         self.amount = amount
35. # 数据访问层（Repository）
36. # repository.py
37. class OrderRepository:
38.     def __init__(self):
39.         self.orders = {}
41.     def save(self, order):
42.         self.orders[order.id] = order
44.     def get_all(self):
45.         return list(self.orders.values())

复制代码

JavaScript 实现 MVC（Express.js）

1. /* 视图层（View）*/
2. // views/orders.ejs
3. <!DOCTYPE html>
4. <html>
5. <body>
6.     <h1>Orders</h1>
7.     <ul>
8.         <% orders.forEach(order => { %>
9.             <li><%= order.id %> - <%= order.customerName %></li>
10.         <% }) %>
11.     </ul>
12. </body>
13. </html>
15. /* 控制器层（Controller）*/
16. // routes/orderRoutes.js
17. const express = require('express');
18. const router = express.Router();
19. const service = require('../services/orderService');
21. router.get('/orders', async (req, res) => {
22.     const orders = await service.getAllOrders();
23.     res.render('orders', { orders });
24. });
26. /* 模型层（Model）*/
27. // models/Order.js
28. class Order {
29.     constructor(id, customerName, amount) {
30.         this.id = id;
31.         this.customerName = customerName;
32.         this.amount = amount;
33.     }
34. }
36. /* 数据访问层（Repository）*/
37. // repositories/orderRepository.js
38. class OrderRepository {
39.     constructor() {
40.         this.db = new Map();
41.     }
43.     save(order) {
44.         this.db.set(order.id, order);
45.     }
47.     getAll() {
48.         return Array.from(this.db.values());
49.     }
50. }

复制代码

JavaScript 前端版 MVC

功能：点击按钮增减数值并更新视图。

• 模型层：CounterModel 类封装数据和操作逻辑，包含数值和标题的修改方法。
  
• 视图层：CounterView 类负责渲染界面，绑定模型数据，根据模型状态更新视图。
  
• 控制层：CounterController 类作为中间层，绑定视图和模型，监听事件，实现数据和视图的更新。
  

1. // Model 类：封装数据逻辑
2. class CounterModel {
3.     constructor() {
4.         // 初始化数据
5.         this.title = '点击更换标题';
6.         this.num = 0;
7.     }
9.     // 标题操作：增加标题
10.     changeTitle() {
11.         this.title = '点击更换标题' + Math.floor(Math.random() * 100);
12.     }
14.     // 数据操作方法：增加数值
15.     increment() {
16.         this.num++;
17.     }
19.     // 数据操作方法：减少数值
20.     decrement() {
21.         this.num--;
22.     }
23. }
25. // View 类：处理界面渲染
26. class CounterView {
27.     template(data = {}) {
28.         return `
29.         
30.             <h3 >${data.title}</h3>
31.             <button >-</button>
32.             ${data.num}
33.             <button >+</button>
34.         
35.         `;
36.     }
38.     constructor(model, container) {
39.         this.model = model; // 绑定模型，这是跟MVP最大区别
40.         this.$container = container;
41.         this.init();
42.     }
44.     // 初始化DOM
45.     init() {
46.         this.$container.innerHTML = this.template(this.model);
47.         this.$titleEl = this.$container.querySelector('.title');
48.         this.$numEl = this.$container.querySelector('.num');
49.         this.$incBtn = this.$container.querySelector('.inc-btn');
50.         this.$decBtn = this.$container.querySelector('.dec-btn');
51.     }
53.     // 更新视图方法
54.     render() {
55.         // 可以根据数据是否有变化来确定要更新哪个字段
56.         const data = this.model
57.         this.$titleEl.textContent = data.title;
58.         this.$numEl.textContent = data.num;
59.     }
60. }
62. // Controller 类：处理用户输入
63. class CounterController {
64.     constructor(model, view) {
65.         this.model = model;
66.         this.view = view;
67.         this.bindEvents();
68.     }
70.     // 绑定DOM事件
71.     bindEvents() {
72.         this.view.$titleEl.addEventListener('click', () => this.changeTitleHandle());
73.         this.view.$incBtn.addEventListener('click', () => this.incrementHandle());
74.         this.view.$decBtn.addEventListener('click', () => this.decrementHandle());
75.     }
77.     changeTitleHandle() {
78.         this.model.changeTitle();
79.         this.view.render(); // 直接更新视图，不必传递model
80.     }
82.     // 事件处理：增加操作
83.     incrementHandle() {
84.         this.model.increment();
85.         this.view.render(); // 直接更新视图，不必传递model
86.     }
88.     // 事件处理：减少操作
89.     decrementHandle() {
90.         this.model.decrement();
91.         this.view.render(); // 直接更新视图，不必传递model
92.     }
93. }
95. // 初始化应用
96. const appContainer = document.body;
97. const model = new CounterModel();
98. const view = new CounterView(model, appContainer);
99. const controller = new CounterController(model, view);

复制代码

总结

• MVC 适用于快速开发 Web 应用，强调职责分离。
  
• MVP 适用于对视图和业务逻辑分离要求较高的场景，强调展示层对视图和模型的协调。
  
• MVVM ​适用于复杂视图与模型交互的应用，利用数据绑定机制自动同步视图和模型的状态。
  
• DDD 适用于复杂业务系统，强调领域建模。
  
• 核心优势：代码可维护性强，团队协作效率高。
  
• 选型建议：中小型项目优先考虑 MVC，复杂业务系统可结合 DDD。
  

最后

• 要用 MVC 吗？ 90% 的 Web 项目都适合 MVC 架构
  
• 如何判断适用性？ 如果需求变化主要集中在 UI 和流程的中小型项目，MVC 是最佳选择
  
• 扩展建议：大型项目可在 MVC 基础上增加 Service 层和 DTO 对象，或者直接采用DDD架构
  
• 更多设计与架构源码： https://github.com/microwind/design-patterns
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！