thinkphp5 后台多选删除_高性能多级多选级联组件开发「JS篇」

作者：离尘不理人

转发链接：https://segmentfault.com/a/1190000022909876

最近在项目开发过程中，有个一个多级多选的公共组件开发需求，特在这里记录下开发过程中所做的一些优化以及分享一下我是如何从零开发并设计一个组件的思路，希望给阅读这篇文章的读者带来一点收获。

效果预览

单个项选中

多个部分项选中

需求分析

在拿到需求之后，我们首先要做的是需求分析；通过上面的效果预览我们可以初步知道我们所需要处理的核心逻辑：

1. 默认加载第一层级数据
2. 鼠标 hover异步获取数据切换下级渲染数据
3. 鼠标点击点击当前项状态改变：选中 or 未选中当前项的父级状态改变：选中、半选、不选中，并且需要递归处理当前项的子级状态改变：全选、全不选

组件设计

在设计组件之前，我们需要考虑组件的性能、通用性等问题；如何设计一个与业务解耦的组件，是我们需要首先考虑的问题；那么，如何将组件数据请求与业务解耦呢：

• 组件提供一个 service 入参，service 是一个返回 Promise 的异步请求方法
• 组件提供一个 dataMapper，用来做数据转换，将 service 请求返回的值转化为符合我们组件数据结构的数据
• 组件内部通过调用外部传入的 service 来获取数据

入参设计如下：

interface Props {  ...  // 外部传入服务  service: (args: { parentId: string }) => Promise;  dataMapper?: (args: any) => { list: SelectorItemType[] };  /**   * 回显数据   * @default []   */  data?: SelectorItemType[];  onSubmit?: SubmitCallback;  onCancel?: () => void;}try {  const data = await service({ parentId: itemId });  nextColumnList = dataMapper ? dataMapper(data).list : data.list;} catch (error) {  Notification.error(error);  nextColumnList = [];}

整体思路设计

通过上面的 UI 呈现，现在大家应该有个基础的认识，我们需要做什么样的需求了。

我们在接到一个需求的时候，先不要着急着码代码，更好的方式是先规划我们的组件方案设计，并且提前思考好各种逻辑分支；这里给大家看下我的设计初稿，我习惯性的选择脑图来发散自己的思维：

通过上图，我们能够在大脑中有个大概的清晰认识到我们需要做哪些核心模块的设计与开发，接下来就是规划我们的核心模块划分：

• 数据缓存
• 异步数据获取
• 选中数据缓存
• 渲染数据源设计