[ 组件库的使用与自定义组件 | 青训营笔记 ]

会会会
241 阅读5分钟

社区组件库

image.png

暗黑模式

image.png

点击按钮，切换主题

document.body.setAttribute('arco-theme', 'xxx');

image.png

局部应用暗色模式

核心思路：本质是控制暗色颜色变量的挂载位置，提高我们所需要的颜色变量的优先级

image.png

国际化-语言国际化

不是通过if...else来判断当前是何种语言 而是从全局配置上读取Locale文件

image.png

实现动态语言切换 直接通过ConfigProvider组件传入不同语言文件去修改locale

image.png

image.png

当需要的语言还未支持时，我们可以模仿官方的语言文件格式，来自定义一个语言文件。

自定义语言包文件 custom-locale.ts

image.png

通过configProvider组件消费

image.png

国际化-RTL视图

LRT视图

image.png

RTL视图

image.png

如何开启RTL视图？

image.png

RTL视图实现浅析

  • 元素方向RTL CSS属性，direction：rtl;（用来设置文本和其他元素的默认方向是从右到左）
  • 布局RTL margin-left => margin-right position: left => position: right
  • 交互行为 Slider组件，向左拖动数值变小 => 向右拖动数值变小

ConfigProvider - 全局配置组件默认属性

定义组件配置

image.png

通过ConfigProvider的componentConfig属性，传入定义好的配置文件，组件配置将会对ConfigProvider包裹的所有组件生效

image.png

  • 配置未启用

image.png

  • 配置已启用

image.png

自定义组件

业务组件库搭建

打地基 - 盖房子 - 装修

架构设计 - 技术方案 - 对外文档

架构设计

单包架构

一个代码仓库里所有组件打包成一个整体，发布出去一个npm包

package.json在根目录

image.png

优点
  • 公共代码易复用
  • 展示更聚合，易于维护
  • 引入一个包即可使用所有组件
缺点
  • 修改一个组件需要更新一整个库
  • 需要考虑按需加载

多包架构

一个代码仓库包含多个组件代码，会发布出去多个npm包

每个组件都有对应的package.json

image.png

优点
  • 单独发包，升级灵活
  • 在同一仓库下，便于代码管理
  • 使用者无需考虑按需引入
缺点
  • 组件之间相互依赖，需通过npm引入
  • 组件使用时，需要安装每一个用到的npm包

image.png

技术方案

开发环境
  • 打包速度
  • 实时预览，如storybook
样式方案
  • 样式方案：Less / Sass，CSS in JS，CSS等，如果有较强依赖的第三方库的话，可以与第三方库保持一致
  • 组件库换肤，样式定制等能力
产物构建
  • 构建工具：webpack，rollup，vite，gulp等
  • 产品格式：cjs，umd，es

如果需要支持node环境的话，就需要包cjs格式 如果需要CDN引用的话，就需要包含umd格式

质量保障
  • 测试工具：jest，karma，mocha，enzyme，react-testing-libary等
  • 测试类型：单元测试，快照测试，截屏测试，e2e测试等
组件开发

对外文档

文档部署
  • Demo展示：Storybook，umijs等
  • 静态内容展示：markdown
组件API生成
  • 手写
  • 自动提取：ts-document等
版本日志
  • 手写
  • 自动提取：从PR提交记录中自动提取@arco-design-changelog

组件开发规范

  • 高内聚、低耦合

职责清晰，高可维护性

对外提供简单稳定的接口，对内关注内部逻辑的实现。

组件和组件之间能简单的配合实现定制的功能。

比如:Popver直接嵌套Input即可实现:在输入框聚焦时显示气泡提示内容。

image.png

  • 通用性、易扩展

基础组件适用广泛的业务场景

比如金融，电商，政务等业务平台业务组件适用于针对性平台

具备显著的业务属性，一般基于基础组件开发。比如︰通过关键字调接口搜索Lark 群聊

image.png

项目组织

语义化命名

组件的命名应当具有语义，并且避免与基础组件冲突。同一团队/仓库下的业务组件，也可采用相同的命名前缀。

image.png

包名和组件名最后一致

NPM包名应当尽量与组件名保持一致，包含明确的使用场景信息。

image.png

单独维护类型文件

推荐将需要对外导出的TS类型维护在单独的interface.ts 中，并将其在index.ts 中导出。

保存代码信息，便于维护

image.png

组件设计

组件属性定义（接口定义）

在为组件定义接口类型时，应继承原生DOM(或基础组件)属性，避免属性遗漏或重复声明。

image.png

类名前缀统一

组件使用特殊且统一的类名前缀，尽量降低与用户类名冲突的可能性。

image.png

避免行内样式

确保外部可通过类名进行样式覆盖。

image.png

避免在JS中耦合CSS

应尽量保证逻辑与样式的分离，确保用户可以分别引入JS和CSS文件，避免由于构建环境的不同导致的用户编译失败的问题。

image.png

注意样式的按需加载

在基于基础组件库如Arco进行业务组件的逻辑封装时，应注意按需引入所依赖的Arco基础组件的样式文件

image.png

实例实践guide-tip

image.png

image.png

API定义

image.png

  1. 显示弹出层:Arco Popover组件
  2. 步骤切换:状态变量current记录当前处于哪一步骤
  3. 弹出层始终指向对应的 Button:实时获取目标节点的位置，更新弹出层指向。

image.png

业务组件快速托管

avatar
文章
阅读
粉丝