JS設計模式-單例模式

單例模式是一個用來劃分命名空間並將一批屬性和方法組織在一塊兒的對象,若是它能夠被實例化,那麼它只能被實例化一次。

原文連接設計模式

單例模式優勢app

  • 劃分命名空間,減小全局變量
  • 組織代碼爲一體,便於閱讀維護
並不是全部的對象字面量都是單例,好比模擬數據
基本結構:
let Cat = {
   name: 'Kitty',
   age: 3,
   run: ()=>{
      console.log('run');
   }
}

上面對象字面量結構是建立單例模式的方法之一,但並非單例模式,單例模式的特色是僅被實例化一次
要實現單例模式可使用變量來標示該類是否被實例dom

基本實現:
class Singleton {
    constructor(name){
        this.name = name;
        this.instance = null;
    }
    getName(){
        return this.name;
    }
}

let getInstance = (()=> {
    let instance;
    return (name)=> {
        if(!instance) {
            instance = new Singleton(name);
        }
        return instance;
    }
})()

let cat1 = getInstance('Hello');
let cat2 = getInstance('Kitty');
console.log(cat1 === cat2); //true
console.log(cat1.getName()) //'Hello'
console.log(cat2.getName()) //'Hello'

用instance變量標示實例Singleton,若是沒有實例建立一個,若是有則直接返回實例,因爲僅能被實例化一次,cat2獲得的實例和cat1相同this

實用
在建立dom元素時爲避免重複建立,可使用單例模式建立設計

//單例模式
let createModal = function() {
    let content = document.createElement('div');
    content.innerHTML = '彈窗內容';
    content.style.display = 'none';
    document.body.appendChild(content);
}

//代理獲取實例
let getInstance = function(fn) {
    let result
    return function() {
        return result || (result = fn.apply(this,arguments));
    }
}

let createSingleModal = getInstance(createModal);
document.getElementById("id").onclick = function(){
    let modal = createSingleModal();
    modal.style.display = 'block';
};

單例模式是一種簡單卻很是使用的設計模式,在須要時建立實例,而且只建立惟一一個代理

相關文章
相關標籤/搜索