关注「有鱼软考」，系统架构设计师备考干货持续更新。表现层是案例题常客，MVC / MVP / MVVM 三者区别、以及"XML 描述 + 解析器"的多端统一思想，是本节必须拿下的考点。

一、本节一句话

表现层框架设计 = MVC 系模式（MVC / MVP / MVVM 逐层解耦视图与模型）+ XML 描述（一套 GUI 描述多端统一、动态生成）+ UIP（微软 UI 流程框架管导航与工作流）

二、知识框架

• ▪▪ ▪ ▪ • 表现层设计模式：MVC（View 可直读 Model）/ MVP（View 经 Presenter）/ MVVM（ViewModel 双向绑定）
• ▪▪ ▪ ▪ • XML 统一描述 GUI：控件即结点、属性即 attribute，解析器按表现技术生成实例（策略模式）
• ▪▪ ▪ ▪ • UIP 设计思想：UIC（用户可见）+ UIP（协调导航/工作流，用户不可见）
• ▪▪ ▪ ▪ • 基于 XML 的界面动态生成：界面配置 / 界面定制 / 界面动态生成

三、核心内容

表现层设计模式

1. MVC 模式

• ▪▪ ▪ ▪ • Model（模型） ：应用程序主体，表示业务数据和业务逻辑；一个模型能为多个视图提供数据，提高可重用性。
• ▪▪ ▪ ▪ • View（视图） ：用户看到并交互的界面，显示数据、接收输入，但 不进行实际业务处理 ；只查模型状态、不改模型，并接收模型更新事件同步界面。
• ▪▪ ▪ ▪ • Controller（控制器） ：接受用户输入并调用模型与视图，是用户界面与 Model 的接口；解释视图输入为系统对象、识别用户动作为模型方法调用、处理模型事件并选视图反馈。
• ▪▪ ▪ ▪ • 协作流程 ：控制器接收请求 → 决定调用哪个模型 → 模型处理业务并返回数据 → 控制器选相应视图格式化数据并呈现。
• ▪▪ ▪ ▪ • 优点 ：①允许多种用户界面扩展（增新类型界面只改 View + Controller，模型不动）；②易于维护（保持公共接口，旧版控制器/视图可继续用）；③功能强大的用户界面（界面与模型方法组合，清晰友好）。
• ▪▪ ▪ ▪ • 定位 ：MVC 是构建应用框架的较好模式，目前较先进的 Web 应用框架都基于 MVC。

2. MVP 模式

• ▪▪ ▪ ▪ • 与 MVC 的区别 ：MVP（Model-View-Presenter）基本思想相通，但 MVC 允许 View 与 Model 直接"交流"，而 MVP 中 View 不直接使用 Model，须经 Presenter 通信 ；所有交互发生在 Presenter 内部。
• ▪▪ ▪ ▪ • 进一步解耦 ：Presenter 依赖的是抽象化 View（即 View 实现的接口 IView ），使定义在 Presenter 中的 UI 处理逻辑易于测试——只需一个实现 IView 的 View 即可测试 Presenter。
• ▪▪ ▪ ▪ • 优点 ：①模型与视图完全分离，改视图不影响模型；②更高效使用模型（交互集中一处）；③一个 Presenter 可用于多个视图、逻辑不变（视图变化比模型频繁，很实用）；④逻辑放 Presenter 可脱离用户接口做单元测试。
• ▪▪ ▪ ▪ • 应用 ：目前更多地用在 Android 开发中。

3. MVVM 模式

• ▪▪ ▪ ▪ • 核心 ：MVVM（Model-View-ViewModel）为解决 MVP 中 UI 种类变多、接口也增加的问题而提出。 ViewModel 是核心 ，通过 DataBinding 实现 View 与 Model 双向绑定 ，内容包括数据状态处理、数据绑定及数据转换。
• ▪▪ ▪ ▪ • 双向绑定机制 ：View 与 Model 不能直接通信，只能经 ViewModel。ViewModel 通常实现观察者：数据变化 → VM 监听并通知视图更新；用户操作视图 → VM 监听并通知数据改动，形成双向绑定。
• ▪▪ ▪ ▪ • 适用与注意 ：更适用于数据驱动、数据操作频繁的场景；但双向绑定导致问题难定位来源（可能数据问题，也可能视图属性修改）。若采用 MVVM，建议用官方架构组件 ViewModel、LiveData 实现。

用 XML 设计表现层，统一 Web Form 与 Windows Form

• ▪▪ ▪ ▪ • 背景 ：XML 标记用于定义数据结构与类型（不同于 HTML 控制显示）；表现层仍由 HTML 唱主角，但胖客户端（Windows Form）有回归趋势，两种技术长期并存，厂商要求既支持胖客户端又支持 Web。
• ▪▪ ▪ ▪ • 思路 ：把 GUI 用标准 XML 描述，不同表现形式提供特定转换器。GUI 主要由控件组成，控件可看成含位置/类型/绑定事件的数据对象，在 XML 中作为结点，属性作为结点的 attribute；XML 树形结构天然支持控件层次。
• ▪▪ ▪ ▪ • 描述约定（要点） ：用 component 结点表示控件，type 属性区分控件种类（如 panel 表示控件容器、button 表示按钮），constraint 属性记录位置坐标（如 16,22,78,200 表示面板位置）；一个容器结点可嵌套子控件结点，从而完整描述整棵 GUI 树。
• ▪▪ ▪ ▪ • 解析（策略模式） ：调用显示 GUI 时不直接调特定表现技术 API，而是装载 XML 配置，由特定解析器解析生成 GUI 实例。例如遇到 button，JFC 解析器给 JLabel 对象，XSLT 解析器给对应的 HTML 字符串，再调 API 添加显示。GUI 开发人员只需维护一套 XML 文件。

表现层中 UIP 设计思想

• ▪▪ ▪ ▪ • 问题 ：用代码管理用户界面（如窗体决定下一窗体）会使代码复杂、难复用维护，且难移植到其他平台；状态存窗体中难恢复，用户中途关闭会丢失状态。
• ▪▪ ▪ ▪ • UIP（User Interface Process Application Block） ：微软社区开源 Application Block，提供扩展框架，简化 UI 与商业逻辑分离，写复杂导航和工作流，可复用、可随应用增加扩展。
• ▪▪ ▪ ▪ • 两层结构 ：① User Interface Components（UIC） = 原表现层，用户看到并交互，取数据返结果；② User Interface Process Components（UIP） = 用户不可见，协调 UI 各部分配合后台活动（导航、工作流控制、状态与视图管理），为 UIC 提供重要支持。
• ▪▪ ▪ ▪ • UIP 职责 ：管理经 UIC 的信息流；管理各事件间事务；响应异常修改用户流程；将概念性交互从设备/实现上分离；保持内部事务关联状态（常持有一个或多个交互事务实体）。

表现层动态生成设计思想

• ▪▪ ▪ ▪ • 基于 XML 的界面管理三块 （见图 13-6）：① 界面配置 （静态定义，读配置文件初始值；可裁剪/重组/扩充功能）；② 界面定制 （运行期用户改菜单/工具栏/键盘命令等属性，结束保存）；③ 界面动态生成 （运行时由 DOM API 读 XML 表示层信息、数据存取类读库，动态生成界面）。
• ▪▪ ▪ ▪ • 价值 ：实现用户界面描述信息与功能实现代码分离，可针对不同用户需求配置定制，适应一定程度内数据库结构改动，只改 XML 即可移植。

四、关键概念速查表

五、易错·易混

六、章节速记

• ▪▪ ▪ ▪ • 三句话回顾 ：①MVC 三件套：模型/视图/控制器，View 可直读 Model。②MVP/MVVM 进一步解耦视图与模型（Presenter/IView、ViewModel/绑定）。③XML 描述 + 解析器实现多端统一与动态生成。
• ▪▪ ▪ ▪ • 记忆口诀 ：MVC 分三块，MVP 加 Presenter，MVVM 双向绑，XML 一套通多端。
• ▪▪ ▪ ▪ • 关键词链 ：表现层 → MVC → MVP(Presenter/IView) → MVVM(ViewModel/绑定) → XML 描述(策略) → UIP(导航) → 动态生成
• ▪▪ ▪ ▪ • 自测三问 ：①MVC 三者职责？②MVP 与 MVC 最大区别？③MVVM 靠什么双向绑定？
• ▪▪ ▪ ▪ • 答案 ：①Model 业务 / View 界面 / Controller 调度；②View 不能直接用 Model 须经 Presenter；③DataBinding（观察者机制）。

如果本文帮你分清了 MVC / MVP / MVVM，欢迎点赞、收藏、关注「有鱼软考」，下一节进入中间层架构设计。