组件化设计思路总结

前言：

Q:什么是前端组件化开发?
A:拆分功能，封装组件，单独维护

Q:组件化开发的优点?
A:可以很大程度上降低系统各个功能的耦合性，并且提高了功能内部的聚合性。这对前端工程化及降低代码的维护来说，是有很大的好处的。
耦合性的降低，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本。

Q:设计思路重点是什么?怎么设计一个组件？
A: 重点有三项：专一性，可配置性，生命周期，事件传递；

正文：

1.专一性：
设计一个组件需要专一性，即一个组件只负责一个功能，跟封封逻辑功能的思路一致，遵循的原则是就是：一个组件只专注的做一件事，并且要把这件事做好；
一个组件的功能如果可以拆封成多个功能点，应将每个功能点设计成一个个小组件，但并不是颗粒度越小越好，只要将一个组件内的功能和逻辑控制在一个可控的范围内即可；

2.可配置性：
一个组件，要明确它的输入和输出分别是什么。
组件除了要展示默认的内容，还需要做一些动态的适配，比如：一个组件内有一段文本，一个图片和一个按钮。那么字体的颜色、图片的规则、按钮的位置、按钮点击事件的处理逻辑等，都是可以做成可配置的。
要做可配置性，最基本的方式是通过属性向组件传递配置的值，而在组件初始化的声明周期内，通过读取属性的值做出对应的显示修改。还有一些方法，通过调用组件暴露出来的函数，向函数传递有效的值；修改全局 CSS样式；向组件传递特定事件，并在组件内监听该事件来执行函数等。
在做可配置性时，为了让组件更加健壮，保证组件接收到的是有效的属性、函数接收到的是有效的参数，需要做一些校验。

对属性的值进行校验，一般要考虑以下几个方面。
1.属性值的类型是否是有效的。如果某个属性要求传递一个数组，那么传递过来的值不是数组时，就要抛出异常，并给出对应的提示。
2.属性是否是必填的。有的属性的值，是组件内不可缺少的时，就要是必填的，在组件初始化时要做是否传递的检查，如果没有传递，则需要抛出异常，并给出相应的提示。如果属性不是必填的，可以设定一个默认值，当属性没有被设置时，就使用默认值。

函数的参数校验，只要按照传统的方法进行校验即可。在函数内部顶部判断参数的值和类型，如果不满足要求，则抛出异常，并给出相应的提示。

3.生命周期：
组件要明确在不同的生命周期下，要接收对应的函数，类似于vue钩子函数，vue组件提供了很好的生命周期函数（beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed）

4.事件传递：
组件需要支持事件的传递，vue中用$emit监听