js单例模式——创建弹窗

最新推荐文章于 2023-01-25 11:06:38 发布
最新推荐文章于 2023-01-25 11:06:38 发布
阅读量2k 收藏 4
点赞数
分类专栏： javascript 设计模式 文章标签： js单例模式 唯一弹窗
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangxiuyan0228/article/details/79457538
版权

一、了解单例模式

    单例模式的定义：保证一个类仅有一个实例，并提供一个访问他的全局访问点

    单例模式的核心：是确保只有一个实例，并提供全局访问

二、javascript中的单例模式

    在js中，我们经常会把全局变量当做单例模式来使用，例如：

        var a={};

    为什么a可以当做全局变量来使用呢，因为其满足以下两个条件：

        1、对象a独一无二

        2、a定义在全局作用域下，提供了全局访问

    注：但是在js中建议使用命名空间，来减少全局变量的数量

三、惰性单例

    惰性单例：在需要的时候才创建的对象实例

    用途：在页面中有两个按钮，点击的时候需要显示响应弹窗并加载相应的css文件

    注：有些开发人员习惯在页面加载时就写进去，然后设置隐藏状态，这样就会浪费DOM节点


下面是实现代码：

1、主页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单例模式</title>
    <style type="text/css">
        body{
            background: #fffff2;
        }
        h3{
            text-align: center;
        }
    </style>

</head>



<body>
    <h3>创建唯一的窗口</h3>
    <button type="button" id="btn1">创建div1</button>
    <button type="button" id="btn2">创建div2</button>
</body>

<script type="text/javascript">
    /**
     * 管理单例
     */
    var getSingle=function(fn){
        var result;
        return function(){
            return result || (result=fn.apply(this,arguments));
        }
    };


    // 弹框关闭打开
    function LayerAction(){
        this.layer=null;//弹窗element

        if(typeof this.setLayer !== "function"){

            // 设置弹窗
            LayerAction.prototype.setLayer=function(layer){
                if(!layer){
                    console.error("参数不完整，必须传入layer");
                    return;
                }else{
                    this.layer=layer;
                }
            };

            // 显示弹窗
            LayerAction.prototype.showLayer=function(){
                this.layer.style.display="block";
            };

            // 关闭弹窗
            LayerAction.prototype.closeLayer= function(){
                this.layer.style.display="none";
            } ;
        }
    }



    /**
     * div1弹窗
     */
    var div1={
        div1Layer:null,
        layerAction: new LayerAction(),


        // 创建div1弹窗
        createDiv1Layer:function(){
            var div=document.createElement("div");
            div.innerHTML="我是div1";
            div.style.display='none';
            div.id="div1";
            document.body.appendChild(div);
            var closeBtn=document.createElement("span");
            closeBtn.innerText="关闭";
            closeBtn.id="closeDiv1";
            div.appendChild(closeBtn);
            return div;
        },

        // 引入div1弹窗样式列表
        createDiv1Style: function() {
            var styleElement = document.createElement('link');
            styleElement.type = 'text/css';
            styleElement.href = 'div1.css';
            styleElement.rel = 'stylesheet';
            document.getElementsByTagName('head')[0].appendChild(styleElement);
            console.log(document.getElementsByTagName('head')[0].innerHTML);
            return styleElement
        },

        // 为关闭按钮绑定事件
        bindActionForCloseLayer: function(){
            var that=div1;
            document.getElementById("closeDiv1").οnclick=function(){
                that.layerAction.closeLayer();
            }
        },

        // 调用弹窗1
        startDiv1Layer: function(){
            var createDiv1singleLayer=getSingle(this.createDiv1Layer);
            var createDiv1singleStyle=getSingle(this.createDiv1Style);
            var bindCloseEvent=getSingle(this.bindActionForCloseLayer);
            var that=this;
            document.getElementById("btn1").οnclick=function(){
                createDiv1singleStyle();
                that.div1Layer=createDiv1singleLayer();
                that.layerAction.setLayer(that.div1Layer);
                that.layerAction.showLayer();
                bindCloseEvent();
            }
        }
    };
    div1.startDiv1Layer();



    /**
     * div2弹窗
     */
    var div2={
        div2Layer:null,
        layerAction: new LayerAction(),
        // 创建div2弹窗
        createDiv2Layer: function(){
            var div=document.createElement("div");
            div.innerHTML="我是div2";
            div.style.display='none';
            div.id="div2";
            document.body.appendChild(div);
            var closeBtn=document.createElement("span");
            closeBtn.innerText="关闭";
            closeBtn.id="closeDiv2";
            div.appendChild(closeBtn);
            return div;
        },

        // 引入div2弹窗样式列表
        createDiv2Style: function () {
            var styleElement = document.createElement('link');
            styleElement.type = 'text/css';
            styleElement.href = 'div2.css';
            styleElement.rel = 'stylesheet';
            document.getElementsByTagName('head')[0].appendChild(styleElement);
            console.log(document.getElementsByTagName('head')[0].innerHTML);
            return styleElement
        },


        // 为关闭按钮绑定事件
        bindActionForCloseLayer: function(){
            var that=div2;
            document.getElementById("closeDiv2").οnclick=function(){
                that.layerAction.closeLayer();
            }
        },

        // 调用弹窗2
        startDiv2Layer: function(){
            var createDiv2singleLayer=getSingle(this.createDiv2Layer);
            var createDiv2singleStyle=getSingle(this.createDiv2Style);
            var bindCloseEvent=getSingle(this.bindActionForCloseLayer);
            var that=this;
            document.getElementById("btn2").οnclick=function(){
                createDiv2singleStyle();
                that.div2Layer=createDiv2singleLayer();
                that.layerAction.setLayer(that.div2Layer);
                that.layerAction.showLayer();
                bindCloseEvent();
            }
        }
    }
    div2.startDiv2Layer();

</script>

</html>

2、div1.css

/**
 * Description: 
 * Created by wxy on 2018/2/13 11:02
 */

#div2{
    width: 500px;
    height: 300px;
    background: #ffdd00;
    color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#closeDiv2{
    cursor: pointer;
    margin-right: 5px;
    margin-top: 5px;
    float: right;
    border: 1px solid #fff;
}
3、div2.css 
/**
 * Description: style of div1
 * Created by wxy on 2018/2/13 11:01
 */

#div1{
    width: 500px;
    height: 300px;
    background: #0b0a0a;
    color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#closeDiv1{
    cursor: pointer;
    margin-right: 5px;
    margin-top: 5px;
    float: right;
    border: 1px solid #fff;
}

艳妮子Yeah
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
单例模式--只能弹出一个窗体
03-07
单例模式--只能弹出一个窗体 只能弹出一个窗体
单例模式的弹窗
weixin_34365417的博客
07-17 390
转载于:https://www.cnblogs.com/sunsie/p/7193182.html
JavaScript创建弹出窗口
yongyonglsy的专栏
06-13 184
Internet Explorer 5.5支持一个新的window对象的方法：creatPopup（）。你可以向下面一样创建一个弹出窗口： 　　var popupObj =window.createPopup(); 　　当你创建了这个对象后，弹出窗口并不显示。你必须要调用它的show方法： //from www.w3sky.com 　　popupObj.show(yOffset,x...
JS生成弹窗效果
11-06
JS弹窗效果，对联弹窗等锁定，可移动，右下角弹窗
js 书写一个简单弹窗
仲广绪的博客
04-29 721
弹窗 html <div class="mark"></div> css .mark { position: fixed; top: 80%; left: 50%; margin-left: --100px; width: 200px; height: 36px; line-height: 36px; text-align: cent...
解析Javascript单例模式概念与实例
10-20
在现实生活中，比如登录弹窗，无论用户点击多少次，界面只会显示一个弹窗，不会出现第二个相同功能的弹窗，这就体现了单例模式的思想。在软件设计中，单例模式同样限制一个类只能被实例化一次，确保所有对该类实例的...
js单例模式的两种方案
10-26
### JS单例模式的两种实现方案 #### 一、引言 在JavaScript中，单例模式是一种常用的软件设计模式，其主要目的是确保一个类只有一个实例，并提供一个全局访问点。这种模式广泛应用于需要频繁创建的对象，例如日志...
js单例模式详解实例
12-11
- **数据库连接**：在Node.js中，数据库连接通常是昂贵的资源，使用单例模式可以确保整个应用共享一个数据库连接，避免频繁创建和销毁连接。 - **日志服务**：为了统一记录和管理日志，可以创建一个日志服务的单例。...
JS 设计模式之：单例模式定义与实现方法浅析
11-21
本文实例讲述了JS 设计模式之：单例模式定义与实现方法。分享给大家供大家参考，具体如下： 良好的设计模式可以显著提高代码的可读性，降低复杂度和维护成本。笔者打算通过几篇文章通俗地讲一讲常见的或者实用的设计...
javascript单例模式的简单实现方法
10-23
主要介绍了javascript单例模式的简单实现方法,以javascript创建唯一实例的形式分析了javascript单例模式的简单实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
单例的使用--弹出框
07-21
使用原生JavaScript写的单例小模式，适用于大多数的form表单中。
Javascript单例模式概念与实例
weixin_34396103的博客
09-30 127
前言 和其他编程语言一样，Javascript同样拥有着很多种设计模式，比如单例模式、代理模式、观察者模式等，熟练运用Javascript的设计模式可以使我们的代码逻辑更加清晰，并且更加易于维护和重构。 本文将介绍Javascript模式中较为常见和实用的模式——单例模式，主要分为概念和实例部分。在介绍实例的同时也会对代码中额外的知识点进...
js自定义小弹窗
m0_62109588的博客
01-25 807
JavaScript自定义弹窗
js创建普通的弹出窗口
说：/~不了的专栏
01-22 958
/** * js创建普通的弹出窗口 * */ function createPopoverDialog(config){ //var configJson = $.parseJSON(config); var DialogJson = { successFuc: null, //确定绑定事件 checkReturn: f
单例模式应用，实现一个message弹窗
baidu_41601048的博客
06-18 972
我们实现一个message弹窗，将在axios封装中替换第三方组件库提供的message ----------------------- message.js
JS 单例设计模式解读与实践（Vue 中的单例登录弹窗）
似水流年的博客
04-16 3379
前言 在之前笔者发布的一篇文章中（Vue全局手动挂载组件封装（Message, Loading, Spin类组件））有介绍到在 vue 中实现全局手动挂载登录组件的实现，这样做的好处是可以在任何页面的业务逻辑中轻松调用一行代码便拉起了登录弹窗（this.$loginPopup()）。但是当时在设计的时候还有一个问题没有考虑就是这个登录弹窗组件的调用生成方法并不是单例的，这就意味着在某些时候可能在页面上会同时弹出好几个一样的登录弹窗，而在我们的业务逻辑中一般认为登录弹窗是唯一的；因此需要对这段组件的生成代码
JavaScript利用单例设计模式实现一个简单的模态框
qq_19313497的博客
02-15 258
首先介绍一下单例模式 什么是单例模式？ 保证一个类仅有一个实例，并提供一个访问它的全局访问点，这样的模式就叫做单例模式。 为什么需要单例模式？ 一句话，优化代码。 什么时候需要单例模式？ 1、有频繁实例化然后销毁的情况，也就是频繁的 new 对象，可以考虑单例模式； 2、创建对象时耗时过多或者耗资源过多，但又经常用到的对象； 3、频繁访问 IO 资源的对象，例如数据库连接池或访问本地文件； 实例 ...
css上被忽略的targe选择器
qq_37942845的博客
08-03 260
一个有趣的demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
js——单例模式
总柴的博客
02-23 226
js实现单例模式 确保一个类仅有一个实例。 如弹窗效果，多次点击按钮也只弹出一个弹窗，程序会判断当前是否有弹窗，如果有则不弹，没有则弹； 还有防抖效果，如果当前有定时器在执行，那么就不重新启用新的定时器，只有没有定时器了再打开一个新的定时器。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width
javaScript单例模式
最新发布
09-29
单例模式是一种设计模式，用于确保一个类只有一个实例，并提供一个全局访问点来访问该实例。在JavaScript中，可以使用不同的方法来实现单例模式。 一种简单的实现方式是使用闭包来创建单例对象。通过将实例保存在闭包中，并在需要时返回该实例，可以确保只有一个实例被创建。例如，在上述引用中，通过创建一个函数立即执行的闭包，在闭包内部实现了单例模式。 另一种透明的实现方式是使用代理来创建单例对象。通过将实例化逻辑封装在代理类中，并将代理类暴露给外部使用，可以实现对单例对象的透明访问。例如，在上述引用中，通过创建一个代理类CreateDiv来管理单例对象的实例化和访问。 单例模式通常用于需要全局唯一对象的场景，例如共享资源、配置信息等。它可以确保只有一个实例被创建和访问，从而提供了更好的性能和资源管理。 单例模式的优点包括： - 提供了对唯一实例的全局访问点，方便了对象的管理和使用。 - 避免了重复创建实例，减少了内存占用和性能开销。 单例模式的缺点包括： - 可能破坏了类的单一职责原则，将实例化逻辑和业务逻辑耦合在一起。 - 可能导致代码的可测试性和可维护性降低。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值