前言

前端代码逐渐从 “平铺” 转变到了 “层级” 结构，从 “面向过程” 进阶为 “面向对象”，前端组件也成为了近几年来的热门议题。今日前端早读课文章由 @ELab.yangyuqin 分享，公号：ELab 团队授权。

正文从这开始～～

为何要进行前端组件设计？

与仅承担数据处理逻辑的后端不同，前端需要负责界面渲染、数据处理、和接口调用，在框架诞生前，更多地是编写页面维度的顺序脚本代码。随着前端继续的持续发展，ES6 推出了 class 语法糖，React 提出了函数式组件，Vue 则以模版语法的形式组织代码，前端代码逐渐从 “平铺” 转变到了 “层级” 结构，从 “面向过程” 进阶为 “面向对象”，前端组件也成为了近几年来的热门议题。

“组件是对数据和方法的简单封装，是软件中具有相对独立功能、接口由契约指定、和语境有明显依赖关系、可独立部署、可组装的软件实体。” 这段百科中摘取的组件定义，揭示了组件所需要具备的特性：功能独立、约定一致、可集成、服务于场景。

在软件工程中，软件设计是软件开发流程中的必要阶段，在需求分析后、软件开发前进行。软件复杂度是每一个项目演进的产物，随着需求和代码行数的增加，复杂度将持续提升。软件设计的优劣为对复杂度带来的影响是不同的，优雅、合理的设计使待开发的代码复杂度可控，而拙劣的设计将会给软件带来无序、偶然的复杂度变更。一个优秀的前端组件需要在满足需求的前提下，具备高易用性和良好的可扩展性，这是我们进行前端组件设计的目标。

如何提升组件易用性？

合理的组件封装

组件既生于页面，又能够独立于页面。我们不能将整个页面杂糅为一个组件，也不能将每一小块 UI 都封装为组件。前端组件按类型可以分为容器组件、功能组件和展示组件，一个优秀的组件应该保证：功能内聚、样式统一、并且与父元素仅通过 Props 通信。

组件的封装粒度并不是越小越好，很多时候一个组件是在其他一个或多个组件的基础上开发的，无法完全以功能点的数量衡量是否遵循单一职责原则，组件开发者需要根据组件功能和目标来确定组件封装粒度：

1、当该组件需要承载具体的额外功能时，相较于新增 API ，封装成独立的组件是更好的选择。