深入理解div+css+javascript弹出层,弹窗,对话框,web弹出层插件MyPopup之MyPopup弹出层们的调度机制

作者: 麦草CMS 日期: 2019/03/06 16:20:33

说到javascript中的div弹出层,我想用到最多的地方应该是用户动作触发弹出层;但也不乏代码顺序执行触发弹出层的案例,比如div弹出层模仿浏览器的alert对话框组件。在弹出层的调度方面,用户动作触发弹出层的很好处理,最近的用户动作触发的弹出层肯定在最上面;代码顺序执行触发弹出层的调度就比较麻烦点了。鉴于JavaScript的运行机制,在ES6之前,实现模态对话框效果的div弹出层是很复杂的。JavaScript是“阻塞式执行”的,但你要阻塞一行代码后续代码的执行似乎有比较麻烦,我能想到的只有在回调函数中运行后续代码,如果出现多层嵌套回调函数,这就使得代码理解起来显得非常晦涩难懂。代码顺序执行触发的弹出层之间不一定有关联,用回调函数来调度后面的弹出层显示与否使不相关的两个弹出层之间有了耦合,会增加代码的逻辑复杂度;有了耦合,与之相应的div弹出层组件的灵活度就会降低。


MyPopup利用关联数组维护着一个div弹出层队列。关联数组中保存着弹出层的一些状态,MyPopup的make(),close(),outerClickPopupsClose()以及setTimer()四个方法依据MyPopup弹出层的增删情况共同维护着弹出层队列、队列中弹出层的顺序以及队列中弹出层的调度。这样就使各个无关联弹出层之间没有耦合,增加了弹出层的灵活性,可以像使用alert,confirm,propmt等对话框组件一样随时随地一个函数调用表达式就弹出一个div弹出层,不需要任何逻辑预判。


MyPopup的弹出层队列调度相关代码仅有两百来行。其他的都是弹出层dom构建相关代码。


MyPopup目前仅返回弹出层dom节点的引用,计划后续返回更多东西,以供其他代码使用。

我还说什么呢?
0.0020298957824707