前端组件封装原则

对于当今的前端开发，模块化已经成了一种通用的解决方案，不管是vue还是React还是Angular，其中都会涉及的组件的封装。对于各现在的前端开发来说，如何去封装一个组件，以及封装组件的过程中，应该注意哪些东西都已经是每个前端的必备的基础技能了。但是在很多的时候，对于一些刚刚进入这个行业的新人来说，可能有部分的老人，不是很清楚什么时候应该去封装组件。

接下来我就以下的问题聊一下组件的封装。

• 我们为什么要封装组件？
• 什么时候应该封装组件？
• 应该如何去设计一个组件？

为什么要封装组件？

对于这个问题我相信很多的人都能够说出几点：

• 在别的地方有相同或者是类似的特征，避免重复的工作量（这个是大多数人第一时间会讲出的原因）；
• 使代码逻辑更加清晰，方便项目的后期维护；
• 封装组件使组件的使用者不用去关心组件的内部实现以及原理，能够使一个团队更好的有层次的去运行；
• ……

其实综上所述，封装组件对于我门前端来说，很大的一个目的就是代码的维护和协同开发方面，以及在编码过程中提高效率。

什么时候应该封装组件？

对于组件的封装，其实是有一定的不确定性的，更多的时候，我们是需要做一些权衡的，并且在业务的变化过程中，不断的对组件进行部分的调整和重构。

只有你知道自己想要什么了，就需要知道自己什么时候应该做什么事情了，当我们知道为什么要封装组件了，会在写代码的时候或许是在项目之初就开始思组件的封装，至于什么时候应该封装组件，我们这边先根据上面的目的来进行思考。

解决避免重复的工作量问题

对于一个前端的组件普遍具备以下特征：

• 外观：组件长什么样子（背景色，边框，圆角等）
• 状态：（可读，可写，可操作性等）
• 功能：（输入、输出等）
• 交互：（hover，click，input，或者是数据等对组件的外观，状态以及功能的影响）

当了解了这些的时候，我们再回过头来看去思考第一个问题为了避免重复的工作去封装组件。首先这个问题的痛点就是：有这么一个组件，在项目中有两处或者两处以上的地方在使用同样的或者是类似的特征（不管是外观，状态，功能还是交互），这个时候就需要考虑有没有必要进行组件封装。如果该组件未来还有可能出现在其他的地方，而且重新开发这样的一个功能的成本比较高；或者是该组件后续会发生部分特征的改变（这种情况发生的概率会很大），该改动会涉及到其他使用类似特征的地方，这些情况下，尽量将该组件提取出来，进行封装。基础组件就不用说了，对于业务组件中，比如说城市选择，等等。

使代码逻辑更加清晰

对于代码逻辑更加清晰，这个清晰的的界定。就对于各比较复杂的页面，但是模块相对来说比较清晰，我们不能每个模块都写在同一个页面中去吧，这样每个模块的交互功能，处理逻辑很多，就会造成该页面的代码长度会很大，其中各种各样的方法，设置会出现各个模块中有相类似的方法，这样引发的的问题很多，比如说后续代码的可读性不是很高，功能的维护的复杂度提高。因此就需要我们将功能模块进行抽离和封装。比如说，我们在某些平台写简历，中间的个人经历，以及项目介绍等相关的模块，都可以进行相应的抽离，然后在组装。

不用去把大把的精力放在内部实现上

聊到组件封装这个问题就不得不讲团队协作的问题，在一个团队里，不同的成员的经历，工作经验，项目经验等是各不相同的，每个人都有每个人擅长的部分，就比如说有人擅长图片处理，有人擅长音视频播放，还有擅长文本编辑器的研究，针对于这样的情况，我们可以将其单独进行封装。

应该如何去设计一个组件？

对于组件的设计，一般是一个组件能够完整的完成一件事情，或者一个完整的逻辑；另外组件的设计一般是讲究高内聚，低耦合等原则进行设计。一个组件的设计应该具备以下的内容：

• 功能独立和唯一
• 可复⽤的模块，完成既定功能
• 有明确的接⼝规定
• 有上下⽂依赖、外部依赖资源的定义
• 可以独⽴发布

另外在组件设计的过程中，需要尽可能的去换个角度思考，如果这个组件别人去用的，应该怎么去用，不要说，我们封装完成一个组件，别人在使用的过程中的学习成本比重新在封装一个满足于自身业务的成本还要高的成本，这本身上就是对该组件进行封装设计的一个失败。

组件封装过程中应该避免的问题？

其实在组件的封装的过程中，应该尽可能的去实现组件内部的高性能以及组件使用的高性能（虽说组件的数量会直接影响我们程序的性能，但是我们在封装的过程中应当尽可能的做到高效）。

另外在封装组件和设计的一个组件的过程中，应该尽可能的标准统一，就好比一个输入框能否编辑，不要在同一个项目汇总一会儿一个editabled，一会儿一个disabled。

还有就是对于组件的参设计方面，对于需要通过参数进行区分的时候，尽可能将同一类型的属性合并，不要将不同类型的树形也合并到某组属性中去，这边举一个反例，就是关于element-ui的button组件，我们都知道控制外观显示的通的是type，但是对于type还能设置成text就是纯文字的组件，而这个其实其实就不会很完美。

以上对于就是我个人对于组件封装的一个小小的理解，希望对大家有所帮助，另外中间如果有什么不合适的，可以一起探讨一下。