JavaScript单例模式
前言
单例模式的定义：保证一个类仅仅有一个实例，并提供一个访问他的全局访问点。
意义：有的时候，一些对象我们仅仅需要一个，比如说线程池、全局缓存、浏览器中的window对象，我们在前端也经常会使用到单例，当我们点击登录按钮的时候，我们会出现一个登录的副创，这个浮窗是唯一的，无论我们点击多少次，这个浮窗仅仅会被创建一次，那么这个button就应该使用单例模式来进行创建。
实现单例模式
什么才叫实现了单例模式呢？就是用一个变量来标志是否已经为某个类创建过对象，如果是的话，在下一次获取该类的实例的时候，返回之前创建的对象。
方案一实现单例：
var Singleton = function (name) {
this.name = name;
this.instance = null;
}
Singleton.prototype.getName = function (){
console.log(this.name);
}
Singleton.getInstance = function (name){
if(!this.instance){
this.instance = new Singleton(name);
}
return this.instance;
}
var a = Singleton.getInstance('kim');
var b = Singleton.getInstance('Queen');
console.log(a === b); // true
方案二实现单例：
var Singleton = function (name) {
this.name = name;
};
Singleton.prototype.getName = function (){
console.log(this.name);
};
Singleton.getInstance = function (name){
var instance = null;
return function (name){
if(!instance){
instance = new Singleton(name);
}
return instance;
}
}
我们使用Singleton.getInstance获取Singleton唯一的对象，这样的话，的确理解起来比较简单，但是增加了这个类的‘不透明性’，使用这个类的人必须知道这是一个单例类，和之前使用new来获取对象的方式是不一样的，这里要通过Singleton.getInstance 这个方法来获取对象。
这一节我们讲的是最简单的单例方法，但是这样的单例我们几乎用不到的，接下来我们会对单例模式的编码进行改进。
透明的单例模式
我们现在的目标是实现一个‘透明’的单例类，用户可以从这个类中创建对象的时候，我们可以和使用其他类一样，我们使用CreatrDiv单例类，作用是在页面中创建唯一的div节点。
var CreateDiv =(function (){
var instance;
var CreateDiv = function(html){
if(instance){
return instance;
}
this.html = html;
this.init();
return instance = this;
} ;
CreateDiv.prototype.init = function(){
var div = document.createElement('div');
div.innerHTML = this.html;
document.body.appendChild( div );
};
return CreateDiv;
})();
var a = new CreateDiv('kim');
var b = new CreateDiv('Queen');
console.log( a === b); // true
我们在执行的时候做了什么呢？我们为了将instance封装起来，我们使用了一些自执行的匿名函数和闭包，并且让这个匿名函数返回真正的Singleton构造方法。我们观察一下Singleton的构造函数。
var CreateDiv = function(html){
if(instance){
return instance;
}
this.html = html;
this.init();
return instance = this;
} ;
在这段代码中CreateDiv负责了两件事情，意思创建对象和执行初始化init的方法，第二件事情是保障只有一个对象，但是现在的代码看起来很诡异，如果有一天我们需要用这个方法来创建很多怎样的div，那么我们就必须改写现在的代码，把控制唯一对象的那部分代码删掉，这样做并不友好。
使用代理实现单例模式
我们对上面的代码进行废物利用，假如我们把负责单例的部分去掉了，那么现在它就会成为一个普通的创建div的类，看一下代码：
var CreateDiv = function(html){
this.html = html;
this.init();
} ;
CreateDiv.prototype.init = function(){
var div = document.createElement('div');
div.innerHTML = this.html;
document.body.appendChild( div );
};
然后我们通过引入一个代理类proxySingletonCreateDiv:
var proxySingletonCreateDiv = (function(){
var instance;
return function ( html ){
if(!instance){
instance new CreateDiv(html);
}
return instance;
}
})();
var a = new proxySingletonCreateDiv('kim');
var b = new proxySingletonCreateDiv('Queen');
我们引入代理类的方式，我们同样完成了单例模式的编写，和之前不一样，我们没有把单例的逻辑放在CreateDiv里面，而是将这部分的逻辑放在了代理类proxySingletonCreateDiv中，这样的话，CreateDiv就变成了一个普通类，但是在和代理类组合在一起的时候就可以实现单例模式了。
JavaScript中的单例模式
我们之前在提单例模式的时候，更多的倾向于面向对象的传统语言方面，因为单例模式本来就是从‘类’中创建出来的，但是我们的JavaScript是一个无类的怨言，因此不能生搬硬靠，但是在JavaScript创建对象的方法是非常简单的，我们需要一个‘唯一’的对象的话，不一定非要创建一个‘类’，因为单例模式的核心是：确保只有一个实例，并且提供全局访问。
对于我们来说，全局变量并不是单例模式，但是在js开发中，我们经常把全局对象当做单例来使用
var a = {};
如果a变量中在全局中被声明，我们可以在代码的任何地方来访问这个变量，全局变量提供全局访问是理所当然的，这样就满足了单例模式的两个条件。
但是我们并不赞成这样使用全局变量，因为它很容易造成命名空间的污染，而且JavaScript中的变量很容易被不下心的覆盖掉，所以我们应该尽量减少全局变量的使用。那我们应该怎么办？
使用命名空间
使用命名空间，并不能杜绝全局变量，但是可以减少全局变量的数量。
最简单的放大是使用对象字面量的方式：
var namespace1 = {
a:function(){
console.log(1);
},
b:function(){
console.log(2);
}
};
把a和b都定义为namespace1的属性，减少了变量和全局作用域打交道的几乎，还有，我们也可以动态的程序创建命名空间
var MyApp ={};
MyApp.namespace = function ( name ){
var parts = name.split('.');
var current = MyApp;
for(var i in parts){
if(!current[parts[i]]){
current[parts[i]] ={};
}
current = current[parts[i]];
}
};
MyApp.namespace('kim');
MyApp.namespace('dom.style');
console.log(MyApp)
//上面的代码等价于
var MyApp ={
kim:{},
dom:{
style:{}
}
}
使用闭包来封装私有变量
这个方法是将一些变量封装在闭包的内部，只暴露一些对外的接口。
var user = (function(){
var _name = 'kim';
var _age=18;
return{
getUserInfo:function(){
return _name+'-'+_age;
}
}
})();
ps:我们在JavaScript用下划线来约定私有变量_name 和_age
惰性单例
惰性单例：我们在需要的时候才创建对象实例，其实惰性单例才是单例模式的重点，我们在上面的第一个例子中就已经闪现了惰性加载。其中instance实例对象总是在我们调用Singleton.getInstance的时候才会被创建，而不是在页面加载的时候就会被调用。
Singleton.getInstance = (function (name){
var instance = null;
return function (name){
if(!instance){
instance = new Singleton(name);
}
return instance;
}
})();
让我们现在假设有一个登录的浮窗，在页面中这个浮窗是唯一的，第一种解决方案是在页面加载完成的时候变创建好这个div浮窗，但是这个浮窗的初始状态是隐藏的，当用户点击登录按钮的时候，这个浮窗才会被显示。
<html>
<body>
<button id ='loginBtn'>登录</button>
</body>
<script>
var loginLayer =(function(){
var div = document.createElement('div');
div.innerHTML = '我是登录浮窗';
div.style.display = 'none';
document.body.appendChild(div);
return div;
})();
document.getElementById('loginBtn').onclick = function(){
loginLayer.style.display = 'block';
}
</script>
</html>
但是这样也会有一定的问题，如果我们一直没有点击这个节点，但是这个DOM在页面加载的时候就已经被创建了，造成了不必要的浪费。那我们修改与一下下面的代码。只有在点击按钮的时候，才会创建浮窗节点。
<html>
<body>
<button id ='loginBtn'>登录</button>
</body>
<script>
var createLoginLayer = function(){
var div = document.createElement('div');
div.innerHTML = '我是登录浮窗';
div.style.display = 'none';
document.body.appendChild(div);
return div;
};
document.getElementById('loginBtn').onclick = function(){
var loginLayer = createLoginLayer ();
loginLayer.style.display = 'block';
}
</script>
</html>
上面的方法虽然实现了惰性的目的，但是却失去了单例的效果。当我们每一次点击登录按钮的时候，都会创建一个新的登录浮框div，然后按照逻辑，我们每一次点击删除按钮的时候，我们就会将这个节点进行删除，（这里没有实现对删除的按钮的操作），但是像这样的进行增加和删除节点的操作是不合理的，也不是必要的。那么我们怎么能实现单例呢？我们可以增加一个变量来判断我们是否已经创建过登录浮窗。
var createLoginLayer = (function(){
var div;
return function(){
if(!div){
var div = document.createElement('div');
div.innerHTML = '我是登录浮窗';
div.style.display = 'none';
document.body.appendChild(div);
}
return div;
}
})();
通用的惰性单例
上面我们写了一个简单的惰性单例，但是我们发现它还是存在一些问题：
- 这段代码违反了单一职责原则，创建对象和管理单例的逻辑都放在了
createLoginLayer对象内部。 - 如果我们下次需要创建页面唯一的
iframe，或是script标签，用来跨域请求数据，就几乎要把createLoginLayer几乎是重新写一遍。
这样的结果并不是我们想要的，所以我们需要把不变的地方隔离出来，先不考虑建立一个div或是一个iframe有多少的差异，管理单例的逻辑是完全可以被抽取出来的，这个逻辑始终是不变的：用一个变量来标识是否创建过这个对象，如果是下次就直接返回这个创建好的对象。
var obj;
if(!obj){
obj = XXX;
}
现在我们的操作是将单例的逻辑从原来到代码中抽取出来，这些逻辑被封装在getSingle函数的内部，创建对象的方法fn被当成参数传入getSingle函数。
var getSingle = function( fn ){
var result ;
return function(){
return result || (result = fn.apply(this, arguments));
}
};
接下来的重做就是用于创建登录浮窗的方法用参数fn的形式传入到getSingle ，我们不仅可以传入createLoginLayer，还可以传入createScript等。之后再用getSingle 返回一个新的函数，并且用一个变量result来保存fn的计算结果。result变量因为就在闭包中，所以resule永远都不会被销毁。，在以后的请求中，如果result已经被赋值，那么就会返回这个值。
var createLoginLayer = function(){
var div = document.createElement('div');
div.innerHTML = '我是登录浮窗';
div.style.display = 'none';
document.body.appendChild(div);
return div;
};
var createSingleLoginLayer = getSingle(createLoginLayer );
document.getElementById('loginBtn').onclick = function(){
var loginLayer = createLoginLayer ();
loginLayer.style.display = 'block';
}
那么下面我们创建一个唯一的iframe用来加载第三方的页面。
var createSingleIframe = getSingle(function(){
var iframe = document.createElement('iframe ');
document.body.appendChild(iframe );
return iframe ;
});
document.getElementById('loginBtn').onclick = function(){
var loginLayer = createSingleIframe ();
loginLayer.src= 'www.baidu.com';
}
在上面的例子里面，我们把创建实例对象的职责和管理单例职责分别放在了两个方法中，这两个方法可以相互独立互不影响，当他们链接到一起的时候，就完成了创建唯一实例对象的功能。
这样的单例模式远远不仅仅是创建对象这么简单，我们渲染完一个页面的列表之后，接下来就是给这个列表绑定click事件，如果是通过ajax向列表中追加数据，在使用事件代理的前提下，click事件实际上只要在第一次渲染列表的时候被绑定依稀，但是我们不想去判断当前是否是第一次渲染列表，如果借助jquery，我们通向选择给节点绑定one事件。
var bindEvent = function(){
$('div').one('click', funvtion(){
console.log('click');
});
};
var render = function(){
console.log('开始渲染')；
bindEvent();
}
render();
render();
render();
如果使用getSingle函数，也可以达到一样的效果：
var bindEvent = getSingle(function(){
document.getElementById('div1').onclick = function(){
console.log('click');
}
return true;
});
var render = function(){
console.log('开始渲染')；
bindEvent();
}
render();
render();
render();
render和bindEvent分別执行了三次，但是div实际上自卑绑定了一个事件。
