写C端，如何优雅的处理多个弹框的显示？(附带源码)

我的前端学习笔记📒

最近花了点时间把笔记整理到语雀上了，方便童鞋们阅读

前言

最近写的移动端业务经常跟弹框打交道，偶尔处理对于多个弹框的显示问题也是捉襟见肘，特别是产品经常改需求，那么有没有一种优雅的解决方案去处理上面这种问题，或者说,淘宝、拼多多等是怎么处理这种问题的

由于项目一开始没有做好规划或者说一开始就不是你维护的，导致首页的弹窗组件可能放了十多个甚至更多，不仅是首页有，首页内又引入了十多个个子组件，这些子组件内也有弹框，另外子组件的子组件也可能存在弹框，每个弹窗都有对应的一组控制显隐逻辑，但是你不可能让所有符合显示条件的弹窗都全都一下子在首页弹出来，如何有顺序的管理这些弹框是重中之重的事情

一个小场景

上面这么分析可能有同学还是不了解这个业务痛点，我们举个例子，假设首页页面有个A组件，A组件有一个弹框A_Modal需要在打开首页显示出来，enen...很简单，我们按照平时的逻辑请求后端接口拿到数据去控制弹框显示就行，我们继续接着迭代，此时遇到了一个B组件，同样也是要显示在首页，因为是新活动，所以优先级比较大，需要显示B_Modal弹框,这时候你可能要去找找控制A组件的接口，找到后端说这个组件不显示了或者说自己手动重置为false，一个组件可以这样搞，但是几十个呢？，不太现实

如下图：

这些弹框是都要在首页上显示的弹框

小误区

❗️注意以下这种交互弹框不在我们范围之内，比如通过按钮弹出弹框这种，像这类弹框通过交互事件我们控制就行，我们要处理的弹框场景是通过后端接口来显示弹框，所以后面我们所说的弹框都是这种情况，注意即可

带着这个业务痛点，我去踩坑了几种方案，下面来分享下以下这种配置化弹框方案（借鉴了动态表单的思路来实现）

配置化弹框

之前写管理后台系统的时候有了解过动态表单，实际就是通过一串JSON数据渲染出表单，那么我们是不是可以基于这种思路，通过可配置化的数据来控制弹框的显示,显然是可以的

1// modalConfig.js
2export default {
3  // 首页
4  index: {
5    // 弹框列表
6    modalList: [{
7      id: 1, // 弹框的id
8      name: 'modalA',
9      level: 100,
10      // 弹框的优先级
11      // 由前端控制弹框是否显示
12      // 当我们一个活动过去了废弃一个弹框时候，可以不需要通过后端去更改
13      frontShow: true
14    }, {
15      id: 2,
16      name: 'modalB',
17      level: 122,
18      frontShow: true
19    }, {
20      id: 3,
21      name: 'modalC',
22      level: 70,
23      frontShow: true
24    }]
25  }
26}

这样做的好处就是利于管理弹框,并且最重要的一点，我可以知道我的页面有多少弹框，一目了然的去配置,这里我们先讲解下每个弹框modal的属性

id：弹框id-弹框的唯一id
name: 弹框名称-可以根据名称很快找到该页面上的弹框
level: 弹框优先级-杜绝一个页面可能提示展示多个弹窗的情况
frontShow: 前端控制弹框显示的字段-默认为true
backShow: 后端控制弹框显示的字段-通过接口请求获取

发布订阅模式来管理弹框

配置完弹框数据，我们还缺少一个调度系统去统一管理这些弹框，这时候自然而然就可以想到发布订阅这种设计模式

1// modalControl.js
2class ModalControl {
3  constructor () {
4    // ...
5  }
6  // 订阅
7  add () {
8    // ...
9    this.nodify()
10  }
11  // 发布
12  notify () {
13    // ...
14  }
15}

正常情况下，后端单个接口会返回给我们字段来控制弹框的显示，当然也可能存在多个接口去控制弹框的显示,对于这些情况，我们前端自己去做一层合并,只要保证最后得出一个控制弹框是否展示的字段就行,此时我们就可以在相应的位置取注册我们的弹框类即可

那什么时候发布呢？

注意这里的发布跟我们平时的发布判断情况可能不一样，以前我们可能通过在一个生命周期钩子或者按钮触发等事件去发布，但是我们仔细想想，进入首页由接口控制显示,这样动作的发生需要2个条件

每次发生一次订阅操作都伴随着一次执行一次预检测操作，检测所有的弹框是否都订阅完
真正触发的时机是当前页面的弹框都订阅完了，因为只有这样才能拿到所有弹框的优先级，才能判断显示哪个弹框

第一版实现

根据上面的分析单个接口返回的就是一个订阅，而发布是等到所有的弹框都订阅完才执行，于是我们可以快速写出以下代码结构

1class ModalControl {
2  constructor () {
3    // ...
4  }
5  // 订阅
6  add () {
7    // ...
8    this.preCheck()
9  }
10  // 预检测
11   preCheck(){
12    if(this.modalList.length === n){
13      // ...
14      this.notify()
15    }
16  }
17  // 发布
18  notify () {
19    // ...
20  }
21}

实现这个弹框类，我们来拆分实现这四个方法就行了

constructor构造函数

根据以上思路，ModalControl类的 constructor方法中需要设置的初始值差不多也就知道了

1// 上述弹框配置
2import modalMap from './modalMap'
3constructor (type) {
4  this.type = type // 页面类型
5 this.modalFlatMap = {} // 用于缓存所有已经订阅的弹窗的信息
6 this.modalList = getAllModalList(modalMap[this.type]) // 该页面下所有需要订阅的弹框列表，数组长度就是n值
7}
8// 弹框信息
9modalInfo = {
10    name: modalItem.name,
11    level: modalItem.level,
12    frontShow: modalItem.frontShow,
13    backShow: infoObj.backShow,
14    handler: infoObj.handler // 表示选择出了需要展示的弹窗时，该执行的函数
15 }

constructor构造函数接收一个所有弹框的配置项，里面声明两个属性,modalFlatMap用于缓存所有已经订阅的弹窗的信息，modalList表示该页面下所有需要订阅的弹框列表，数组长度就是n值

add订阅

我们以弹框的id的作为唯一key值，当请求后端数据接口成功后，在该请求方法相应的回调里进行订阅操作，并且每次订阅都会去检测下调用preCheck方法来判断当前页面的所有弹框是否已经订阅完，如果是，则触发notify

1  add (modalItem, infoObj) {
2    this.modalFlatMap[modalItem.name] = {
3      id: modalItem.id,
4      level: modalItem.level,
5      frontShow: modalItem.frontShow,
6      backShow: infoObj.backShow,
7      handler: infoObj.handler
8    }
9    this.preCheck()
10  }

preCheck检测

preCheck这个方法很简单，单纯的用来判断当前页面的弹框是否都订阅完成

1 if (this.modalList.length === Object.values(this.modalFlatMap).length) {
2      this.notify()
3  }

notify发布

当我们页面上的弹框全部都订阅完后就会触发notify发布，这个notify主要做了这么一件事情：过滤不需要显示的弹框，筛选出当前页面需要显示并且优先级最高的弹框，然后触发其handler方法

1  notify () {
2    const highLevelModal = Object.values(this.modalFlatMap).filter(item => item.backShow && item.frontShow).reduce((t, c) => {
3      return c.level > t.level ? c : t
4    }, { level: -1 })
5    highLevelModal.handler && highLevelModal.handler()
6  }

单例模式完善ModalControl

到上面的步骤，其实我们的弹框管理类已经差不多完成了，但是考虑到弹框可能分布在子组件或者孙组件等等，这时候如果都在每个组件实例化弹框类，那么他们实际是没有关联的,此时单例模式就派上用场了

1const controlTypeMap = {}
2// 获取单例
3function createModalControl (type) {
4  if (!controlTypeMap[type]) {
5    controlTypeMap[type] = new ModalControl(type)
6  }
7  console.log('controlTypeMap[type]', controlTypeMap[type])
8  return controlTypeMap[type]
9}
10
11export default createModalControl

第一版代码

第一版的代码就这样完成了，是不是很简单，搭配modalConfig和发布订阅模式，我们可以处理大部分问题了,为自己打个call😊

1class ModalControl {
2  constructor (type) {
3    this.type = type
4    this.modalFlatMap = {}
5    this.modalList = getAllModalList(modalMap[this.type])
6  }
7
8  add (modalItem, infoObj) {
9    this.modalFlatMap[modalItem.name] = {
10      id: modalItem.id,
11      level: modalItem.level,
12      frontShow: modalItem.frontShow,
13      backShow: infoObj.backShow,
14      handler: infoObj.handler
15    }
16    this.preCheck()
17  }
18
19  preCheck () {
20    if (this.modalList.length === Object.values(this.modalFlatMap).length) {
21      this.notify()
22    }
23  }
24
25  notify () {
26    const highLevelModal = Object.values(this.modalFlatMap).filter(item => item.backShow && item.frontShow).reduce((t, c) => {
27      return c.level > t.level ? c : t
28    }, { level: -1 })
29    highLevelModal.handler && highLevelModal.handler()
30  }
31}
32
33const controlTypeMap = {}
34// 获取单例
35function createModalControl (type) {
36  if (!controlTypeMap[type]) {
37    controlTypeMap[type] = new ModalControl(type)
38  }
39  console.log('controlTypeMap[type]', controlTypeMap[type])
40  return controlTypeMap[type]
41}
42
43export default createModalControl
44

demo验证一下

第一版的代码例子🌰在该仓库下demo,执行以下操作就可

1git clone git@github.com:vnues/modal-control.git
2
3git checkout feature/first
4
5yarn 
6
7yarn serve

第二版

第一版的ModalControl可以解决我们开发中遇到的场景,但是我们还要考虑一下复杂场景

接下来，我们来完善我们的弹框类ModalControl，我们先来分析下需要注意哪些问题吧

可能存在多个接口控制弹框显示（比如A接口也可以调取这个弹框，后面持续迭代，B接口也可能调取这个弹框），所以不再是那种一对一的关系，而是多对一的关系,多个接口都可以控制这个弹框的显示，这里通过apiFlag来标识弹框，不再使用name

得益于我们的modalConfig配置,我们只需要补充一个apiFlag字段，便可以解决上述问题，是不是很方便，其实后续的复杂场景，也在这里补充字段完善就行

modalConfig

增加apiFlag字段，由name字段对应弹框变为apiFlag对应弹框，实现多对一的关系

1export default {
2  // 首页
3  index: {
4    // 弹框列表
5    modalList: [{
6      id: 1, // 弹框的id
7      name: 'modalA',
8      level: 100,
9      frontShow: true,
10      apiFlag: ['mockA_1', 'mockA_2']
11    }, {
12      id: 2,
13      name: 'modalB',
14      level: 122,
15      frontShow: true,
16      apiFlag: ['mockB_1', 'mockB_2']
17    }, {
18      id: 3,
19      name: 'modalC',
20      level: 70,
21      frontShow: true,
22      apiFlag: ['mockC_1']
23    }]
24  }
25}

第二版代码

1/* eslint-disable no-console */
2/* eslint-disable no-unused-vars */
3import modalMap from './modalConfig'
4
5const getAllModalList = mapObj => {
6  let currentList = []
7  if (mapObj.modalList) {
8    currentList = currentList.concat(
9      mapObj.modalList.reduce((t, c) => t.concat(c.id), [])
10    )
11  }
12  if (mapObj.children) {
13    currentList = currentList.concat(
14      Object.values(mapObj.children).reduce((t, c) => {
15        return t.concat(getAllModalList(c))
16      }, [])
17    )
18  }
19  return currentList
20}
21
22const getModalItemByApiFlag = (apiFlag, mapObj) => {
23  let mapItem = null
24  // 首先查找 modalList
25  const isExist = (mapObj.modalList || []).some(item => {
26    if (item.apiFlag === apiFlag || (Array.isArray(item.apiFlag) && item.apiFlag.includes(apiFlag))) {
27      mapItem = item
28    }
29    return mapItem
30  })
31  // modalList没找到，继续找 children
32  if (!isExist) {
33    Object.values(mapObj.children || []).some(mo => {
34      mapItem = getModalItemByApiFlag(apiFlag, mo)
35      return mapItem
36    })
37  }
38  return mapItem
39}
40class ModalControl {
41  constructor (type) {
42    this.type = type
43    this.modalFlatMap = {} // 用于缓存所有已经订阅的弹窗的信息
44    this.modalList = getAllModalList(modalMap[this.type]) // 该页面下所有需要订阅的弹框列表，数组长度就是n值
45  }
46
47  add (apiFlag, infoObj) {
48    const modalItem = getModalItemByApiFlag(apiFlag, modalMap[this.type])
49    console.log('modalItem', modalItem)
50    this.modalFlatMap[apiFlag] = {
51      level: modalItem.level,
52      name: modalItem.name,
53      frontShow: modalItem.frontShow,
54      backShow: infoObj.backShow,
55      handler: infoObj.handler
56    }
57    this.preCheck()
58  }
59
60  preCheck () {
61    if (this.modalList.length === Object.values(this.modalFlatMap).length) {
62      this.notify()
63    }
64  }
65
66  notify () {
67    const highLevelModal = Object.values(this.modalFlatMap).filter(item => item.backShow && item.frontShow).reduce((t, c) => {
68      return c.level > t.level ? c : t
69    }, { level: -1 })
70    highLevelModal.handler && highLevelModal.handler()
71  }
72}
73
74const controlTypeMap = {}
75// 获取单例
76function createModalControl (type) {
77  if (!controlTypeMap[type]) {
78    controlTypeMap[type] = new ModalControl(type)
79  }
80  console.log('controlTypeMap[type]', controlTypeMap[type])
81  return controlTypeMap[type]
82}
83
84export default createModalControl
85

demo验证一下

第一版的代码例子🌰在该仓库下demo,执行以下操作就可

1git clone git@github.com:vnues/modal-control.git
2
3git checkout feature/second
4
5yarn 
6
7yarn serve

待解决问题

细心的童鞋可能会发现,竟然第一版和第二版分别实现了一对一和多对一的关系，那么一对多的关系如何实现呢？也即是多个接口一起决定弹框是否展示

这里我给出两种思路：

多个接口一起决定弹框是否展示，我们完全可以在接口层做合并，最终实现出来的效果就是一对一
订阅方法做去重，利用高阶函数再次封装对应的handler实现多个接口一起决定弹框是否展示,个人还是推荐第一种解决方案

我的前端学习笔记📒

最近花了点时间把笔记整理到语雀上了，方便童鞋们阅读

总结

文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊

写C端，如何优雅的处理多个弹框的显示？(附带源码)

我的前端学习笔记📒

前言

一个小场景

小误区

配置化弹框

发布订阅模式来管理弹框

第一版实现

constructor构造函数

add订阅

preCheck检测

notify发布

单例模式完善ModalControl

第一版代码

demo验证一下

第二版

modalConfig

第二版代码

demo验证一下

待解决问题

我的前端学习笔记📒

总结

评论区

相关推荐