设计模式 —— 单例模式（2021/5/16)

忘是亡心i 2023-01-21 12:16 40阅读 0赞

> 概念

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

> eg：

*  开发商的房子没有门，就创建一个门然后再进入房间，如果有，则直接进入房间，无需创建新的门

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

*  模式作用:
 *  1.模块间通信。
 *  2.统中某个类的对象只能存在一个。
 *  3.保护自己的属性和方法。
 *  注意事项:
 *  1.注意this的使用。
 *  2.闭包容易造成内存泄露，不需要的赶快干掉。
 *  3.注意new的成本。(继承)

> 单例模式示例代码：

> 实际场景使用：

// 页面上6个按钮a b c d e f 
    $('#a').click(function(){ 
            // 逻辑特别多
            var a = 4; //b获取不到#a的变量a,形成了闭包
    })
    $('#b').click(function(){ 
            // 逻辑
    })
    $('#c').click(function(){ 
            // 逻辑
    })
    $('#d').click(function(){ 
            // 逻辑
    })
    $('#e').click(function(){ 
            // 逻辑
    })
    $('#f').click(function(){ 
            // 逻辑
    })
    
    // 单例模式改写如下：
    // a b c 归属于top
    // d e f 归属于banner
    
    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;
            }
    }
    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;//自己保护自己，修改其他地方的a
            }
    }
    
    top.init();
    banner.init();