JS設(shè)計(jì)模式-單例模式


單例模式是一個(gè)用來劃分命名空間并將一批屬性和方法組織在一起的對(duì)象,如果它可以被實(shí)例化,那么它只能被實(shí)例化一次。
原文鏈接

單例模式優(yōu)點(diǎn)

  • 劃分命名空間,減少全局變量
  • 組織代碼為一體,便于閱讀維護(hù)

并非所有的對(duì)象字面量都是單例,比如模擬數(shù)據(jù)

基本結(jié)構(gòu):
let Cat = {
   name: 'Kitty',
   age: 3,
   run: ()=>{
      console.log('run');
   }
}

上面對(duì)象字面量結(jié)構(gòu)是創(chuàng)建單例模式的方法之一,但并不是單例模式,單例模式的特點(diǎn)是僅被實(shí)例化一次
要實(shí)現(xiàn)單例模式可以使用變量來標(biāo)示該類是否被實(shí)例

基本實(shí)現(xiàn):
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變量標(biāo)示實(shí)例Singleton,如果沒有實(shí)例創(chuàng)建一個(gè),如果有則直接返回實(shí)例,由于僅能被實(shí)例化一次,cat2得到的實(shí)例和cat1相同

實(shí)用
在創(chuàng)建dom元素時(shí)為避免重復(fù)創(chuàng)建,可以使用單例模式創(chuàng)建

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

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

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

單例模式是一種簡單卻非常使用的設(shè)計(jì)模式,在需要時(shí)創(chuàng)建實(shí)例,并且只創(chuàng)建唯一一個(gè)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容