js 设计模式——单例模式

定义

单例就是保证一个类只有一个实例。

实现方法是，先判断实例是否存在，如果存在则直接返回，如果不存在，则创建实例对象，并将实例对象保存在静态变量中，当下次请求时，则可以直接返回这个实例对象，确保了一个类只有一个实例对象。

应用：弹窗，登录，node模块，webpack模块等。

模板

class Analyzer{
    private static instance: Analyzer 
    static getInstance(){
        if(!Analyzer.instance){ // 如果Analyzer没有instance
            Analyzer.instance = new Analyzer()
        }
        return Analyzer.instance
    }
}

// 使用
const analyzer = Analyzer.instance()

弹窗

// 优化：单一职责，所有函数，它的职责只有一个
function creatDom() {
    let dom = document.createElement('div')
    dom.style.display='none'
    document.body.append(dom)
    return dom
}

let Single =(function() {
    let instance 
    return function(fn) {
        return  instance || (instance = fn.apply(this, arguments))
    }
})()

let Alert = (function(){
    let instance
    let dom 
    /* 违背单一职责
    function creatDom() {
        if(!dom){
            dom = document.createElement('div')
            dom.style.display='none'
            document.body.append(dom)
        }    
    }
    */
    function Alert(content) {
        instance = instance || (this instanceof Alert? this : new Alert(content)) 
        instance.init(content)  
        return instance
    }
    Alert.prototype.init=function(content){
        // creatDom()
        dom = Single(creatDom) // 创建一个新的单体
        dom.innerHTML = content
        dom.style.display = 'block'
    }
    Alert.prototype.hide = function(){
        dom.style.display = 'none'
    }
    return Alert
})()

let a=Alert('aaaaa')
let b=new Alert('bbbbb')
console.log(a.content)
console.log(b.content)
console.log(a === b)