一、组件设计模式

1. 前端工程化、模块化、组件化

????????工程化就是将一个应用程序的开发过程当作是一项工程来做，除了可用性，我们还需要关注程序的性能、稳定性、可维护性等方面，我觉得，所有能降低成本、提高质量并且能够提高效率的事情都是工程化。

? ? ? ? 前端工程化：随着web应用业务场景的复杂化，对于一个大型的前端工程，如何提高开发效率、如何进行多人协作、如何保证项目的可维护性、以及提高项目开发质量这些问题是很有必要通过前端工程化来解决的。另外，前端工程化又可以细分为模块化、组件化、规范化和自动化4个方面。

（1）模块化：侧重于业务层面上功能的拆分，例如一些app上的购物功能、直播功能等，一个模块就是一个实现特定功能的文件，可以调用组件来构建模块，像ES6的Module、AMD、CMD均为js模块模块化的方案。（css模块化方案有less、sass等）

（2）组件化：侧重于UI设计层面的拆分，例如提交按钮、确认按钮等，这些组件之间可以自由组合、独立可复用。（每个UI组件都应该包含html、css、js文件）

（3）规范化：包括编码规范（eslint、文件命名规范等）、开发流程规范（code review等）等。

（4）自动化：包括自动化测试、构建、部署等，将简单重复的工作交给机器来做。（开发者提交本地代码后，merge master后就会跑自动化测试，包含单元测试、集成测试、e2e测试3种；测试通过后，代码会合入master，然后开始build，将源码转换为可运行的实际代码，比如安装依赖、配置各种资源等；之后当前代码就是一个可以直接部署的版本release。）

2. 如何封装一个组件

????????React、Vue等框架都在引领着前端的组件化开发方向，React官方文档说：组件，类似于js函数，接受任意的入参，并返回用于描述页面展示内容的React元素。封装就是提供props去控制组件的行为，而不是直接暴露组件的内部结构。

（1）为什么要封装组件？

????????有利于代码的复用，减少代码冗余、并且也降低代码的维护难度。

? ? ? ? 有利于单元测试。

（2）封装组件需要考虑的点

?单一职责原则：一个组件只负责一件事情，不要耦合一些没必要的逻辑。
可复用性：需要考虑适用的不同场景，考虑组件功能的通用性，以及组件参数的合理性、兼容性。（公用组件更多要考虑通用性，项目组件则是需要处理当前业务中的特殊场景，业务部门一般都是项目组件）（UI组件只负责渲染，侧重复用性；业务组件侧重数据和业务的逻辑处理）
可扩展性
可维护性：像业务组件如果过度追求可复用性，兼容各种页面，这就会导致它本身变得难以维护。
组件的粒度：拆分并不是越细越好，根据具体的业务场景分析，尽量复合高内聚、低耦合的思路，使自己的组件易于维护。