前端仔學學設計模式--單例模式

設計模式知識提取將分爲N篇文章，本篇文章是個開篇文，後期會進行其餘相關的同步（會就分享，不會就折騰），旨在提高技能，更好地享受敲鍵盤的快感～

定義

單例模式保證一個類僅有一個實例，並提供一個訪問它的全局訪問點。實現的方法爲先判斷實例存在與否，若是存在則直接返回，若是不存在就建立了再返回，這就保證了一個類只有一個實例對象。

使用場景：一個單一對象。好比：彈窗，不管點擊多少次，彈窗只應該被建立一次。

好比下面的代碼：

class CreateUser {
    constructor(name) {
        this.name = name;
        this.getName();
    }
    getName() {
        return this.name;
    }
}
// 代理實現單例模式
var proxyMode = (function() {
    var instance = null;
    return function(name) {
        if(!instance) {
            instance = new CreateUser(name);
        }
        return instance;
    }
})();

// 測試單例模式
var a = proxyMode('aaa');
var b = proxyMode('bbb');
// 由於單例模式是隻實例化一次，因此下面的實例是相等的
console.log(a === b); // true
// 打印下a,b連個對象的名字，實際上是一個對象的名字
console.log(a.name); // aaa
console.log(b.name); // aaa
複製代碼

上面是講了一些單例模式的原理，下面咱們來用這個模式實現下彈窗功能。

實現一個彈窗

直接show you the code：

<button id="btn1">
    點我建立新窗口
</button>
<button id="hide">
    點我隱藏
</button>
複製代碼

.common-box {
    background: rgb(233, 90, 90);
    width: 100px;
    height: 100px;
    overflow: hidden;
}
複製代碼

const btn1 = document.querySelector('#btn1');
const createWindow = (() => {
    let div = null;
    return (words) => {
        if (!div) {
            div = document.createElement('div');
            div.innerHTML = words || '我是默認的語句';
            div.className = 'common-box';
            div.style.display = 'none';
            document.body.appendChild(div);
        }
        
        return div;
    }
})();   

btn1.addEventListener('click', ()=>{
    let box = createWindow('content');
    box.style.display = 'block';
}, false);

//隱藏
document.querySelector('#hide').addEventListener('click', ()=>{
    document.querySelector('.common-box').style.display = 'none';
}, false);
複製代碼

效果以下：

參考和後話

• juejin.im/post/59df4f…

• www.jianshu.com/p/e1ed20a1a…

更多的內容能夠戳這裏瞭解 逃：）