javascript实现单例模式

什么是单例模式，应用场景是什么

在实际开发过程中我们可能会不经意间用到单例模式，只是不知道它的名字而已。比如我们要实现一个登录框，不可能每次点登录按钮都去新建一个登录窗口，这个登录窗口就应该是唯一的。

原始的单例模式实现方法

下面我们来用具体代码来实现一下

const getLoginWindow = (function() {
			let loginWindow = null;
			return function(){
				if (loginWindow) {
					return loginWindow;
				}
				loginWindow = document.createElement('div');
				loginWindow.innerHTML = '我是登录窗口';
				return loginWindow;
			}
    })();
    document.getElementById('loginBtn').onclick = function(){
     	const w1 = getLoginWindow();
		const w2 = getLoginWindow();
		console.log(w1 === w2); // true
    }

现在这个单例模式基本可以用了，但是存在一个问题，如果我想创建一个弹出框的单例模式又要重写一遍代码，又或者你想创建的是个p标签或者对象什么的而不是div，这个方法就没法使用了。下面我们来改进下这个代码让它变得更通用。

通用的单例模式

const getSingleton = function(fn){
			let result;
			return function(){
				if(result) return result;
				result = fn.apply(this, arguments)
				return result;
			}
		};
    const createWindow = function(html) {
			let loginWindow = document.createElement('div');
			loginWindow.innerHTML = html;
			document.body.appendChild(loginWindow);
			return loginWindow;
    };
		const loginWindow = getSingleton(createWindow);
    document.getElementById('loginBtn').onclick = function(){
			 const w1 = loginWindow('login1');
			 const w2 = loginWindow('login2');
			console.log(w1.innerHTML === w2.innerHTML); // true
    }

这里我们将实现单例的方法抽象了出来，而实现创建登录窗口的方法独立于单例方法之外，通过传参的形式可以传入你想实现的需求，无论是创建登录窗口还是弹窗。这样既符合开发的单一职责原则，同时将具体业务逻辑和创建单例模式的方法进行解耦，增强了可复用性使代码更易维护。喜欢的小伙伴给个赞吧！！！