自定义公共组件_细说前端开发UI公共组件的新认识「实践」

作者： 彭道宽

转发链接：https://mp.weixin.qq.com/s/dtmZv4YcQitbKajjNbW_Pg

前言

❝

我除了菜，啥都不是

❞

前段时间，组里决定做一个跨项目、跨业务的 UI 组件库，原因是我们部门的产品越来越多，且每个产品设计到多端(如 Web/Mobile/PC/Android 等)而为了快速响应目标，决定做一套统一且可视化的，拥有部门特色的 UI 组件库。

视觉已经给出了所有组件样式、交互效果，而我们前端组内部也经过一轮轮的评审和讨论，最终每个人都分了几个组件进行开发。而我呢，也分到了几个组件，有稍微简单点的，有存在复杂交互及状态的，这篇文章，主要是记录自己「第一次」开发一个公共组件的思考~

❝

我负责的组件是 : Skeleton 骨架占位组件 、Card 卡片组件、Button 按钮组件、栅格组件

❞

前期准备工作

这属于第一次开发公共组件，之前呢主要都还是在项目里边，抽离一些简单复用逻辑的业务组件，举个例子，对于 Button 组件，与我来说，我之前更多可能考虑的就只是一些常用的状态，比如说之前的Button组件代码是这样的 :

/** * @class Button * @extends {React.Component} * @property {string} text - 按钮文本 * @property {string} size - 按钮大小，small/middle/big * @property {string} icon - 按钮携带的icon，不需要则为空 * @property {string} color - 类型，可选值为 orange/ghost/white * @property {object} style - 样式 * @property {string} textSize - 按钮文案文字大小，small/middle/big/super * @property {boolean} disabled - 可否点击 * @property {string} iconSeat - 按钮icon的位置，left/right * @property {function} onHandleClick - 点击事件 * @property {boolean} isLock - 是否锁定点击(注：如果需要使用锁，请保证所有操作为同步或者所有的异步行为执行完再return) */

这是我结合业务内容，抽离的Button组件，有一丝丝公共组件的样子，但是其实还是远远不够的。于是，此次在开发公共组件之前，我特意的去做了充足的准备。

组件化开发

什么是组件化？这个问题相信大部分前端工程师都知道~ 在跟我小学弟学妹们装 X 的时候，他们问我，什么是组件，我笑而不语，甩出了www.baidu.com网址，告诉他们，自己查...

❝

组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性。

❞

简单来说，我们可以把页面当作是变形金刚，由各不同零件组件，比如说 Header零件、Hand零件、Footer零件等...

然后呢，在我们想要制造一个变形金刚时，直接就用这些零件，就能快速 do 出一个产品了~

设计原则

相信大家也不想听我逼逼，直接进入主题，我想要设计一个大家都能普遍使用的组件，我该如何去设计，我上网搜了许多相关的文章，例如 :

在我看了一些文章之后，整理了一些其它人对组件设计的看法(底部会贴出友情链接)，首先，我们得拥有一套组件化设计思维，要它有啥用？它能帮我们高效开发哦~

官方文档

这个文档必须详细，不然别人咋看，同时每一个组件，都应尽可能的表达，该组件的由来、使用场景、如何设计、API、传参等

❝

感兴趣的可以去看看 ant design 的文档