UI库架构设计

news/2024/11/14 11:54:21 标签: ui

UI库架构设计

  • 分层
    • rc-xxx,提供基础组件,unstyled component (headless) ,只具备功能交互,不具备UI表现
    • 样式体系
    • 基础组件
    • 复合组件,Search:Input + Select ,IconButton:Icon + Button
    • 业务组件
  • 解耦
    • 对于每个组件都需要定义样式、ts、类型、基础操作、工具方法
  • 响应式设计
    • 媒体查询 media query、ResizeObserver、grid布局

全局状态

  • 全局状态,基础配置、国际化配置、主题配置,react >> Context 、useSyncExternalStore,vue >> vue-demi
  • 局部状态,表单场景,受控和非受控(状态是否跟表单值双向绑定)
    • 受控:<input value={v} onChange={(v)=>setV(v)}
    • 非受控 defaultValue + ref

样式体系与主题设计

  • Color Tokens:颜色色值系统,(antdDesign、arcoDesign (css in js方案)| mantineUI | mui |shadcn/ui
  • 样式模块化方案:
    • css-in-js(弊端:运行时(运行时的内存损耗)、srr支持不好):emotion、styled-component
    • module css
  • 样式优先级与覆盖:控制样式优先级

模块化

  • 可复用性
  • 公共方法:颜色计算函数,格式化处理,本地化,工具函数

组件开发流程

  • 工程架构:monorepo,core + components + hooks +utils …

  • TypeScript

  • 流程化、规范化、自动化,

    • script如何定义(CI/CD 源头)
    • 规范化(eslint、stylelint、commitlint)
    • 颜色值生成,自动构建,增量构建,构建缓存
  • 构建打包:rollup、esbuild、swc

  • 测试,单元测试,vitest,jest+react-testing-library


http://www.niftyadmin.cn/n/5751866.html

相关文章

轻翼AI 1.3:支持附件识别、可在轻流系统中“随心”调用AI能力

支持更多模态、能与轻流业务系统进一步融合的轻翼1.3版本来啦&#xff01; 轻翼 AI 是一款企业级 AI 智能体搭建平台&#xff0c;支持使用者自主创建各类智能体&#xff0c;包括且不限于AI财务、AI法务、AI销售顾问等&#xff0c;并可与轻流系统进行深度集成&#xff0c;直接在…

单片机和FPGA有什么区别?

单片机&#xff08;Microcontroller Unit&#xff0c;MCU&#xff09;和FPGA&#xff08;Field-Programmable Gate Array&#xff0c;现场可编程门阵列&#xff09;是两种不同类型的电子组件&#xff0c;它们在设计、功能和应用方面有显著的区别&#xff1a; 1. 设计和可编程性…

OpenHarmony-1.启动流程

OpenHarmony启动流程 1.kernel的启动 流程图如下所示&#xff1a;   OpenHarmony(简称OH)的标准系统的底层系统是linux&#xff0c;所以调用如下代码&#xff1a; linux-5.10/init/main.c: noinline void __ref rest_init(void) {struct task_struct *tsk;int pid;rcu_sch…

GitHub Copilot使用指南:助力开发者加速编程创新

GitHub Copilot使用指南&#xff1a;助力开发者加速编程创新 简介 1. GitHub Copilot的诞生背景 近年来&#xff0c;AI技术在各行各业迅速发展&#xff0c;尤其是在编程和开发领域&#xff0c;通过自然语言处理和机器学习&#xff0c;AI逐渐能够理解人类的需求和语言。GitHub…

Vue全栈开发旅游网项目(11)-用户管理前端接口联调

联调基本步骤 1.阅读接口文档 2.配置接口地址 3.使用axios获取数据 4.将数据设置到模型层 1.发送验证码联调 1.1 配置接口地址 文件地址&#xff1a;src\utils\apis.js //系统相关的接口 const SystemApis {sliderListUrl:apiHost"/system/slider/list/",//发送…

缓存淘汰策略及其使用场景详解

缓存是计算机科学中一个重要的概念&#xff0c;它通过存储临时数据来提高数据访问速度&#xff0c;减少对主存储器或数据库的访问次数。然而&#xff0c;缓存空间是有限的&#xff0c;当缓存满了之后&#xff0c;就需要决定哪些数据应该保留&#xff0c;哪些应该被移除&#xf…

Flink_DataStreamAPI_输出算子Sink

Flink_DataStreamAPI_输出算子Sink 1连接到外部系统2输出到文件3输出到Kafka4输出到MySQL&#xff08;JDBC&#xff09;5自定义Sink输出 Flink作为数据处理框架&#xff0c;最终还是要把计算处理的结果写入外部存储&#xff0c;为外部应用提供支持。 1连接到外部系统 Flink的D…

Day15上 - RNN的使用,评论分析,情感识别

RNN的使用 1. RNN 要解决什么问题&#xff1f; 时序信号的抽取特征顺序 2. RNN 的解决方法 循环逐个处理前后依赖 后一项直接依赖前一项&#xff0c;间接依赖前面所有的项前后进行【手递手】传递中间隐藏状态 3. RNN API 如何调用&#xff1f; nn.RNN 自动挡&#xff08;…