- [二叉树](/algo/4%20tree)

- [责任链模式](/design/7%20chain_of_responsibility_pattern)

title: MVVM 模式

order: 2

category:

- 架构设计

tag:

- 设计模式

- MVVM

editLink: false

MVVM（Model-View-ViewModel）是一种常用于前端开发中的架构模式，它将用户界面逻辑和业务逻辑进行分离，从而使代码更具可维护性和可测试性。MVVM 模式是由微软架构师 John Gossman 于 2005 年提出的，最初用于 WPF（Windows Presentation Foundation） 和 Silverlight 中，现已广泛应用于各种前端框架和工具，如 Vue.js、Angular、React+Redux 等。

MVVM 模式由三部分组成：

1. **Model（模型）**

2. **View（视图）**

3. **ViewModel（视图模型）**

这三部分通过数据绑定（Data Binding）机制相互通信，实现界面和数据的自动同步。下面是各个部分的详细解释：

Model 代表应用程序的数据和业务逻辑，通常是纯粹的 JavaScript 对象、类或者数据结构。它负责处理与业务逻辑相关的所有操作，如数据的获取、保存和更新等。

- **职责**：

- 管理应用程序的核心数据。

- 处理业务逻辑，如增删改查等。

- 与服务层（如 API）交互，获取或更新数据。

View 是用户界面（UI）的展现层，负责将 ViewModel 中的数据展示给用户。它通常由 HTML、CSS 等构建而成，负责呈现数据和处理用户的输入（如按钮点击、表单提交等）。

- **职责**：

- 负责界面的展示。

- 捕捉用户输入，并将其传递给 ViewModel。

- 数据绑定机制确保视图能够实时反映 ViewModel 的变化。

ViewModel 作为 View 和 Model 之间的桥梁，负责处理界面显示逻辑。它从 Model 中获取数据并提供给 View，还处理用户的输入，并将其传递给 Model。ViewModel 不直接操作 View，而是通过数据绑定和命令机制进行交互。

- **职责**：

- 提供 View 所需的数据。

- 响应 View 的用户操作，并将操作传递给 Model。

- 实现双向数据绑定，使得 View 和 Model 之间保持同步。

MVVM 的工作原理是通过数据绑定实现视图和模型的同步。视图层（View）直接绑定到 ViewModel 中的属性，这样当 ViewModel 中的数据发生变化时，视图会自动更新。同时，视图的用户输入会通过绑定机制传递给 ViewModel，ViewModel 再更新 Model。

- **单向绑定**：ViewModel 到 View 的数据流动。当 ViewModel 中的数据发生变化时，View 自动更新。

- **双向绑定**：View 到 ViewModel 的数据流动也同步。例如，用户在表单中输入数据时，ViewModel 会自动更新。

- **MVC（Model-View-Controller）**：MVC 中，控制器（Controller）负责响应用户交互并更新模型（Model）。视图（View）观察模型，并根据模型的变化进行更新。MVC 的控制器承担了较多的业务逻辑处理工作。

- **MVP（Model-View-Presenter）**：MVP 中，Presenter 是负责视图与模型之间通信的中介，View 不直接依赖 Model。Presenter 包含了 UI 逻辑和交互逻辑，处理用户事件，并与 Model 交互。

- **MVVM**：MVVM 的核心是 ViewModel，它将 Model 和 View 进行解耦。View 和 ViewModel 通过数据绑定机制进行通信，View 只关注界面展示，ViewModel 负责处理逻辑。

**对比总结**：

- **解耦程度**：MVVM 提高了 View 和 Model 的解耦程度，尤其在数据绑定方面更为自动化和灵活。

- **代码维护**：由于 ViewModel 仅处理与 UI 逻辑相关的部分，Model 专注于业务逻辑，这使得 MVVM 在代码的分离和维护性方面优于 MVC 和 MVP。

- **适用场景**：MVVM 更适合需要复杂数据绑定和动态 UI 更新的应用，特别是在现代前端框架（如 Vue、Angular）中应用广泛。

- **解耦性好**：View 和 Model 之间没有直接的依赖关系，二者通过 ViewModel 进行沟通，代码更具模块化。

- **可测试性强**：由于 ViewModel 独立于 View，业务逻辑和数据处理部分可以通过单元测试进行验证，而不依赖于实际的 UI。

- **数据绑定机制**：数据绑定使得 View 和 ViewModel 之间的同步更加方便，减少了手动操作 DOM 的代码。

- **学习成本高**：对于初学者来说，理解 MVVM 的数据绑定和通信机制可能有一定的难度。

- **性能问题**：在复杂的场景下，大量的数据绑定可能会引起性能问题，尤其是在数据变更频繁的情况下。

- **调试难度增加**：由于数据绑定是自动化的，可能导致调试过程变得更加复杂，不易跟踪数据的流动。

Vue.js 是一种典型的 MVVM 框架，下面展示了一个简单的 Vue.js 示例，展示 MVVM 的工作原理。

<div id="app">

<input v-model="name" placeholder="Enter your name">

<p>Hello, {{ name }}!</p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<script>

</script>

在这个示例中：

- **Model**：`data` 对象中存储的 `name` 字段。

- **View**：HTML 模板中展示数据的部分，如 `input` 和 `p` 标签。

- **ViewModel**：Vue 实例管理的数据和行为，负责与 View 的数据绑定和交互。

当用户在输入框中输入数据时，`v-model` 会自动更新 `data` 中的 `name`，并且由于数据绑定，`{{ name }}` 会同步更新到页面上。

MVVM 模式通过数据绑定机制，将 View 和 Model 进行解耦，使得前端开发中的数据管理和 UI 渲染变得更加高效。它非常适合需要频繁更新 UI 的应用，尤其在现代前端开发框架中广泛应用。虽然 MVVM 提供了很好的解耦性和可维护性，但也带来了性能和调试方面的挑战，因此在应用时需要根据具体情况权衡。

title: Model-View 框架

order: 2

category:

- 架构设计

tag:

- 设计模式

- Model-View

- Qt

editLink: false

Qt 的 Model-View 框架是一种用于处理和显示数据的灵活机制，特别适合需要在用户界面中展示大量或复杂数据的应用程序。通过将数据和显示逻辑解耦，Model-View 框架提供了更高的灵活性和可维护性。Qt 的 Model-View 框架包含三个主要组件：Model（模型）、View（视图）和 Delegate（委托）。

Model 是数据的抽象表示，负责存储和管理数据，并向 View 提供访问这些数据的接口。Model 不直接与 UI 打交道，而是通过信号和槽机制通知 View 数据的变化。Qt 提供了几个现成的模型类，如 `QStandardItemModel` 和 `QStringListModel`，开发者也可以通过继承 `QAbstractItemModel`、`QAbstractTableModel` 或 `QAbstractListModel` 来自定义模型。

**Model 的主要职责**：

- **管理数据**：模型负责存储和管理数据，包括对数据的增删改查操作。

- **提供接口**：模型通过标准化的接口提供数据给 View。

- **通知数据变更**：模型会在数据发生变化时发出信号，通知 View 更新显示。

Qt 中常用的 Model 类：

- **QAbstractItemModel**：所有自定义模型的基类，适合树状结构数据。

- **QAbstractListModel**：用于一维列表数据的基类。

- **QAbstractTableModel**：用于二维表格数据的基类。

- **QStandardItemModel**：提供标准的项目模型，实现了表格和树状结构的支持。

**示例**：使用 `QStandardItemModel` 来存储和操作数据。

QStandardItemModel *model = new QStandardItemModel();

model->setHorizontalHeaderLabels({"Name", "Age"});

QStandardItem *item1 = new QStandardItem("John");

QStandardItem *item2 = new QStandardItem("25");

model->appendRow({item1, item2});

Delegate 是 View 和 Model 之间的中介，用于定制数据的显示和编辑。通过委托，开发者可以控制单元格的外观和编辑方式。Qt 默认的委托类是 `QStyledItemDelegate`，你可以继承这个类来自定义数据的显示和编辑行为。

**Delegate 的主要职责**：

- **渲染数据**：委托负责将 Model 中的数据渲染为可视化的控件或元素。

- **编辑数据**：委托还负责处理数据的编辑，提供自定义的编辑控件和逻辑。

**示例**：自定义委托，通过 `QStyledItemDelegate` 渲染数据。

class CustomDelegate : public QStyledItemDelegate {

Q_OBJECT

public:

CustomDelegate(QObject *parent = nullptr) : QStyledItemDelegate(parent) {}

void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const override {

painter->save();

// 自定义绘制逻辑

painter->drawText(option.rect, Qt::AlignCenter, index.data().toString());

painter->restore();

}

};

view->setItemDelegate(new CustomDelegate());

Qt 提供了一些代理模型（Proxy Model）来对原始模型的数据进行转换或过滤。常用的代理模型有：

- **QSortFilterProxyModel**：用于对数据进行排序和过滤。

- **QIdentityProxyModel**：直接映射原始模型，适合做数据的装饰或修改。

使用代理模型可以在不修改原始模型的情况下，对数据进行排序、过滤或其他转换操作。

**示例**：使用 `QSortFilterProxyModel` 进行排序。

QSortFilterProxyModel *proxyModel = new QSortFilterProxyModel();

proxyModel->setSourceModel(model);

proxyModel->sort(0, Qt::AscendingOrder); // 对第 0 列进行升序排序

view->setModel(proxyModel);

- 逆向

介绍一种利用 `constexpr` 实现编译时加密，运行时解密的方法。本文将介绍这一技术，并展示一个具体的实现示例。

::: tip

逆向工程常通过执行文件的中静态字符串信息找到关键点函数进行逆向，编译时加密可以一定程度上避免这个问题。

:::

PROTECTED_STR("heng");//编译后的执行文件中不存在‘heng’ 关键字符串信息

// std::cout << "heng" << std::endl;// 编译后的执行文件包含有 ‘heng’ 关键字符串信息，提供逆袭的信息点