MVC/MVP/MVVM 模式：实战指南（附 MVC 简单实现）

2023-12-31 04:42:27

在前端开发中，设计模式扮演着至关重要的角色，它们能帮助我们构建可维护、可扩展且易于测试的代码。在本文中，我们将深入探讨三种流行的设计模式：MVC（Model-View-Controller）、MVP（Model-View-Presenter）和 MVVM（Model-View-ViewModel）。我们将通过一个实际的例子，即一个简单的 MVC 实现，来演示如何应用这些模式。

MVC、MVP、MVVM 概述

MVC（Model-View-Controller）

MVC 模式将应用程序划分为三个组件：

模型（Model）： 包含应用程序的数据和业务逻辑。
视图（View）： 呈现数据，响应用户交互。
控制器（Controller）： 充当模型和视图之间的中介，处理用户请求并更新模型。

MVP（Model-View-Presenter）

MVP 模式与 MVC 类似，但引入了 Presenter 组件：

模型（Model）： 负责应用程序的数据和业务逻辑。
视图（View）： 仅显示数据，不包含业务逻辑。
Presenter： 中介模型和视图之间的交互，处理用户请求并更新模型。

MVVM（Model-View-ViewModel）

MVVM 模式将数据绑定和双向数据流作为重点：

模型（Model）： 包含应用程序的数据。
视图（View）： 包含数据绑定的 UI 元素，可实时反映模型中的更改。
视图模型（ViewModel）： 是模型和视图之间的桥梁，它负责将模型数据公开给视图并处理用户交互。

实战：MVC 简单实现

为了演示 MVC 模式，我们创建一个简单的 JavaScript 应用程序，它将用户输入的数字相加并显示结果。

// 模型
const model = {
  num1: 0,
  num2: 0,
  sum: 0
};

// 视图
const view = {
  getInput: () => {
    model.num1 = Number(document.querySelector('#num1').value);
    model.num2 = Number(document.querySelector('#num2').value);
  },
  displaySum: () => {
    document.querySelector('#result').textContent = model.sum;
  }
};

// 控制器
const controller = {
  addNumbers: () => {
    view.getInput();
    model.sum = model.num1 + model.num2;
    view.displaySum();
  }
};