前端仔学学设计模式--单例模式

设计模式知识提取将分为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…

更多的内容能够戳这里了解 逃：）