参考来源
要点总结
1.清晰的types类型定义&导出
清晰的类型定义不仅能降低组件使用门槛,也能使组件减少大部分js错误
2.可扩展插槽
提供可扩展插槽,允许使用方使用自定义children
做进一步扩展。
例如ant design里的Card既可以单独使用,通过属性配置实现预置的布局,也可以包裹子view实现自由扩展
3.开放底层组件Props
这适用于我们的组件是基于elementUI
等底层组件库做了进一步封装的情况下,我们最好保留磁层组件的原有功能,并可以让用户访问它们。
4.支持受控模式和非受控模式
一个好用的公共组件需要支持受控模式和非受控模式,即既能能够满足普通用户的最简使用需求(组件内部自己维护状态),也能够满足高级用户的自定义需求(由使用方传入state
值和onChange
方法)
5.样式隔离
CSS没有作用域概念,引入即全局生效,肯定不能让我们组件库的组件层级的样式影响到全局样式,为了避免样式冲突,我们就需要对样式进行隔离,一般就是通过给组件库内组件的样式添加一个特定的前缀,例如element-ui
使用el-
作为前缀
6.组件库内的埋点监控
收集使用和异常等数据,可以得知组件的使用情况,得知线上出现的问题,从而更好的进行运维和迭代
7.从业务中沉淀组件
公司内开发公共组件库,最好的就是从业务自身角度总结沉淀,发现痛点,推己及人,公共组件库首要就是能解决大家业务中的共性问题。
8.衡量ROI
通过监控等数据,分析每个组件在一定周期内可以被多少人员使用,使用多少次,每次节省人力多少,等等,从而准确评估出维护该组件库的投入产出比,费大量人力创建的组件库没有人使用,那是不如不做的。
9.做好客服和运维
最好有自己的主页,客服群,开发群,将一切正规化
10.详实的架构文档或者使用说明文档
11.把控代码风格、规范和质量
如果接受外部团队PR,协作共建,需要严格做好代码review,在代码编写风格、规范上做统一要求