企业级前端组件建设

组件化，又或者组件抽离的目的是为了功能共享方便维护，其能够带来的好处是少写代码，统一管理、统一维护。一套基础组件代码千锤百炼精而又精，从而起到快速支撑业务迭代，提升开发效率的目的。

前言

去年我们平台为客户提供了一套企业级前端组件方案，收集了一下客户的需求，同时也做了一部分调研工作，由于我们是为金融机构服务的，所以也发现了同业中广发所做的GFDesign也是这样的思路，大家可以看广发移动端统一组件库GFDesign来了这篇文章，同时像蚂蚁的Ant Design、字节的Arco Design和Semi Design以及腾讯的TDesign，都是类似的企业级设计系统以及组件库。那么提到了组件库不得不说一下组件化。

组件化是一种非常优雅的提效率、保质量的解决方案，可以帮助研发人员实现功能复用，降低代码重复率，提高研发效率。帮助设计师快速构建UI设计稿，保证风格的一致性，为用户带来视觉和交互的一致性，例如颜色、字体、大小等。所以组件化不仅仅是前端代码的组件化，同时也包含了UI设计稿的组件化，帮助产品经理或者UI设计师快速绘制原型图以及UI设计图。

前端组件建设作为前端基础设施建设中的一环，它在很大程度上直接决定了前端工程代码的复用率。组件建设的目的就是复用性、灵活性，从而提供开发效率和质量。组件建设能有效解决许多代码层面的问题，帮助开发人员提升研发质量和效率。

组件规范

设计语言规范

设计语言规范主要用于明确组件的表达方式、偏好或风格，例如颜色、布局、字体等。明确设计语言规范有两大好处：对内而言，统一设计规范会在最大程度上避免业务中出现各种个性化的设计，保证界面风格的一致性，使页面井然有序；对外而言，明确设计语言可以帮助企业建立统一的品牌符号、品牌特征，有助于加深产品在用户心中的印象，统一的颜色和交互形式能增强用户对产品的熟悉感和信任感，好的设计语言可以在体验上为产品加分。设计语言主要包括7部分。

第一，设计价值观。设计原则是指导设计师进行设计的准则，它确定了一个设计语言的基调。例如，国内比较著名的设计语言Ant Design，它的核心设计价值观就是自然、确定性、意义感、生长性。

第二，色彩体系。设计语言需要在一开始就定义好整个系统的色彩体系，色彩体系一旦建立，后面所有的设计都将围绕这一体系展开，包括品牌色、辅助色、字体黑白灰颜色、不可用颜色、超链接颜色、成功或失败颜色等。从设计角度来看，设计师们会维护一套主色盘和辅助色盘用于后续的设计工作；从研发角度来看，开发人员在实现组件时也会用变量存储关键色彩数值，便于统一维护和替换主题色。

第三，图形。图形是设计语言中不可缺少的一部分，它能够将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。例如，图标、背景图、插画等，它们都属于图形的一部分。

第四，布局。布局是页面设计中至关重要的环节，它直接确定了页面中内容的区域划分，一个合理的布局方案能够让页面的内容展示得更为友好。例如，设计语言Ant Design采用的就是24栅格体系，在不同像素的显示设备下呈现的形式不同。

第五，字体。字体是体系化界面设计中最基本的构成之一，字体系统包括字体种类、字间距、行间距、字重、字体颜色等内容。一个科学合理的字体系统能够大大提升用户的阅读体验及效率。

第六，阴影。阴影来源于现实生活，由两个不同阶层的平面产生，且强度由两者之间的距离决定。物体的高度直接影响物体的阴影，物体离地面越远，阴影越大，模糊值越高。通过合理利用阴影，可以使得界面具有层次感，从而将用户注意力有效聚焦在需要突出展示的地方。

第七，图文关系。图文关系用于定义图片和文字之间的协同关系，保证两者之间不出现冲突。例如，当文字出现在图片上时，应该如何该搭配图文的色彩，文字应该展示在什么位置。

业界比较有名的设计语言有谷歌的Material Design、微软的Metro，以及蚂蚁金服的Ant Design等，其实不同的企业都有自己设计规范。从零到一搭建一套设计语言是一件烦琐、困难且成本极高的工作，所以我们一般选择一套成熟的设计语言作为基准语言，在它的基础上进行个性化改造。比如我们可以基于Ant Design设计规范修改全局的色彩、字体等，改造成我们自己企业的设计风格。

研发设计规范

按照组件的功能颗粒度对组件进行划分，可以得到原子组件和分子组件，其实这里的原子组件和分子组件是Design System（设计系统）中的理论，相关内容可以参考 https://www.uisdc.com/atomic-design-theory。明确组件的颗粒度可以帮助开发人员避免重复开发组件，最大程度实现组件的功能复用，不仅便于维护，而且能够提高研发效率。不可再拆分或者没有必要再拆分的组件被称为原子组件。如果组件至少包含一个原子组件，同时添加了功能代码片段进行功能扩展，就被称为分子组件。举个例子，当前有一个下拉框组件，能够根据传入的配置信息提供下拉选项，返回选择的对应信息。如果系统中频繁用到某个配置信息的下拉框组件，就可以基于下拉框组件进行封装，将需要外部传入的配置项直接内置，这样就能得到一个新的分子组件。

明确组件颗粒度后就需要制定原子组件的研发设计规范，可以分为以下5部分。

第一&