大厂经验：利用好组件库，可以加快产品迭代

目录

1、组件库的概念和作用
2、基础组件库
3、业务组件库
4、利用工具自动化生产页面

1. 组件库的概念和作用

我们在提前端需求时，都会接触到组件库，一个页面由n个大大小小的组件组成，比如按钮、输入框、导航、下拉框。。

有着统一设计风格的一套组件集合，就是组件库。

市面上也有很多免费的开源组件库，比如蚂蚁金服的ant design、饿了么的element ui，谷歌的Material components等。

这些组件库拿来即用，初期没有从0开始构建组件库的成本，迭代过程中可以复用组件，给设计师、前端工程师节约了大把时间，加快了产品迭代。

如果这些组件库能满足基本的日常需求，而且公司没有人力去从0开发一套组件库，那么直接使用现成组件库是一个不错的选择。

但需要注意的是现成的组件库技术栈要跟自己公司的技术栈一致，除了个别兼容所有UI框架的组件库。

但如果现成的组件库很多都不满足需求，或者跟公司品牌有冲突，那么就需要从0开始设计一套基础组件库了。

2. 基础组件库

基础组件库是没有带任何业务属性的组件库。

一个基础组件库一般由以下几个要素组成：

1、统一设计规范

一般来说，设计师要先设计好一套统一的视觉规范和交互规范，要保证产品体验的一致性。

视觉规范 ：比如统一的间距、字体、颜色、圆角、icon。

交互规范：比如统一的操作路径、动画、反馈。

如果产品经理在提需求时，发现缺少某个基础组件，一般要提需求给设计师，设计师出组件视觉和交互后，前端根据设计稿来开发。

2、pc端和移动端

根据需求，pc端和移动端是否要共用同一套组件库。如果共用同一套组件库的话，需要做好响应式设计。

那么什么情况下pc端和移动端可以共用一套组件库呢？

一般来说，如果系统的页面布局和元素比较简单，图片也比较少，那么2个端共用一套组件库是勉强可以的，比如拉勾网。

但如果系统的页面布局比较复杂或者页面元素类型丰富，有各种图片、视频、花里胡哨的组件等，那就要拆开2套组件库了，比如淘宝。

3、主题定制能力

什么是主题？主题可以说是主要的视觉设计，比如整个组件库的颜色、间距、字体等。一般来说，一个规范的组件库，都要有一个主题定制能力。

因为同一个公司，可能会有多个品牌的产品。

不同品牌可能需要整体更改一些组件布局或者组件样式，所以基础组件库需要有主题自定义能力。

4、组件文档

组件文档是组件库的使用指南。

组件文档一般会介绍组件库的技术栈、每个组件的视觉和交互、每个组件的使用方法，当产品经理提需求时，一般都要到组件文档去查看有没有这个组件，尽可能复用已有组件。

5、版本管理

细心的同学可能会发现，组件文档上面一般都会让我们选择版本。我们的组件库，也是有版本迭代的。

组件库版本迭代跟产品版本迭代类似，一般也是由3位数字组成，

major.minor.patch：(比如1.1.2)

第一位表示主版本，当有不兼容的大变更时，会更新第一个版本号。

第二位表示次版本，当有新特性时，会更新第二个版本号。

第三位表示修订版本，当组件库有bug时，会更新第三个版本。

当产品经理查看组件文档时，需要选好组件库版本，不然可能会导致需求组件和开发当前使用的组件库因为版本不同的原因，造成有出入。

3. 业务组件库

业务组件库就是基于基础组件库，进行二次封装的带有业务属性的组件库。

为什么需要业务组件库呢？因为相同或者不同的系统，很多时候也会用到同一个业务组件，

比如多个系统会共用相同的导航组件，导航组件里面封装了获取当前用户的导航列表这个业务逻辑。

再比如一个展示权限列表的树组件，这个组件里面会把获取权限列表这个业务逻辑封装进去，

在角色管理页面会用到权限树组件，在用户管理页面也可能会用到权限树组件。

为了提升开发效率，要尽可能复用组件。所以统一抽出一个业务组件库是一个不错的解决方案。同理，业务组件库也有组件文档和版本管理。

4. 利用工具自动化生产页面

相信不少人都听过低码/无码，低码/无码的意思是通过智能化工具自动化生成代码，来减少开发重复性的工作，提高开发效率。（ps：这里讲的是前端领域的低码）

从可视化搭建到设计稿生成代码，再到需求文档生成代码，lowcode经过了一个循序渐进的历程。

而这些工具，都是基于组件库。

可视化搭建，通过拖拽各种组件来拼成页面，D2C也是通过识别组件和布局来自动生产页面。关于lowcode可看我之前的文章：需求文档也能生成代码，程序员要失业了？

但是提效并不等于完全代替人工开发。目前lowcode只能生产出70%-80%左右的代码，剩下的还需要研发人员去二次开发。

有人力条件的公司一般都会自研低码平台来提高页面生产效率，

条件不够的可以购买一些比较靠谱的低码平台服务，

目前外面很多低码平台都支持自定义组件库，可以把自己公司的组件库导入到低码平台来使用，还挺方便的，但是具体怎么选还是看自己公司的技术栈和业务需求了。