Sunmao-UI 项目中的 Trait 开发指南

最新推荐文章于 2025-06-30 09:06:06 发布

薄昱炜

最新推荐文章于 2025-06-30 09:06:06 发布

阅读量269

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/gitblog_00850/article/details/149012017

Sunmao-UI 项目中的 Trait 开发指南

什么是 Trait

在 Sunmao-UI 项目中，Trait 是一种用于增强组件能力的机制。简单来说，Trait 就像是给组件添加的"插件"或"装饰器"，可以为组件增加额外的功能、状态或方法。

Trait 与组件有许多相似之处，但也有一些关键区别：

| 特性 | Trait | 组件 | |------|-------|------| | 拥有自己的规范 | ✅ | ✅ | | 包含属性、状态和方法 | ✅ | ✅ | | 需要实现逻辑 | ✅ | ✅ | | 实现是一个函数 | ✅ | ✅ |

Trait 的核心概念

纯函数特性

Trait 本质上是一个纯函数，它接收一系列参数，执行一些逻辑，然后返回一个 TraitResult 对象来增强组件的能力。这意味着：

相同的输入总是会产生相同的输出
不应该产生副作用（如直接修改外部状态）
不能使用 React Hooks

与组件共享标识

Trait 没有自己的独立 ID，而是与组件共享 ID。这意味着：

Trait 暴露的状态和方法会被添加到组件中
访问这些状态和方法的方式与组件自身实现的无异

实战：开发一个 Timer Trait

让我们通过开发一个 Timer Trait 来深入理解 Trait 的开发流程。这个 Trait 将具备以下功能：

设置定时器，时间到后弹出提示
提供清除定时器的功能
可选择组件挂载后立即启动定时器
获取定时器状态（等待中、已完成、已停止）

第一步：定义 Trait Spec

首先我们需要定义 Trait 的规范，包括版本、名称、描述等基本信息：

{
  version: 'custom/v1',
  metadata: {
    name: 'timer',
    description: '创建定时器并在时间到后提示，可手动清除',
  },
  spec: {
    properties: PropsSpec,  // 属性规范
    state: StateSpec,      // 状态规范
    methods,              // 方法定义
  },
}

第二步：设计属性规范

我们需要考虑 Timer Trait 需要哪些配置参数：

const PropsSpec = Type.Object({
  time: Type.Number(),     // 定时时长
  content: Type.String(), // 提示内容
  immediate: Type.Boolean(), // 是否立即启动
});

第三步：设计状态规范

Timer Trait 需要暴露的状态：

const StateSpec = Type.Object({
  status: Type.KeyOf(
    Type.Object({
      waiting: Type.Boolean(),  // 等待中
      finished: Type.Boolean(), // 已完成
      stopped: Type.Boolean(),  // 已停止
    })
  ),
});

第四步：定义方法

Timer Trait 需要提供的方法：

const methods = [
  {
    name: 'start',  // 启动定时器
    parameters: Type.Object({}),
  },
  {
    name: 'clear',  // 清除定时器
    parameters: Type.Object({}),
  },
];

第五步：实现 Trait 工厂函数

由于 Trait 是纯函数，我们需要使用工厂函数来创建闭包存储状态：

const TimerTraitFactory = () => {
  const map = new Map(); // 存储各组件定时器

  return props => {
    const { time, content, immediate, componentId, mergeState } = props;
    
    const clear = () => {
      const timer = map.get(componentId);
      if (timer) {
        clearTimeout(timer);
        mergeState({ status: 'stopped' });
        map.delete(componentId);
      }
    };
    
    const start = () => {
      clear();
      const timer = setTimeout(() => {
        alert(content);
        mergeState({ status: 'finished' });
      }, time || 0);
      
      mergeState({ status: 'waiting' });
      map.set(componentId, timer);
    };

    return {
      props: {
        componentDidMount: [() => immediate && start()],
        componentDidUnmount: [clear],
      },
    };
  };
};

第六步：创建最终 Trait

使用 implementRuntimeTrait 将各个部分组合起来：

export default implementRuntimeTrait({
  version: 'custom/v1',
  metadata: {
    name: 'timer',
    description: '创建定时器并在时间到后提示，可手动清除',
  },
  spec: {
    properties: PropsSpec,
    state: StateSpec,
    methods,
  },
})(TimerTraitFactory);