在设计模式中单例模式的实现方式（前端仔学学设计模式--单例模式）

本文同步本人掘金平台的文章：https://juejin.cn/post/6844903880929574919

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

效果如下：

,