第四节、JavaScript 设计模式——单例模式

定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

实现一个单例模式。

// 实现单例模式无非是用一个变量来标志当前是否为某个类创建过对象，如果是，则下次获取该类时直接返回之前创建的对象
var Singleton = (name)=>{ this.name = name };
Singleton.prototype.getName = ()=>{ alert(this.name) };

Singleton.getInstance = (function(){
	var instance = null;
	return function( name ){
		if(!instance){
			instance = new Singleton(name);
		}
		return instance;
	}
})(); 

var a = Singleton.getInstance('jane');
var b = Singleton.getInstance('maria');
console.log(a === b) // true

在实际开发中，我们用一个简单的例子来讲一下。
像某些网站，没登陆之前访问某些特定页面时会弹出一个登陆模态框。可能我们浏览网页并不想登陆账户，这个时候如果在一开始就加载这个模态框，会增加 dom 节点，影响页面渲染效率，当我们想登陆的时候，再去加载登陆模态框内容会更好一些。但是还有一个问题，比如点击“用户登陆”提示按钮，出现模态框，点击一次加载一次模态框，显然也不够好。我们希望的是，登陆模态框第一次加载之后，之后再触发登陆时，直接返回之前加载过的模态框。

let getSingle = (fn)=>{
	let result;
	return funciont(){
		return result || (result = fn.apply(this,arguements));
	}
}

let createLogin = ()=>{
	let el = document.createElement('div');
	div.innerHtml = "我是登陆模态框";
	el.style.display = 'none';
	document.body.appendChild(el);
	return el;
}

let createSingleLogin = getSingle(createLogin);
document.getElementById('loginBtn').onClick = function(){
	let loginLayer = createSingleLogin;
	loginLayer.style.display = 'block';
}
//我们可以测试一下，createLogin方法只会调用一次，也是前端优化的一种方式
//这样实现了一个单例模式，使用	getSingle，我们也可以在页面中插入 ifreme 或者 script 等标签