js设计模式——单例模式
什么是单例模式
保证一个类仅有一个实例，并提供一个访问它的全局访问点。
实现单例模式需要有一个变量标记是否已经创建过实例。如果已经创建过实例，就返回之前创建的实例。没有，则返回新建的实例。
实现方法可以考虑闭包，高阶函数等。
需要注意单一变量原则：一个类只关注一种职责。
javascript的单例模式
javascript是一门无类型语言，所以我们只需要一个唯一的对象，无需创造出一个类。
var
var全局变量符合确保只有一个实例，并提供了全局访问。所以全局变量不是单例模式，但是我们可以将全局变量当做单例来使用。
但是全局变量的大量使用容易造成命名空间的污染，不利于多人开发。我们可以通过全局对象创建命名空间和使用闭包来缓解问题。
惰性单例
惰性单例是指在需要的时候偶才创建对象实例。减少节点的浪费。比如WebQQ 的登录浮窗，我们只有在点击登录的时候使用。如果在页面加载的时候就创建浮窗，那么当我们只是想在webQQ页面看看天气，不会进行登录，那么久就白白浪费了一个DOM节点。
<!DOCTYPE html>
<html>
<head>
<title>设计模式测试</title>
<script type="text/javascript" src="./单例模式.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div class="box">
<button id='btn'>登录</button>
</div>
</body>
<script type="text/javascript">
var createDiv=(function() {
var div=null;
return function(){
if(!div){
div=document.createElement('div');
div.innerHTML='登录浮框';
div.style.display = 'none';
document.body.appendChild(div);
}
return div;
}
})();
document.getElementById('btn').onclick=function(){
var login=createDiv();
login.style.display='block';
}
</script>
</html>
考虑单一职责原则
<!DOCTYPE html>
<html>
<head>
<title>设计模式测试</title>
<script type="text/javascript" src="./单例模式.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div class="box">
<button id='btn'>登录</button>
</div>
</body>
<script type="text/javascript">
var createDiv=function(){
var div=document.createElement('div');
div.innerHTML='登录浮框1';
div.style.display = 'none';
document.body.appendChild(div);
return div;
}
var getSingle=function(fn){
var element;
return function(){
return element||(element=fn.apply(this,arguments));
}
}
var createSingleDiv=getSingle(createDiv);
document.getElementById('btn').onclick=function(){
var login=createSingleDiv();
login.style.display='block';
}
</script>
</html>
