对于一些快速迭代的产品来说，特别是移动端 C端产品，基于用户运营的目的，在 app首页给用户展示各种各样的弹窗是很常见的事情，在产品初期，由于迭代版本和运营策略变化地还不是太大，所以可能觉得没什么，但当产品运营到后期，各种八竿子打不着的运营策略轮番上阵，弹窗的样式、逻辑等都变了不知道多少遍的时候，问题就出来了
由于前期没有做好规划，首页的弹窗组件可能放了十多个甚至更多，不仅是首页有，首页内又引入了十多个个子组件，这些子组件内也有，搞不好这些子组件内还有子组件，子组件的子组件同样还有弹窗，每个弹窗都有对应的一组控制显隐逻辑，分散在多个组件多个方法中，但是首页只有一个页面，你不可能让所有符合显示条件的弹窗，全都一下子弹出来，反正我是没见过这么做的 app，那么如何管理这些弹窗就成了头等大事
而往往当你意识到这一点的时候，很可能也正是局势发展到无法控制的时候 治不了，等死吧
场景：A弹窗和 B弹窗位于主组件内，C弹窗位于主组件的子组件 C中，D弹窗位于主组件的子组件 B中，E弹窗位于主组件的子组件F的子组件G中
PM：我希望刚进入这个页面的时候，只有当 A弹窗 和 B弹窗以及 C弹窗，都不展示的时候，才展示 D弹窗，如果 D弹窗展示过了，除非 B弹窗之后又展示了一遍，否则无论什么情况下都不展示 E弹窗
FE：？？？
稍加思考一下，其实这件事情并不难办，交给后端通过接口控制所有弹窗的显隐就行了 主要是架构的提前规划，以及低耦合的代码逻辑
弹窗的配置化
先确定一个大体思路，首先，必须要明确地知道当前页面共有哪些弹窗组件，包括页面的子组件以及子组件的子组件内的弹窗组件，这是必须的，否则你连有哪些组件都不知道怎么精确控制？
所以，还是上面那句话，提前规划，防患于未然是很重要的，不然等页面迭代了几十版，当初写代码的人都不在了你才想到去统计一下页面上到底有多少个弹窗，那真是够你喝一壶的
那么就需要在一个地方统一把这些弹窗全记录下来，方便管理，于是可以得到下面这种数据结构：
// modalMap.js export default { // 记录首页 index页面内的弹窗项 index: { modalList: [{ name: 'modal_1', level: 10, show: true }, { name: 'modal_2', level: 22, show: true }, { name: 'modal_3', level: 70, show: true }], children: { child1: { modalList: [{ name: 'modal_1_1', level: 8, show: true }, { name: 'modal_1_2', level: 62, show: true }], children: { child1_1: { modalList: [{ name: 'modal_1_1_1', level: 8, show: true }, { name: 'modal_1_1_2', level: 60, show: true }] } } } } } // ...还可以继续记录其他页面的弹窗结构 }
modalMap.js文件记录每个页面内所有的弹窗项，例如，首页 index内的弹窗项都在属性名index对于的值数据结构中，index这个页面主组件内存在两个 modal，可以分别命名为 modal_1和 modal_2，如果 index这个页面主组件的子组件内也有 modal，则继续嵌套，例如，index主组件的子组件 child1中也有 modal，那么就把 child1放到 index的 children中继续记录，以此类推
这种结构看起来比较清晰，主组件及主组件内的子组件内的 modal都很清晰，一目了然，当然，你可以不用这种结构，完全取决于你，这里就暂时这么定义
每个 modal除了 name之外，还有 level 和 show属性
level 用于标识当前 modal的层级，每个页面正常只能同时展示一个 modal，但如果有多个 modal都同一时间都满足展示的条件，则对比它们的 level值，哪个大就优先展示哪个，其余的忽略掉，杜绝一个页面可能提示展示多个弹窗的情况；
show属性则是在 modal内部来决定 modal最终是否展示，这样一来就可以无视外界条件，很轻松地通过配置来禁止掉弹窗的显示
通过发布/订阅模式来管理弹窗
弹窗的配置结构已经确定了，下一步就是对这些配置的管理了
一般情况下，多个页面同时满足条件需要进行展示的场景，大多数都是发生在刚进入页面，页面发出多个请求，这些请求的返回结果分别控制对应的一个弹窗的展示
因为发出去的这些请求很可能分属于不同的业务线或部门管辖，相互独立，所以说如果把弹窗的控制权交给后端来做，其实是有点困难的，再加上请求是异步的，前端想要用意大利面条式代码来保证弹窗之间的互斥性也不太容易，综合起来，也就导致了当页面上迭代出了数十个以上弹窗的时候，如果没有提前规划好，还是很容易出现弹窗同时展示的问题的
这里暂时就以刚进入页面的情况为例，进行逻辑梳理