js——单例模式

最新推荐文章于 2022-11-09 16:42:52 发布

静尾

最新推荐文章于 2022-11-09 16:42:52 发布

阅读量230

点赞数

分类专栏：设计模式文章标签： js javascript

本文链接：https://blog.csdn.net/qq_41176306/article/details/113993171

版权

设计模式专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文通过一个JavaScript示例展示了如何使用单例模式来确保弹窗效果的唯一性，同时讨论了防抖技术在防止频繁启动定时器上的应用。通过创建WindowObj函数并利用闭包来实现单例，确保多次调用时只会创建一个弹窗，并能正确地打开和关闭。此外，还解释了防抖原理，即在定时器执行中避免重复设置，提高程序效率。

摘要由CSDN通过智能技术生成

js——单例模式

确保一个类仅有一个实例。

如弹窗效果，多次点击按钮也只弹出一个弹窗，程序会判断当前是否有弹窗，如果有则不弹，没有则弹；

还有防抖效果，如果当前有定时器在执行，那么就不重新启用新的定时器，只有没有定时器了再打开一个新的定时器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .window {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <button onclick="popupWindow('弹窗内容')">打开弹窗</button>
    <button onclick="closeWindow()">关闭弹窗</button>

    <script>
        let createWindow = (function () {
            let onlyWindow = null;
            return function () {
                if(!onlyWindow) {
                    onlyWindow = new windowObj();
                }
                return onlyWindow;
            }
        })();
        function windowObj() {
            let div = document.createElement('div');
            div.className = 'window';
            div.style.display = 'none';
            document.body.appendChild(div);
            return div;
        }

        {
            let ppWindow = createWindow();
            function popupWindow (msg) {
                ppWindow.innerText = msg;
                ppWindow.style.display = 'block';
            }
            function closeWindow () {
                ppWindow.style.display = 'none';
            }
        }
    </script>
</body>
</html>

静尾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js——单例模式

js实现单例模式确保一个类仅有一个实例。如弹窗效果，多次点击按钮也只弹出一个弹窗，程序会判断当前是否有弹窗，如果有则不弹，没有则弹；还有防抖效果，如果当前有定时器在执行，那么就不重新启用新的定时器，只有没有定时器了再打开一个新的定时器。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width
复制链接

扫一扫

专栏目录