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

为什么要去封装一个组件

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

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

组件应该具备的特性

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

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

如何去设计一个组件

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

组件的应用场景

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

组件的外观

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

组件的状态

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

组件的功能

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

组件的数据来源

  • props
  • 全局store
  • 接口获取

组件的操作性

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

组件的事件交互

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

组件的API命名

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

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

你可能感兴趣的:(前端,前端)