什么是组件
组件=部件=元件=构件=组成=分枝
工业品组件:具有标准接口和某种功能且可复用的标准零部件
软件组件:封装好的可复用的程序“零部件”
什么是组件库
- 一致性
- 效率
- 协同
搭建业务组件库-关键点
- 架构设计
- 单包架构
- 多包架构
- 技术方案
- 开发环境
- 样式方案
- 产物构建
- 质量保障
- 组件开发
- 对外文档
- Demo展示
- 组件API生成
- 版本日志
架构设计
- 单包架构:一个代码仓库里所有组件打包成一个整体,发布出去一个npm包
- 多包架构:一个代码仓库包含多个组件代码,会发布出去多个npm包
单包架构
- 优点
- 公共代码易复用
- 展示更聚合,便于维护
- 引入一个包即可使用全部组件
- 缺点
- 修改一个组件需要更新整个库
- 需要考虑按需加载
多包架构
- 优点
- 单独发包,升级灵活
- 在同一仓库下,便于代码管理
- 使用者无需考虑按需加载
- 缺点
- 组件间相互依赖时,需要通过npm包引入
- 组件使用时需要安装每一个用到的npm包
什么是好的组件
- 高内聚,低耦合
- 职责清晰,高可维护性
- 对外提供简单稳定的接口,对内关注内部逻辑的实现
- 组件和组件之间能简单的配合实现定制的功能
- 职责清晰,高可维护性
- 通用性、易扩展
- 基础组件适用广泛的业务场景
- 适用于不同行业的业务平台
- 业务组件适用于针对性平台
- 具备显著的业务属性,一般基于基础组件开发
- 基础组件适用广泛的业务场景
- 项目组织
- 语义化命名
- 包含和组件名最后一致
- 单独维护类型文件
- 组件设计
- 组件属性定义
- 类名前缀统一
- 避免行内样式
- 避免在JS中耦合CSS
- 注意样式的按需加载