单列模式

单例设计模式

单例设计模式特点是在整个程序运行过程中一个类型只有一个实例。

- 单例模式一

//代码实现
class Person{
    constructor(){
        if(!Person.instance){
            Person.instance = this;
        }
        return Person.instance
    }
}

let p1 = new Person();

let p2 = new Person();

console.log(p1 === p2);  //true

• 单例模式二

class Person{
    static getInstance(){
        if(!Person.instance){
            Person.instance = new Person();
        }
        return Person.instance
    }
}

let p1 = Person.getInstance();

let p2 = Person.getInstance();

console.log(p1 === p2);

单例模式—模态框

class Model{
    static getInstance(){
        if(!Model.instance){
            Model.instance = document.createElement('div');
            Model.instance.innerHTML = '内容';
            Model.instance.id = "model";
            Model.instance.style.display = 'none';
            document.body.appendChild(Model.instance);
        }
        return Model.instance
    }
}

let open = document.querySelector('#open');
let close = document.querySelector('#close');
open.addEventListener('click',function(){
    let model = Model.getInstance();
    model.style.display = 'block';
})

close.addEventListener('click',function(){
    let model = Model.getInstance();
    model.style.display = 'none';
})