码迷,mamicode.com
首页 > 编程语言 > 详细

javaScript的设计模式之单例模式

时间:2015-08-28 02:14:22      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:前端   javascript   设计模式   

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>




版权声明:本文为博主原创文章,未经博主允许不得转载。

javaScript的设计模式之单例模式

标签:前端   javascript   设计模式   

原文地址:http://blog.csdn.net/bboyjoe/article/details/48040587

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!