昨天面试被问到组件化开发需要考虑哪些,今天就来聊一聊组件化开发。
什么是组件化开发
前端组件化开发就是将页面的某一部分独立出来,将这一部分的 数据层(M)、视图层(V) 和 控制层(C) 全部封装到一个组件内,暴露出一些开箱即用的函数和属性供外部组件调用。
一个前端组件包含了组件的模板、样式和交互等内容,基本上涵盖了组件的所有的内容,外部只要按照组件设定的属性、函数及时间处理等进行调用即可,完全不用考虑组件的内部实现逻辑。组件可以多层封装,通过调用多个小组件最后封装成一个大组件供外部调用。例如,一个input输入框是一个组件,一个select下拉框也是一个组件,可以用form在这两个组件外包装一层,形成一个form组件。
组件化的目的就是为了让页面中各个部分可以被复用,以减少重复的代码。另一方面也可以使团队分工协作,让不同的人负责编写不同的组件。
组件化开发的优点
- 可以很大程度上降低系统中各个功能的耦合性,提高了系统的伸展性,降低了开发的复杂度,提高了开发效率,降低开发成本
- 数据相互独立,内部结构密封,不会与全局或者其他组件产生影响
- 针对逻辑复杂的功能进行拆分,有利于更好地排查问题
设计一个组件的原则
-
标准性原则 任何一个组件都要遵循一套标准,可以使得不同区域的开发人员根据此标准开发出一套标准统一的组件。
-
专一性原则 一个组件只专注做一件事,且把这件事做好。例如,页面上有一个table列表和一个分页控件,就可以把table封装成一个组件,分页控件封装成一个组件,最后再把table组件和分页组件封装成一个组件。
-
可配置性 一个组件要明确它的输入和输出分别是什么。组件除了要展示默认的内容,还需要做一些动态的适配。比如,一个弹窗组件有一段文字、一个图片和一个按钮。那么字体的颜色、图片的路径、按钮的位置、按钮点击事件的处理逻辑等,都要做成可配置的。要做可配置性,最基本的方式是通过属性向组件传递配置的值,而在组件初始化的生命周期内,通过读取属性的值做出对应的修改。或者通过调用组件暴露出来的函数,向函数传递有效的值。或者像组件传递特定事件,并在组件内监听该事件来执行函数等。在做可配置性时,为了让组件更加健壮,保证组件接收到的是有效的属性、函数接收到的是有效的参数,需要增加一些校验:
- 属性的值的校验:属性的类型是否有效、属性是否必填;
- 函数的参数校验主要是在函数内部判断参数的值和类型,如果不满足要求,则抛出异常并给出相应的提示。