菜单

MVVM 实现

相关源文件

此页面解释了 v2rayN 中模型-视图-视图模型 (MVVM) 模式的实现方式。它涵盖了关键组件、它们之间的关系以及实现数据绑定和命令执行的响应式编程方法。有关整体架构的信息,请参阅 架构,有关项目结构详情,请参阅 项目结构

MVVM 模式概述

v2rayN 使用 ReactiveUI 实现 MVVM,这是一个将 MVVM 模式与响应式编程相结合的框架。核心组件包括:

  • 视图 (Views):带有代码后置的 XAML 中的 UI 元素
  • 视图模型 (ViewModels):包含表示逻辑和命令的类
  • 模型 (Models):处理业务逻辑的数据结构和服务

v2rayN 中的 MVVM 架构

来源

ReactiveUI 类层次结构

v2rayN 扩展了 ReactiveUI 的基类以实现 MVVM 模式

来源

视图实现

v2rayN 中的视图实现为带有代码后置的 XAML 文件,负责 UI 渲染和用户交互。它们继承自 ReactiveUI 的基类。

视图初始化

视图在初始化过程中创建并连接到其相应的视图模型

MainWindow 的示例

来源

视图到视图模型的通信

视图通过以下方式与视图模型通信:

  1. 数据绑定:属性和命令
  2. UpdateViewHandler:传递给视图模型的 callback 函数
  3. MessageBus:用于松耦合通信

来源

视图模型实现

v2rayN 中的视图模型包含:

  1. ReactiveCommands:用于处理用户操作
  2. Reactive Properties:在更改时通知的可观察属性
  3. Methods:业务逻辑和服务交互

ReactiveCommand 的声明和实现

来源

响应式属性

来源

绑定机制

v2rayN 在视图的 WhenActivated 方法中使用 ReactiveUI 的绑定系统

MainWindow 的示例绑定

来源

命令执行流程

视图模型中的命令会执行可能与服务或视图交互的方法

MainWindowViewModel 的示例

来源

UpdateViewHandler 模式

v2rayN 使用一种模式,其中视图将 UpdateViewHandler 委托传递给视图模型,允许它们请求 UI 操作

MainWindow 的示例

视图模型中的示例用法

来源

MessageBus 用于事件通信

v2rayN 使用消息总线进行组件间的通信

MainWindow 的示例

来源

跨平台 MVVM 实现

v2rayN 在 WPF(Windows)和 Avalonia(跨平台)版本中实现了 MVVM

框架基类 View主视图文件
WPFReactiveWindow<TViewModel>v2rayN/v2rayN/Views/MainWindow.xaml.cs
AvaloniaReactiveWindow<TViewModel>v2rayN/v2rayN.Desktop/Views/MainWindow.axaml.cs

这些实现遵循相同的模式,但使用了特定于框架的 UI 组件。

来源

总结

v2rayN 应用程序使用 ReactiveUI 实现 MVVM,其中:

  1. 视图 继承自 ReactiveUI 的基类并设置绑定
  2. 视图模型 包含命令、属性和业务逻辑
  3. 模型/服务 处理数据和核心功能
  4. 绑定机制 包括 ReactiveCommand、[Reactive] 属性和 WhenActivated
  5. 通信模式 如 UpdateViewHandler 和 MessageBus

这种架构提供了清晰的关注点分离,使代码更易于维护和测试。

来源