背景

最近做完了一个流程管理的系统，组件的划分为后续新的开发节省了大量时间，同时也对该系统的展示系统做了一些维护，其中组件划分的相当细致，反而为调试带来了一下麻烦。所以整理一下关于组件开发设计的思路。

发展

前端组件化是前端模块化的进一步发展。
前端模块化分为两部分:

• JS模块化

  函数闭包-\>对象封装-\>CommonJS/AMD/CMD-\>ES6 Module

• CSS模块化利用预处理器实现
  前端模块化重点在于将业务逻辑进行拆分，各司其职。但是随着需求的增加，各模版的代码依旧会变得难以维护，组件化开发开始进入开发者的视野。组件化对HTML也做了业务上的拆分，使得复用更加轻松。组件化可以理解成积木，页面有各种不同的组件组成，组件之间相互独立，可以任意组合和移除与替换。组件化的重点在于复用。

  误区

  在组件化开发的时候我们往往容易进入两个误区一是划分粒度太粗糙，比如一个页面一个组件，造成复用性差，组件代码过长，难以维护；一是划分粒度太细，导致维护性太差。

  组件分类

  我们应该找到一个比较适当的组件设计粒度呢？首先我们应当对组件分类有一个大概的划分。我通常将组件分为以下几类

• 基础组件：（ 通常是一些组件库类似antd、elmentui等）

• 容器组件：（通常是一些页面组件，主要是路由上挂载的组件）

  功能 ：

  • 向容器类子组件提供数据
  • 容器类子组件间通信
  • 管理子组件间状态

• 展示组件：主要是通过props接受数据展示内容
• 业务组件 ：根据业务划分的组件

• 高阶组件：根据参数返回一个功能增强的组件，主要用于抽象几个组件间的公共方法

  组件设计的原则

• 组件不应该对其他组件造成影响
• 组件是否可以复用在其他场景、接口设计是否易用、参数尽量都有默认值。

• 页面层级不要过度，通常建议不要超过3级

  会导致组件间交互变复杂

  组件划分方法

• 根据页面结构初步划分出大致模块

• 寻找各模块间是否有相似的模块，进一步细化组件

  主要是两种情况：一种是数据一致，表现方式不一致；一种是变现方式一致，数据不一致

• 整理各组件间关系，确定各组件的state、props，明确各组件间通信机制
• 如果开发过程中对代码复制粘贴次数较多，就要考虑再抽离出组件。