如何设计一个组件（二）- 应该怎么封装业务组件

为什么要去封装一个组件

• 在别的地方有相同或者是类似的特征，避免重复的工作量；
• 使代码逻辑更加清晰，方便项目的后期维护；
• 封装组件使组件的使用者不用去关心组件的内部实现以及原理，能够使一个团队更好的有层次的去运行；

封装组件很大的一个目的就是代码的维护和协同开发方面，以及在编码过程中提高效率。

组件应该具备的特性

对于组件的设计，一般是一个组件能够完整的完成一件事情，或者一个完整的逻辑。另外组件的设计一般是讲究高内聚，低耦合等原则进行设计。一个组件的设计应该具备以下的内容：

• 功能独立和唯一
• 可复⽤的模块，完成既定功能
• 有明确的接⼝规定
• 有上下⽂依赖、外部依赖资源的定义
• 可以独⽴发布

如何去设计一个组件

自定义组件的封装可以从以下这几个角度去考虑

组件的应用场景

• 对话框
• 模态窗口
• 表单
• 卡片
• 工具栏
• 按钮

组件的外观

• 背景色
• 边框
• 颜色
• 宽高

组件的状态

• 默认状态
• 初始状态
• 信息状态
• 警告状态
• 危险状态

组件的功能

• 输入
• 输出
• 下拉选择
• 数据展示

组件的数据来源

• props
• 全局store
• 接口获取

组件的操作性

• 回车键点击
• 鼠标点击
• 触摸点击
• 禁止点击

组件的事件交互

• hover事件
• click事件
• 回车键keydown事件
• tap事件

组件的API命名

• type：按钮状态
• size：按钮尺寸
• color：按钮颜色
• text：按钮内的文本
• icon：按钮内的图标
• htmlType：原生按钮支持的type属性
• attrs：其他的原生属性
• variant：按钮形态
• click：鼠标点击事件
• tap：触摸屏点击事件
• keydown：回车键按下事件

---

参考链接：
前端组件封装原则