设计模式----单例模式

109 阅读1分钟

核心思想是确保一个类只对应一个实例

1. 利用闭包来

function Base() {}

Base.prototype.test = 1;
const single = (function () {  
    let instance = null;  
        return function () {   
             if (!instance) {      
                instance = new Base()    
              }    
                return instance 
             }})()
            const a = single();
            const b = single()
            console.log(a === b)
            a.test = 2;
            console.log(b.test)

2. 利用es6 class的静态属性

class Base {  
    static getInstace() {   
         if (!Base.instance) {     
                 Base.instance = new Base()   
             }    
            return Base.instance  }  
        }

const a = Base.getInstace();
const b = Base.getInstace()
console.log(a === b)
a.test = 2;
console.log(b.test)

3. 实际应用 模态框 在构造函数中创建单例模式

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title></head><body>  <button id='a'>opne</button>  <button id='b'>close</button>  <script>    class Modol {      constructor() {        if (!Modol.instace) {          Modol.instace = this        }        this.div = document.createElement('div');        this.div.innerHTML = ''        document.querySelector('body').append(this.div)        return Modol.instace;      }      open() {        this.div.innerHTML = 'open'      }      close() {        this.div.innerHTML = 'close'      }    }    document.querySelector('#a').addEventListener('click', () => {      const modol = new Modol();        modol.open()    })    document.querySelector('#b').addEventListener('click', () => {      const modol = new Modol();        modol.close()    })  </script></body></html>