MVVM 辅助工具

简介

MVVM 辅助工具，属于 GZMJS 项目的基础库。

版本

当前版本：0.1.5

包名

@gzmjs/mvvm

功能特性

• 提供 MVVM 模式的核心支持
• 数据绑定和视图模型管理
• 事件系统和模型代理
• 与 GZMJS 生态系统无缝集成

安装

pnpm add @gzmjs/mvvm

使用方法

使用示例

import { createViewModel, onModelEvent } from '@gzmjs/mvvm';

// 创建视图模型
const viewModel = createViewModel({ name: 'test', value: 123 });

// 订阅事件
onModelEvent(viewModel, (event) => {
  console.log('Model changed:', event);
});

核心概念

本包提供了 MVVM（Model-View-ViewModel）架构的核心实现，包括以下主要功能：

1. 模型事件系统 (model/00-event)

提供模型事件的基础类型和工具函数：

• PlainObject - 普通对象类型
• isPlainObject() - 判断是否为普通对象
• ModelItem - 模型项类型
• ModelList - 模型列表类型
• pauseModelEvent() - 暂停模型事件
• ModelListResetEvent - 模型列表重置事件

2. 模型管理 (model/03-model)

提供模型创建和管理功能：

• updateMultiProps() - 批量更新模型属性
• createViewModel() - 创建视图模型代理
• createDataSource() - 创建数据源代理
• onModelEvent() - 订阅模型事件
• offModelEvent() - 取消订阅模型事件
• dispatchEvent - 事件分发符号

示例：

import { createViewModel, onModelEvent } from '@gzmjs/mvvm';

// 创建视图模型
const viewModel = createViewModel({ name: 'test', value: 123 });

// 订阅事件
onModelEvent(viewModel, (event) => {
  console.log('Model changed:', event);
});

3. 视图元素 (model/09-view)

提供视图元素基类：

• ViewModel - 视图模型接口
• ViewElement - 视图元素基类
• ModelEventHandler - 模型事件处理器

4. 视图列表 (model/12-viewList)

提供列表视图支持：

• ViewListModel - 视图列表模型接口
• ViewListElement - 视图列表元素基类
• ModelListEventHandler - 列表事件处理器

5. 视图分组 (model/15-viewGroup)

提供分组视图支持：

• ViewGroupElement - 视图分组元素基类
• GroupListEventHandler - 分组列表事件处理器

6. 元素创建 (model/18-create)

提供动态元素创建功能：

• createElement() - 创建 DOM 元素
• createEle() - 根据视图模型创建元素
• ViewModelWithTagName - 带标签名的视图模型类型

7. 数据对象 (data/00-obj)

提供数据对象处理：

• ObjMember - 对象成员类
• ObjValue - 对象值类

8. 列表数据源 (data/03-ListSource)

提供列表数据源管理：

• ListSource<T> - 泛型列表数据源类

9. 数据列表事件处理 (data/06-DataListEventHandler)

提供数据列表事件处理：

• DataListEventHandler - 数据列表事件处理器类
• data2model() - 数据到模型的转换函数

依赖关系

本包无外部依赖。

构建

pnpm run build

许可证

本项目采用 ISC 许可证。