js中用单例模式创建一个弹窗

历史

在开发中,动态创建一个弹层(暂且命名为box)是很常见的需求。因为如果在html中始终渲染这些box,代价可能会比较高,如果是纯文字还好,复杂点的涉及到ajax,图片,那就不太好了。然而如果每次用户一个动作(click或者mouseover)就动态创建一个box,移出就删除box,那么效率也不算很高,需要频繁绘制dom,性能不好。那么,如何比较高效、完美地创建一个弹窗呢?本文演示了用单例模式来创建。

演示

一个createWindow方法,用于创建box:

js中用单例模式创建一个弹窗_第1张图片

createWindow函数立即执行,返回了一个匿名函数,匿名函数中保持了createWindow闭包中对div的引用,若div已经存在,则直接返回div,如果不存在,才会重新创建。然后监听按钮事件,只需切换display状态就好了。

完整demo代码





    
    
    
    Document
    



    
    
    



你可能感兴趣的:(js中用单例模式创建一个弹窗)