为什么要去封装一个组件

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

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

组件应该具备的特性

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

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

如何去设计一个组件

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

组件的应用场景

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

组件的外观

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

组件的状态

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

组件的功能

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

组件的数据来源

  • props
  • 全局store
  • 接口获取

组件的操作性

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

组件的事件交互

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

组件的API命名

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