九、js闭包实现单例模式、es6单例模式（2021/4/25）

淡淡的烟草味﹌ 2023-01-16 15:20 141阅读 0赞

> \#单例模式的理解

定义:

*  1.只有一个实例
 *  2.可以全局的访问  
    主要解决:一个全局使用的类频繁的创建和销毁  
    何时使用:当你想控制实例的数目节省系统化资源的时候  
    如何实现:判断系统是否已经有这个单例如果有则返回没有则创建  
    单例模式优点:内存中只要一个实例·减少了内存的开销·尤其是频繁的创建和销毁实例(比如说是首页页面的缓存)
 *  使用场景:
 *  1.全局的缓存
 *  2.弹窗

> \#es5 实现单例模式

*  第一种情况：加载完成的时候，已经创建好这个弹窗了，一开始是隐藏的状态
 *  缺点：资源的浪费

*  第二种情况：点击的时候创建
 *  缺点：每一次点击都产生一个新的弹窗，频繁地创建

var createLoginLayer = function(){   
                    var div  = document.createElement('div');
                    div.innerHTML = '我是登录的弹窗';
                    div.style.display = 'none';
                    document.body.appendChild(div)
                    return div
            }
    
            document.getElementById('button').onclick = function(){ 
                    var loginLayer = createLoginLayer();
                    loginLayer.style.display = 'block';
            }
    </script>

*  第三种情况：单例模式（判断这个系统是否有弹窗，有就返回，没有就创建）
 *  要有一个标记在内存中 => 不能被销毁的标记 ：闭包

> 单一模式优化

<body>
            <button id="loginBtn">登录</button>
            <script>
                    // 单例模式
                    var createLogin = function(a,b,c){ 
                            console.log(a,b,c);
                            var div = document.createElement('div');
                            div.innerHTML = '我是登录的弹窗';
                            div.style.display = 'none';
                            document.body.appendChild(div)
                            return div
                    }
                    
                    var getSingle = function(fn){ 
                            var result; //闭包保存单一变量
                            return function(){ 
                                    return result || (result = fn.apply(this,arguments)) //如果有result就使用上次的内容，如果没有则执行有参数返回的回调函数
                            }
                    }
    
                    var create = getSingle(createLogin)
    
                    document.getElementById('loginBtn').onclick = function (){ 
                            var loginLay = create(1,2,3);
                            loginLay.style.display = 'block';
                    }
            </script>
    </body>

> es6单例模式

*  不需要用到闭包

> 引子：

*  es5 构造函数的写法

function Person(name,sex){ 
            this.name = name;
            this.sex = sex;
    }
    Person.prototype.say = function(){ 
            console.log('学前端');
    }
    
    let person1 = new Person('星空','男');
    console.log(person1.name);
    person1.say();

*  es6 的实现 (es5的语法糖)

class Person{ 
            constructor(name,sex){ 
                    this.name = name;
                    this.sex = sex;
            }
            say(){ 
                    console.log('学前端');
            }
    }
    // 在这里会发现 方法虽然定义在里面，实则是定义在原型上的
    let person1 = new Person('星空','男');
    console.log(person1.name);
    console.log(Person.prototype.say === person1.say) //true

*  静态方法 static

class Foo{ 
            static classMethod(){ 
                    return 'hello'
            }
    }
    
    let foo = new Foo();
    console.log(Foo.classMethod())
    // console.log(foo.classMethod()) //static方法不允许实例调用

*  借助static 实现单例模式：

class LyEdu{ 
            constructor(name,creator,products){ 
                    this.name = name;
                    this.creator = creator;
                    this.products = products;
            }
            static getInstance(name,creator,products){ 
                    if(!this.instance){ 
                            this.instance = new LyEdu(name,creator,products); // 给LyEdu添加一个单一的属性instance
                    }
                    return this.instance;
            }
    }
    
    let lyCom = LyEdu.getInstance('零元教育','裴老师',['js','css','html']);
    let lyCom2 = LyEdu.getInstance('零元教育2','裴老师2',['js2','css','html']);
    console.log(lyCom === lyCom2)  // true 只能创建第一个生效