前端开发公共组件库的思路

404 阅读2分钟

参考来源

blog.csdn.net/weixin_5331…

要点总结

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,在代码编写风格、规范上做统一要求