前端组件化-高质高效协作利器

小编寄语

在这个“不出门就是给国家做贡献”的日子里，技术委员会提前祝大家元宵节快乐，祝我们的生活像汤圆一样甜蜜圆满。也请伙伴们少出门，勤洗手，戴口罩，为自己和家人的健康保驾护航，同心协力，共克时艰！我们相信阳光会驱散阴霾，一切都会好起来的！

小编今天分享一篇由家长帮倪思远老师带来的技术好文《前端组件化-高质高效协作利器》，本文主要介绍了作者对于组件化的理解以及组内是如何实现组件化的，希望能够对大家有所启发和帮助~

前言

项目开发过程中，随着业务的不断迭代，很容易暴露以下问题：
1、代码体积会不断增加，代码的冗余会越来越大；
2、业务逻辑复杂度会不断增加，逻辑的可拓展性、可维护性越来越脆弱；

问题的主要原因在于：
1、功能代码的复用方式是简单粗暴拷贝和粘贴；
2、多人协作导致代码耦合度高，后期维护拓展方式不合理；

针对以上问题，在前端项目工程化的基础上，引入前端组件化，从功能模块的复用、通信，及多人协作的层面进行解耦。

预期效果：

1.通过组件化的编码，实现功能的封装和复用，减少冗余

2.通过组件化的协作，实现功能和业务的解耦，高效协作

一.什么是前端组件化？

前端组件化以前经历的过程：面向过程–面向对象–面向模块。

前端业务复杂度的不断提升，传统的以HTML+JQ为主的面向过程的开发方式已经很难满足大型项目的迭代和维护。面向对象方式(继承、封装、多态、实例化构造)、借助模块化加载器(require、sea等)以及后来的工程化工具(wp、gulp等)实现的面向模块的方式，都是为了做封装、配置、复用、业务解耦、协作解耦等提高质量和效率的优化，本文不做过多赘述。

前端的组件化，是指通过对项目进行自顶而下的拆分，对项目内(间)通用的、可复用的功能通过组件的形式和业务逻辑进行解耦，以实现代码的高内聚、低耦合，实现功能模块的可配置、可复用、可拓展，再由这些组件组合更复杂的组件/页面，同时实现多人协作过程中依赖解耦的一种项目设计和实施方式。

对比面向过程、面向对象、面向模块，组件化(面向组件)在兼具了低耦合、高内聚、可配置、可复用、可拓展等优势外，给项目的实施提供了一种类似"搭积木"的方式，具有更高的灵活性，可拓展性和可维护性。

二、为什么实施前端组件化？

1.编码层面提效

· 通过组件化的开发方式，实现功能模块的封装

· 通过组件的复用，减少代码冗余

· 通过组件化的开发方式，实现功能和业务逻辑的解耦

· 通过组件的拓展支持项目迭代，提高可拓展性、可维护性

2.协作层面提效

· 通过组件化的设计，自顶而下对项目进行拆分

· 从按页面分工变为按功能组件分工

· 通过组件的接口化、配置化实现功能和业务整合

3.符合主流框架设计初衷

Vue-组件化构建应用（Vue中万物皆组件）

React-主要特性之一

三、什么时候实施前端组件化？

1.如果项目不是一次性开发，需要长期迭代维护：组件化能实现功能和业务逻辑的解耦，实现功能模块的复用，已便于基于现有功能快速响应，通过拼接组合的方式快速实现迭代。

2.需要对项目包体积进行优化：组件化能很大程度提高代码和功能模块的复用性，减少代码冗余。

3.多人协作完成同一项目：组件化的项目拆分和分工，能够避免不同页面相同/相似功能的开发成本、统一维护和拓展成本；同时还能将伙伴间的协作解耦，分工更清晰，代码提交不易发生冲突。

四、如何实施前端组件化？

1.项目的组件化拆分

· 如何拆分？
需要整体把握项目需求，将通用性的功能进行抽离；或者从现有功能出发，按照功能进行组件拆分；或则从协作角度，从分工和配合层面进行组件拆分。
项目的拆分思路借鉴Vue官网的一个图形象说明：

· 拆分的两个维度
a.项目内可全局公用
基础组件包括不限于（下拉，tap切换，弹窗，toast提示，loading，空页面，页面布局）,可参考ElementUI、AntD组件库的实现思路
b.项目内可复用
业务组件多次调用，即同页面或多页面都会用到的功能模块（如内容发布、评论等业务组件）

· 组件的分类和抽象程度
a.基础组件(全局可用的底层组件)-最大程度通用化开发，通用化配置
b.通用组件(页面级别的复用功能)–满足多场景复用业务
b.业务组件(无复用，为方便协作)–组件化封装抽离，可备后期拓展及复用

· 从协作的角度进行拆分
a.分模块开发，避免多人重复工作
b.相同功能，统一维护
b.相似功能基于现有模块快速拼装

*· 举个栗子：*

上图是实际项目(已上线)中部分功能拆分的示例：需求：视频详情页(左1)、图文详情页(左2)、弹窗(左3)、弹层(左4，下)

拆分思路：视频页、图文页，除了顶部视频和图文展示不同，其他功能相同，可按功能实现组件化拆分以实现页面复用。

组件拆分：如图右下角所示

组件的分类：
a.基础组件-弹窗组件、登录弹层
b.通用组件-评论组件、瀑布流
b.业务组件-视频播放、图片预览

协作层面：
a.多人开发
b.先开发组件–并行开发
c.专人组合页面逻辑–无提交代码冲突
d.不同页面复用–复用组件，无冗余

Tips:可能有人会觉得的复用一个页面是可以的，没必要做复杂的拆分。但是如果后期又有图文混排页、热门讨论页…等跟这两个页面功能、结构都类似的页面呢？实际情况就是这样的，通过现有功能组件，在开发n个页面也是"搭积木"的思路。

2.组件设计

· 组件交互配合方式设计

a.沟通数据传递方式
b.沟通事件交互方式
c.沟通样式适配方式

· 组件接口设计（前三个即可满足大多数场景）

a.用户自定义类名（extraClass）
b.源数据（data）
c.交互事件（onTap)
d.钩子函数（组件实例化、组件销毁、onShow、onHide)
e.组件实例方法（hide、refresh）
f.通信参数（全局状态管理中依赖数据的key）

· 举个栗子：

上图是瀑布流组件开发前设计：

瀑布流组件主要被设计为接受数据源、翻页时增量数据(性能层面考虑)、item点击上报。

这样就实现了功能的封装内聚，用户使用时只需要做透明化配置即可，同时方便复用，后期如需拓展可以参数的方式进行拓展支持。

3.组建的开发**

·核心：**

数据交互-数据绑定

事件交互-事件上报

·举个栗子(Vue技术栈下)：

A.下拉组件的实现：

props：
a.list-下拉选项数组
b.def-默认选项
c.map-可以配置list里需要展示字段的key
event:
onItemTap:下拉项点击回调
B.组件的复用

同一页面的三个下拉，是同一组件的三个实例，互相独立。
另外中部的tap切换和下面的列表都是组件，这样整个页面涉及的功能集成度都很高，复用性、统一拓展维护都很方便，这个页面的搭建还很干净整洁。

五、组件化思想的延申

在Vue技术栈下，每个.vue文件都是一个单文件组件。
本质上说，Vue中的页面也是组件。也可以说，页面，也可以用组件化的思路去构建或使用。

· 举个栗子：

feed-home/index.vue 是一个页面，出于分包需求，需要在主包和子包都有一个该页面，简单操作，可以直接复制一个。前期简单了，后期的维护就不简单了！所以从单文件组件的本质出发，取巧，通过组件引入的方式在子包引用了主包的一个实例。项目实测可以满足。

结语

在中大型的、多人协作的项目中，通过组件化的方式进行项目的拆解、设计、开发，通过组件化的方式进行分工协作，能够极大的减少代码冗余，降低不同模块的耦合度，同时也实现开发协作层面的解耦。

组件化的落地不是一蹴而就的，需要不断的磨合配合，需要建立一致的认知和协作方式。
另外，在统一的技术规范和技术栈体系下，跨项目间也是可以通过npm私有源或git-submodule来实现组件化复用的，当然受业务的限制，目前这个还有些难度，这个也是我们正在努力的方向。