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

1,847 阅读1分钟

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

效果如下:

singleton

参考和后话

更多的内容可以戳这里了解 逃:)