1. 程式人生 > 其它 >js 設計模式——單例模式

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)