链氪巴士
  1. 首页
  2. 站点导航
  3. 文章
  4. 快讯
  5. 软件
  6. 书刊
  7. 关于

Tencent/omi-Web组件框架

omi是一个Web组件框架,具有信号驱动的反应式编程、众多的模板和组件等丰富内容。它支持多种技术如JSX、Router等,提供了多种项目创建方式。有诸如Todo App这样展示数据与UI自动更新关联的实践案例,还能在Vue、React等框架中使用,实现跨框架的交互和组件集成,是...

访问官网 →

【Github】项目名:Tencent/omi – Web组件框架

项目简介

omi是一个Web组件框架。它具有信号驱动的反应式编程、TDesign Web组件等特点,包含100 + OMI模板及其源代码、OMI表单等众多内容。可以导入相关模块进行组件的创建与操作,并且提供了快速创建不同类型项目(如Omi + Vite + TS/JS项目等)的方式。还拥有多个核心包、未发布到npm的入门套件和示例等。

核心技术

omi框架实现中运用了如信号驱动的反应式编程(reactive – signal),在处理数据时采用反应式函数来实现诸如Todo App中数据与UI的自动更新关联,利用计算属性(computed)来处理如已完成任务数量的计算。在组件创建方面使用了如 @tag装饰器来定义组件,在样式管理上可以利用Constructable Stylesheet来轻松管理和共享样式。并且支持JSX、Function Components、Router、Suspense、Directive、Tailwindcss等技术。

实践案例

  • Todo App:展示了数据导向编程,数据变化时UI自动更新,例如添加或删除待办事项、修改待办事项完成状态时,界面会自动反映这些变化。
  • 在不同框架中的使用:
    • 在Vue框架中,可以定义跨框架组件,如my – counter组件,实现了omi组件与Vue组件的交互,包括数据传递和事件监听等。
    • 在React框架中,通过使用omi组件,如在App函数中使用my – counter组件,实现了React与omi的结合,包括状态管理和事件处理等。

项目总结

omi是一个功能丰富的Web组件框架,它涵盖了从基础的组件创建到与不同流行框架(如Vue、React)集成等多方面的能力。在数据处理和界面更新方面有着独特的反应式编程机制。希望大家对这个项目感兴趣的可以积极留言讨论,分享自己的看法或者使用经验等。

项目地址

GitHub链接直达