JavaScript设计模式(一)——单例模式

一、单例模式概念解读

       单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。 

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

        模式作用:

               1.模块间通信

               2.系统中某个类的对象只能存在一个

               3.保护自己的属性和方法

        注意事项:

               1.注意this的使用

               2.闭包容易造成内存泄漏,不需要的赶快干掉

               3.注意new的成本(继承)

三、单例模式的代码应用和总结

        以小王家和小李家为例,进行代码的书写,他们要实现通信,可以通过门铃,可以一起走出来,也可以通过打电话的方式。下面是他们通过门铃交互的代码,如果没有门的话,那就创建一个门进行交互。代码本身没有特别大的实用价值,主要方便大家理解。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
    //1.独立的对象 建2个 一个xiaowang 一个xiaoli(为了方便理解所以采用这种命名方式)
    //2.让Xiaoli跟xiaowang通过门铃进行通讯
    //3.先看一下xiaowang家有没有门 如果有门直接通过门铃通讯didi,如果没有则先剑门
    //4.两个单例之间开始通信
    var xiaowang = (function (argument) {
        var xiaowangjia = function (message) {
            this.menling = message;
        };
        var door;
        var info = {
            sendMessage:function (message) {
                if(!door){
                    door = new xiaowangjia(message) //注意new的成本,静态方式
                }
                return door;
            }  
        };
        return info;
    })();
    var xiaoli = {
        callXiaowang : function (msg) {
            var _xw = xiaowang.sendMessage(msg);
            alert(_xw.menling);
            _xw = null //防止占用内存,等待垃圾回收
        }
    };
    xiaoli.callXiaowang('dingding门铃响了');
</script>

 

最终交互成功 ,看完这个例子后再具一个更为实用的用法,

我们在做前端的时候经常会遇到这样的情景,下面的是一般的代码

<script type="text/javascript">
    //页面上6个按钮a b c d e f 省略html代码
    $('#a').click(function () {
        //逻辑特别多
        var a = 4; //在这种情况下,已经形成闭包,b中无法访问这个a
    });
    $('#b').click(function () {
        
    });
    $('#c').click(function () {

    });
    $('#d').click(function () {

    });
    $('#e').click(function () {

    });
    $('#f').click(function () {

    });
</script>

那么我们通过单例模式进行改造后会怎么样呢?

<script type="text/javascript">
    //页面上6个按钮a b c d e f 省略html代码
    //a b c => top      a,b,c属于top这个命名空间
    //d e f => banner      d,e,f属于banner这个命名空间
    var top = {
        init:function () {
            this.render();
            this.bind();
        },
        a:4,
        render:function () {
            var me =this;//这里的this指向top
            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;//这里的this指向top
            me.btna = $('#d');
        },
        bind:function () {
            var me = this;
            me.btna.click(function () {
                me.test();
            });
        },
        test:function () {
            //d = 6;
            top.a = 6; //改变top中的a
        }
    }
    top.init();
    banner.init();
</script>

这样就完成了单例模式的改造,可以进行d对a的操作

猜你喜欢

转载自blog.csdn.net/qq_41000891/article/details/82762626