JavaScript 单例设计模式

概念:

前端单例就是保证一个类只有一个示例，实现的方法一般是先判断实例存在与否，如果存在直接返回，

如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。

再JavaScript里，单例作为一个命名空间提供者，从全局命名空间提供一个唯一的访问点来访问该对象。

模式作用:

1、模块间通信

两个独立的模块(被固封在自己的模块中)互相通信

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

大类里只允许一个的时候，可以使用单列模式

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

防止单例对象被污染

注意:

1、this的使用(js 里的this的特点随着不停的调用随时在变化)

2、闭包容易造成内存泄露。不需要的赶快干掉

拿到了不该拿到的东西

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

var a = new String(某个对象); (有节制地使用)

JavaScript单例的实战

简单通讯列子:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单例通讯练习</title>
</head>
<script type="text/javascript" src = "static/jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
    //1、独立的对象 建立两个对象 小王(xiaowang)与小杨(xiaoyang)
    //2、让小王(xiaowang)跟小杨(xiaoyang)通过门铃进行通信
    //3、先看一下小王家(xiaowang)有没有门，如果有门直接通过门铃通讯dd ,如果没有门先建门
    //4、两个单例之间开始通讯
    var xiaowang = (function(argument){
        var xiaowangjia = function(message){
            this.menling = message;
        }
        var men;
        var  info = {
            sendMessge:function (message) {
                if (!men){
                    men = new xiaowangjia(message)
                }
                return men;
            }
        }
        return info;
    })();
    var xiaoyang = {
        callXiaowang:function(msg){
            var _xw = xiaowang.sendMessge(msg);
            alert(_xw.menling);
            _xw = null;//等待垃圾回收
        }
    };
    xiaoyang.callXiaowang('dd')
</script>
<body>
</body>
</html>

项目中通讯使用的列子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单例通讯练习</title>
</head>
<script type="text/javascript" src = "static/jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
    //项目中如何用
    //页面上两个按钮 a,b
    //a 归属于_top命名空间
    //b 归属于_banner命名空间
    var _top = {
         init:function () {
            this.render();
        },
              flag:1,
        render:function(){
            var me = this; //指_top
                     this.bind();
        },
        //绑定事件
        bind:function () {
            var me = this; //指_top       
            //业务逻辑取出去  这里的this指按钮
            me.test()
        },
        test:function () {
            _banner.flag = 0;
        }
    };
    var _banner = {
        init:function () {
            this.render();
           
        },
              flag:1,
        render:function(){
            var me = this; //指_banner
            me.btna = $('#b');
                     this.bind();
        },
        //绑定事件
        bind:function () {
            var me = this; //指_banner
            //业务逻辑取出去  这里的this指按钮
                me.test()
        },
        test:function () {
            _top.flag = 2;
        }
    };
   $(document).ready(function () {
    //两个按钮
    $('#a').click(function(){
        //假设逻辑特别多
               _top.init();
               alert(_banner.flag);
     
    });
    $('#b').click(function(){
        //假设逻辑特别多
              _banner.init();
              alert(_top.flag);
    });
   })
      
</script>
<body>
     <input type="button" value="a按钮" id="a"/>
     <br>
     <input type="button" value="b按钮" id="b"/>
</body>
</html>

JavaScript 单例设计模式

JavaScript 单例设计模式

猜你喜欢