内容概览：
- 组件化的目的
- 哪些逻辑需要组件化
- 基于现有场景，如何设计组件，提高开发效率
组件化的目的
组件化的概念或者描述有很多，在此就不列举了。工作中，我们会遇到很多功能相近的业务场景和高频控件，这里我们就需要对这些大量重复但不完全一致的代码进行分析、总结、抽象，最后封装成组件，便于进行统一、升级，减少代码复制、粘贴，提高项目代码的可读性，降低维护成本和开发成本。
除此之外，有时候也会将一个大的业务场景拆分成多个小模块，减少单文件的体积或是多人协作开发。
总而言之，组件化的目的就是减少开发成本、提高开发效率。
哪些逻辑需要组件化
参考一些现有的UI库，再加上日常工作遇到的情况，我喜欢把组件分为三类：基础功能组件、多业务模块复用逻辑组件、 业务模块拆分组件。
基础功能组件：按钮、分页、列表、图表、时间选择器之类。
多业务模块复用逻辑组件：这类组件通常指的是在特定的业务范围内在多个业务场景中出现，这类组件通常是在基础功能组件的基础上结合特定数据或接口二次封装组合而成。例如通用的人员下拉选择，通用的的类型下拉选择、通用的视图节点下拉选择。
业务模块拆分组件：有的业务场景内容比较多，如果都放在一起会代码过多很难管理，也不利于多人协同开发，例如Dashboard之类的展示页、订单、人员调配之类的操作页
基于现有场景设计组件，提高开发效率
之前的参与的项目由于人力不足以承担自研UI，通常都是借助于第三方UI组件库。所以在设计组件时，更多的是在UI组件基础结合特性进行二次开发。以我之前参与的项目为例（vue+element-ui）。业务中有大量的列表和图表。列表方面除去几个特殊类型，大都是常见的展示列+操作列模式，我的处理方式是将column以配置传入组件内，减少模板内容。图表主要依靠echarts实现，为了避免每次在业务代码中使用都经历一遍初始化、绑定size监听、组件销毁时注销实例的过程，我将这些统一封装到图表组件内部去处理，对外暴露options属性，用来负责传递数据变化。
（未完待续...）