《高级前端4.2》JavaScript 设计模式之单例模式

在 JavaScript 里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。学习好单例模式，在开发中将能很好的控制命名空间，避免变量污染等。

 

单例模式概念解读

说明：

1.如果房子没有门，就找开发商造一个门；如果房子已经有门，那么就直接用这个门；

2.小王跟小李的两扇门分别归属各自的房子，只有唯一的一个门，拥有唯一的门牌号，之间又可以通信；

（各自唯一的一扇门，可以保护各自的家不被坏人侵入）

 

 

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

 

 

单例模式代码实战和总结

我们以上面的例子，来展示一个简单的单例模式：

<script type="text/javascript">
//1.独立的对象 建2个 一个xiaowang 一个xiaoli
//2.让xiaoli跟xiaowang通过门铃进行通信
//3.先看一下xiaowang家有没有门 如果有门直接通过门铃通讯didi 如果没有先建门
//4.两个单利之间开始通信

//动态单例，需要的时候才会new
var xiaowang = (function(argument){
    var xiaowangjia = function(message){
        this.menling = message;
    }
    var men;
    var info = {
        sendMessage: function(message){
            if(!men){
                men = new xiaowangjia(message);
            };
            return men;
        }
    };
    return info;
})();
//静态单例，常驻内存
var xiaoli = {
    callXiaowang: function(msg){
        var _xw = xiaowang.sendMessage(msg);
        alert(_xw.menling);
        _xw = null; //等待垃圾回收，以免闭包造成内存泄漏
    }
}
xiaoli.callXiaowang("didi");
</script>

 

再来看一个例子:

<input type="button" id="a" value="buttonA">
<input type="button" id="d" value="buttonD">

<script type="text/javascript">
    //来看一个平时开发的例子，页面上有6个按钮 
    //a b c => top
    //d e f => banner
    var tops = {
        init: function(){
            this.render();
            this.bind();
        },
        a: 4,
        render: function(){    //存放所有DOM元素
            var me = this;
            me.btna = $('#a');
        },
        bind: function(){
            var me = this;
            me.btna.click(function(){
                //业务逻辑取出去
                me.test();
            });
        },
        test: function(){
            a = 5;
        }
    };
    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;
            tops.a = 6;
            console.log(tops.a);
        }
    };
    
    tops.init();
    banner.init();
    console.log(tops.a);
</script>