javaScript的设计模式之单例模式

最新推荐文章于 2024-02-07 21:27:33 发布

bboyjoe

最新推荐文章于 2024-02-07 21:27:33 发布

阅读量936

点赞数

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

本文链接：https://blog.csdn.net/bboyjoe/article/details/48040587

版权

javascript 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

1.何为js的单例模式？

2.单例模式的作用和注意事项：

3.代码示例：

<script type="application/javascript">
$(document).ready(function(){
    //1.建两个独立的对象，jason,jerry;
    //2.让jerry与jason通过门铃进行通讯；
    //3.先看jason家有没有门，如果有门直接通过门铃通讯didi,如果没有，先建门
    //4.两个单例之间开始通讯

    /*立即型function对象jason*/
    var jason=(function(){
        var jason_home=function(message){
            this.menling=message;
        }
        var men;
        var info={
            sendMessage:function(message){
                if(!men){
                    men=new jason_home(message);
                }
                return men;
            }
        }
        return info;
    })();

    /*object对象jerry*/
    var jerry={
        callJason:function(msg){
            var _jason=jason.sendMessage(msg);
            alert(_jason.menling);
            _jason=null;//等待垃圾回收
        }
    };
    jerry.callJason("dingdong");

})
</script>

js实际开发中常用单例来作为命名空间：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单例设计模式的代码实战</title>
    <script src="js/jquery-2.1.3.min.js"></script>
</head>
<body>
<button id="a">a</button>
<button id="b">b</button>
<button id="c">c</button>
<button id="d">d</button>
<button id="e">e</button>
<button id="f">f</button>
<script type="application/javascript">
$(document).ready(function(){
    //建立按钮a、b、c的命名空间top
    var top={
        init:function(){
            this.render();
            this.bind();
        },
        a:4,
        render:function(){
            var me=this;
            me.btna=$("#a");
        },
        bind:function(){
            var me=this;
            me.btna.click(function(){
                //将业务逻辑取出去
                me.test();
            });
        },
        test:function(){
            a=5;
            alert(a);
        }
    }
    //建立按钮d、e、f的命名空间banner
    var banner={
        init:function(){
            this.render();
            this.bind();
        },
        a:4,
        render:function(){
            var me=this;
            me.btna=$("#d");
        },
        bind:function(){
            var me=this;
            me.btna.click(function(){
                //将业务逻辑取出去
                me.test();
            });
        },
        test:function(){
//            a=6;
            top.a=6;
            alert(top.a);
        }
    }
    top.init();
    banner.init();

})
</script>
</body>
</html>