组件库的使用和自定义组件 | 青训营笔记

75 阅读2分钟

什么是组件

组件=部件=元件=构件=组成=分枝

工业品组件:具有标准接口和某种功能且可复用的标准零部件

软件组件:封装好的可复用的程序“零部件”

什么是组件库

  • 一致性
  • 效率
  • 协同

搭建业务组件库-关键点

  • 架构设计
    • 单包架构
    • 多包架构
  • 技术方案
    • 开发环境
    • 样式方案
    • 产物构建
    • 质量保障
    • 组件开发
  • 对外文档
    • Demo展示
    • 组件API生成
    • 版本日志

架构设计

  • 单包架构:一个代码仓库里所有组件打包成一个整体,发布出去一个npm包
  • 多包架构:一个代码仓库包含多个组件代码,会发布出去多个npm包
单包架构
  • 优点
    • 公共代码易复用
    • 展示更聚合,便于维护
    • 引入一个包即可使用全部组件
  • 缺点
    • 修改一个组件需要更新整个库
    • 需要考虑按需加载
多包架构
  • 优点
    • 单独发包,升级灵活
    • 在同一仓库下,便于代码管理
    • 使用者无需考虑按需加载
  • 缺点
    • 组件间相互依赖时,需要通过npm包引入
    • 组件使用时需要安装每一个用到的npm包

什么是好的组件

  • 高内聚,低耦合
    • 职责清晰,高可维护性
      1. 对外提供简单稳定的接口,对内关注内部逻辑的实现
      2. 组件和组件之间能简单的配合实现定制的功能
  • 通用性、易扩展
    • 基础组件适用广泛的业务场景
      1. 适用于不同行业的业务平台
    • 业务组件适用于针对性平台
      1. 具备显著的业务属性,一般基于基础组件开发
  • 项目组织
    • 语义化命名
    • 包含和组件名最后一致
    • 单独维护类型文件
  • 组件设计
    • 组件属性定义
    • 类名前缀统一
    • 避免行内样式
    • 避免在JS中耦合CSS
    • 注意样式的按需加载