表象模式 | 构架模式 | 设计模式

表象模式（Presentation Mode）

定义：
表现模式的核心思想是将数据的展示逻辑与业务逻辑分离，通过独立的“表现层”来统一显示业务对象的信息。

目标：

将对数据的处理和显示逻辑独立出来。
提高代码的复用性。
显现数据的一致性和完整性。

主要特点：

数据中立：表现模式不关心数据如何存储或传输，只负责将数据以用户友好的方式展示。
事务隔离：业务逻辑与显示逻辑分离，避免事务处理对显示逻辑的干扰。
增强可读性：通过统一的数据格式和布局，提高代码的可读性和维护性。

示例：

假设有一个订单列表页面，表现模式会负责如何显示订单信息。它可能包括以下操作：
显示订单的基本信息（如编号、客户名称、金额）。
格式化订单日期为“年/月/日”格式。
显示订单的图片（如果有的话）。

构架模式（Framework Pattern）

定义：
构架模式是一种通用的设计模式，用于将系统的组件分解为独立的部分，并通过这些部分来实现系统的功能。其核心思想是模块化开发，每个模块负责特定的功能。

目标：

提高系统的可扩展性。
显现系统的各个功能部分之间的依赖关系。
便于测试和维护。

特点：

模块化设计：将系统划分为独立的功能模块，每个模块负责特定的功能。
组件化开发：各个模块可以灵活地组合和配置，以适应不同的需求。
清晰的接口定义：通过明确的接口定义模块之间的交互方式，提高系统的可扩展性和维护性。

示例：

在构建一个复杂的订单管理系统时，构架模式可能会将系统分解为以下几个部分：

订单管理模块：负责处理订单的增删改查操作。
客户管理模块：负责管理客户的 registration 和信息更新。
支付 gateway 模块：负责处理订单的支付流程。
统计与报告模块：负责生成销售统计报表。

设计模式（Design Pattern）

定义：
设计模式是一个抽象的概念，指一组为了解决某一类问题的常用结构。它是软件工程中的一个重要概念，广泛应用于面向对象编程中。

特点：

标准化的命名和表达：每个模式都有一个标准名称和抽象的行为描述。
解决常见问题：设计模式通常用于解决特定类型的问题（如创建对象、对象获取、事务隔离等）。
可扩展性：在遵循模式的前提下，系统可以灵活地添加功能。

常见的设计模式：

工厂模式（Factory Pattern）
构造模式（Constructor Pattern）
表现模式（Presentation Mode）
行为模式（Behavioral Pattern）
策略模式（Strategy Pattern）
模板模式（Template Pattern）
适配器模式（Adapter Pattern）

表现模式与构架模式的区别

特性 表现模式 构架模式
功能分离 数据展示与业务逻辑分离 系统功能模块化，独立开发
目标 提高代码复用性和数据一致性 提高系统的可扩展性、测试性和维护性
依赖关系 强调事务隔离和数据的一致性 通过明确的接口定义功能模块之间的关系
实现方式 使用“表现层”或“数据绑定层”来管理显示逻辑 通过创建功能模块，将系统分解为独立的部分

总结

表现模式主要用于分离数据展示和业务逻辑，提高代码的复用性和可读性。
构架模式则用于系统模块化设计，每个模块负责特定的功能。
设计模式是软件工程中的一个抽象概念，广泛应用于解决常见问题。

在实际项目中，通常会结合使用这些模式，例如：

使用构架模式来实现系统的模块化设计。
在某个模块中使用表现模式来分离显示逻辑和业务逻辑。
使用设计模式（如工厂模式或构造模式）来简化对象的创建或管理。
通过组合使用这些模式，可以提高系统的复用性、可维护性和扩展性。

MVC模式

什么是 MVC 模式？

MVC 是一种软件架构设计模式，最初由IBM在数据库应用中提出，后来被扩展到Web和 GUI 开发领域。它将一个应用程序分解为三个主要部分：

  • 模型（Model）：负责处理数据逻辑、业务功能以及与控制器之间的通信。
  • 视图（View）：负责显示数据的呈现方式，通常是HTML页面或使用前端框架构建的组件。
  • 控制器（Controller）：接收用户输入并传递数据到模型和视图。

    • MVC 在 GUI 开发中的应用

    MVC 模式在 GUI 应用开发中非常流行，原因如下：

  • 分隔数据逻辑与呈现逻辑：将处理数据的逻辑（模型）与显示数据的部分（视图）分开，使得代码更容易维护和复用。
  • 响应式设计：控制器可以实时更新视图，确保用户界面的动态性。这在前端开发中尤为重要，例如处理用户的点击事件、输入字段更改等。
  • 分离 concerns：每个部分有明确的责任，模型负责业务逻辑，视图负责数据展示，控制器负责用户交互，这样每个部分的功能更集中，易于理解和维护。

    • MVC 模式的优点

  • 代码复用性：相同的模型可以被多个视图使用，减少了重复代码。
  • 可扩展性：新增功能时，只需修改模型或控制器，不影响视图。
  • 易测试性：每个部分相对独立，便于单元测试和集成测试。
  • 用户体验一致：通过视图组件化，可以为用户提供标准化的界面元素。

    • MVC 模式的挑战

  • 学习曲线：MVC 模式需要开发者理解三个分隔的部分及其交互机制，初期可能会有一定的学习成本。
  • 复杂性：在大型项目中，如果模型和控制器过于复杂，可能会增加维护难度。
  • 性能优化：由于数据传输的多级化（模型-控制器-视图），可能会影响性能，需要进行适当的缓存策略设计。

    • MVC 模式的变种

    除了标准的 MVC 模式，还有一些变种被应用在特定领域：

  • MVIA（Model-View-Interface-Aggregator）：常用于图形界面编程语言如 Smalltalk 中。它将模型、视图、接口和聚合器分开。
  • V Model：一种适用于前端框架的模式，类似于 MVC，广泛应用于React等框架中。

    • 实际应用示例

    在构建一个简单的电商网站时：

  • 模型（Model）：管理订单信息、商品库存、用户数据等。
  • 视图（View）：展示商品列表页面或购物车内容。
  • 控制器（Controller）：处理用户的搜索输入、添加商品点击事件、订单提交等功能。

    • 总结

    MVC 模式在 GUI 开发中确实是一个指导模式，帮助开发者将数据逻辑与用户界面分离，实现高效的代码结构和良好的用户体验。理解并应用 MVC 模式能够显著提高开发效率和代码质量。

    因此，MVC 模式是图形用户界面（GUI）开发中非常重要的设计模式之一。


    MVVM

    MVVM（Model-View-ViewModel）模式

    MVVM（Model-View-ViewModel）是一种设计模式，通常用于前端开发，特别是在Vue.js等框架中被广泛使用。它是对MVC（Model-View-Controller）模式的一种扩展和优化，主要针对视图层与数据绑定的问题。

    MVVM的核心思想

    在MVC模式中，模型（Model）、视图（View）和控制器（Controller）是分离的三者关系：

  • 模型：负责存储和管理业务逻辑相关的静态或动态数据。
  • 视图：负责将模型的数据呈现给用户。
  • 控制器：负责处理用户的输入事件，并根据业务逻辑更新模型。

    • 然而，MVC模式的一个缺点是，当需要对视图进行动态绑定时，需要通过useEffect等函数手动渲染更新后的视图，这会导致代码冗余、难以维护。

    MVVM模式解决了这个问题，它将模型与视图的绑定关系和数据的双向通信结合起来，提供了更高效的方式来管理数据和视图的动态更新。

    MVVM的主要组件

  • 模型（Model）：

    负责存储和管理业务逻辑相关的静态或动态数据。
    模型的数据可以通过命令（Command）的方式被控制器或其他组件访问和修改。

  • 命令（Command）：

    用于将模型中的数据传递给视图层，并在视图层完成操作后，将结果反馈回模型。

  • 管理器（Manager）：

    负责对命令的执行进行监控。
    管理器确保命令的执行顺序和依赖关系。

  • 镜像层（Mirror）：

    管理器与模型之间的一个中间层，负责将模型的数据传递给视图层，并根据视图层的反馈更新模型。

  • 绑定层（Binding）：

    将数据从模型传递到视图组件中的组件属性上。
    它可以用来实现单点绑定或多点绑定，并支持动态键值对。

    • MVVM的工作流程

  • 创建模型、命令和管理器：

    在组件的生命周期开始时，初始化模型、命令和管理器实例。

  • 绑定视图与模型：

    使用<mx:Binding>标签将模型的数据传递到视图组件中的属性上。
    确保数据双向绑定，即当视图更新时，模型也会同步更新；反之亦然。

  • 绑定命令与管理器：

    使用useCommand = true标记的命令实例绑定到管理器。
    这些命令会通过useMirror传送到镜像层，并在视图层完成操作后反馈回模型。

  • 绑定视图与命令：

    在视图组件中使用<mx:Command>标签，将数据传递给命令实例。
    命令完成后，使用管理器来更新模型。

    • MVVM的优势

  • 数据一致性：通过镜像层和绑定层的双向通信机制，确保模型、视图和命令之间的数据一致性。
  • 组件化开发：每个组件（模型、命令、管理器）都有明确的功能边界，便于理解和维护。
  • 动态绑定：能够实现视图与模型的双向数据绑定，避免手动渲染的问题。

    • MVVM与MVC的区别

  • 数据绑定：

    MVC模式需要通过useEffect等函数手动渲染更新后的视图，导致代码冗余。
    MVVM模式通过镜像层和绑定层实现自动化的数据绑定和双向通信。

  • 命令执行：

    MVC模式没有内置的命令机制，无法直接将模型的数据传递给视图或组件。
    MVVM模式引入了命令机制，允许开发者更灵活地处理业务逻辑。

    • MVVM的使用场景

    MVVM模式非常适合需要对视图和数据进行深度绑定的应用场景，例如：

  • 高级表格（Grid）：实现动态列添加/删除、数据排序等操作。
  • 组件化布局：实现响应式设计中的自动缩放或布局调整。
  • 数据可视化：实现动态图表的数据更新。

    • 总结

    MVVM模式通过将模型、命令和管理器结合在一起，实现了数据的双向绑定和高效的业务逻辑处理。它非常适合需要深度数据绑定和复杂组件化开发的应用场景。