前言

总所周知，组件化的开发模式对于开发效率有非常大的提升

针对我们经常遇到的业务场景或者UI进行封装，可以让我们在遇到相同或者类似的业务场景时可以快速复用，并且对一些常用UI组件进行封装可以让我们降低对于基本UI的关注度，并且自己去封装一些组件也是极好的学习方式，也便于我们对于业务的理解，所以这就是我选择自己封装组件库的原因。

技术选型

语言：TypeScript

生态：React

打包工具：webpack

CSS预处理器：Less

单元测试：Jest

组件库的构成

在构建一个完整的组件库时需要考虑很多东西，例如：

1.组件设计思路

2.组件的代码规范

3.组件测试

4.组件维护

组件设计思路

一、通用样式设计

作为一个前端UI库，如果从样式的角度去考虑，首先应该保证的是各个组件的视觉风格和交互规范一致，如果某一个组件在不同业务场景有不同的交互和UI风格，那么想对该组件进行抽象和封装是很困难的事情。

(1)设计规范

组件的视觉风格和交互规范一致性很多程度上是由设计规范决定的，而设计规范大概上我认为是包括了统一视觉样式和统一的交互动效，具体如下图所示：

注：需要注意的是视觉的设计通常要足够颗粒化，视觉和逻辑需要做到尽量解耦，把视觉元素作为可拆卸的零件嵌入组件中去，原因我想应该不需要多解释各位老油条们也应该懂的

二、具体组件设计思路及流程

(1)需求及应用场景分析

我们在设计组件的时候需要充分考虑到组件会使用的场景和使用方式 例如以最简单的button来考虑： botton是通过点击来执行某一个具体的动作或者行为 那么它的使用场景就是：当用户需要触发某个业务行为逻辑的时候会去使用按钮

从样式角度分析该组件需求

1.按钮有什么不同的类型

2.按钮拥有什么样的代表状态

3.按钮拥有多少种尺寸

4.按钮一般拥有什么动画效果

5.按钮文字样式及其规范

..........

从操作上分析需求

总结： 在设计一个组件时，我们通常要从样式和具体逻辑两个角度出发去考虑需求。

对于从样式出发，我们一般需要考虑：

• (1)该组件有多少种类型。
• (2)该组件是否有不同的状态。
• (3)该组件有多少种尺寸。
• (4)该组件需要有什么样的动画效果
• (5)该组件种的文字表现样式和规范。
• ..........

而从具体逻辑出发考虑，不同的组件有不同的需求，这里就不做具体分析了

(2)API设计分析

API的设计依旧从样式和其他方面来考虑 这里依旧拿button来举例

从样式上考虑API的设计

从其他方面考虑API的设计

1.根据操作事件行为暴漏

例如：onclick、keydown之类的事件

2.根据具体需求去设计API

3.选择暴露一些原生接口，例如button原生的type

4.................................

(3)组件设计流程

三、组件测试

四、组件维护

参考文章

组件库通用样式设计总结

组件库样式总体讨论