1. 定义
单例模式的定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。
单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的window对象等。
2. 实现单例模式
要实现一个标准的单例模式并不复杂，无非是用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象。
var Singleton = function(name) {
this.name = name;
}
Singleton.instance = null;
Singleton.prototype.getName = function() {
alert(this.name)
}
Singleton.getInstance = function(name) {
if(!this.instance) {
this.instance = new Singleton(name);
}
return this.instance
}
var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
alert(a===b); // true
// 或者
var Singleton = function(name) {
this.name = name;
};
Singleton.prototype.getName = function() {
alert(this.name)
}
Singleton.getInstance = (function(name) {
var instance = null;
return function(name){
if(!instance) {
instance = new Singleton(name);
}
return instance;
}
})();
复制代码通过 Singleton.getInstance 来获取Singleton类的唯一对象，这种方式相对简单，但有一个问题，就是增加了这个类的“不透明性”，Singleton类的使用者必须知道这是一个单例类，跟以往通过new XXX的方式来获取对象不同，这里要使用 Singleton.getInstance 来获取对象。
var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
alert(a === b); // true
复制代码虽然以上的代码是一个单例模式的编写，但这段单例模式代码的意义并不大。需要编写出更好的单例模式。
3.透明的单例模式
用户从这个类中创建对象的时候，可以像使用其他任何普通类一样。举个例子：使用CreateDiv单例类，它的作用是负责在页面中创建唯一的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('sven1');
var b = new CreateDiv('sven2');
alert(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, 即要让这个类从单例类变成一个普通的可生产多个实例的类，那我们必须得改写CreateDiv构造函数，把控制创建唯一对象的那一段去掉，这种修改会给我们带来不必要的烦恼。
4. 用代理实现单例模式
引入代理类的方式，来解决上面提到的问题。
在 CreateDiv 构造函数中，把负责管理单例的代码移除出去，使它成为一个普通的创建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('sven1');
var b = new ProxySingletonCreateDiv('sven2');
alert(a === b);
复制代码通过引入代理类的模式，同样完成了一个单例模式的编写，跟之前不同的是，现在我们把负责管理单例的逻辑移到了代理类 ProxySingletonCreateDiv 中。这样一来，CreateDiv 就变成了一个普通的类，它跟 ProxySingletonCreateDiv 组合起来可以达到单例模式的效果。（采用了“缓存代理”）
5 JavaScript中的单例模式
前面提到的几种单例模式的实现，更多的是接近传统面向对象语言中的实现，单例对象从“类”中创建而来。在以类为中心的语言中，这是很自然的做法。比如在Java中，如果需要某个对象，就必须先定义一个类，对象总是从类中创建而来的。
但JavaScript是一门无类语言，生搬单例模式的概念并无意义。在JavaScript中创建对象的方法非常简单，既然我们只需要一个“唯一”的对象，为什么要为它先创建一个“类”呢？
单例模式的核心是确保只有一个实例，并提供全局访问。
全局变量不是单例模式，但在JavaScript开发中，经常会把全局变量当成单例来使用。
例如：
var a = {}
复制代码当用这种方式创建对象a时，对象a确实是独一无二的。如果a变量被声明在全局作用域下，则我们可以在代码中的任何位置使用这个变量，全局变量提供给全局访问是理所当然的。这样就满足了单例模式的两个条件。
但是全局变量存在很多问题，它很容易造成命名空间污染。在大中型项目中，如果不加以限制和管理，程序中可能存在很多这样的变量。JavaScript中的变量也很容易被不小心覆盖。
有必要尽量减少全局变量的使用，即使需要，也要把它的污染降到最低。以下几种方式可以相对降低全局变量带来的命名污染。
5.1 使用命名空间
适当地使用命名空间，并不会杜绝全局变量，但可以减少全局变量的数量。
最简单的方法依然是用对象字面量的方式：
var namespace1 = {
a: function(){
alert(1)
},
b: function(){
alert(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('event')
MyApp.namespace('dom.style')
console.dir(MyApp);
// 上述代码等价于：
var MyApp = {
event: {},
dom: {
style: {}
}
}
复制代码5.2 使用闭包封装私有变量
把一些变量封装在闭包的内部，只暴露一些接口跟外界通信：
var user = (function(){
var __name = 'sven',
__age = 27;
return {
getUserInfo: function(){
return __name + '-' + __age;
}
}
})();
复制代码私有变量__name和__age,被封装在闭包产生的作用域中，外部是访问不到这两个变量的，这就避免了对全局的命令污染。
6. 惰性单例
惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点。前面的instance实例对象总是在我们调用Singleton.getInstance的时候才被创建，而不是在页面加载好的时候就创建。
Singleton.getInstance = (function(name) {
var instance = null;
return function(name){
if(!instance) {
instance = new Singleton(name);
}
return instance;
}
})();
复制代码不过这是基于“类”的单例模式，基于“类”的单例模式在JavaScript中并不适用，下面以登录浮窗为例，介绍与全局变量结合实现惰性的单例。
登录浮窗在页面里总是唯一的，不可能出现同时存在两个登录窗口的情况。
第一种解决方案是在页面加载完成的时候便创建好这个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) {
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';
}
复制代码7. 通用的惰性单例
上面我们完成了一个可用的惰性单例，但是存在一些问题。
- 代码仍然是违反单一职责原则的，创建对象和管理单例的逻辑都放在 createLoginLayer 对象内部。
- 如果我们下次需要创建页面中唯一的iframe,或者script标签，就必须把 createLoginLayer 函数几乎照抄一遍：
var createIframe = (function(){
var iframe;
return function(){
if (!iframe) {
iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
return 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、createIframe、createXhr等。之后再让getSingle返回一个新的函数，并且用一个变量result来保存fn的计算结果。result变量因为身在闭包中，不会被销毁。在将来的请求中，如果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 = createSingleLoginLayer();
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 = 'http://baidu.com';
}
复制代码在这个例子中，我们把创建实例对象的职责和管理单例的职责分别放在两个方法里，这两个方法可以独立变化而互不影响，当它们连接在一起的时候，就完成了创建唯一实例对象的功能。
总结: 在getSingle函数中，实际上也提到了闭包和高阶函数的概念。单例模式是一种简单而非常实用的模式，特别是惰性单例技术，在合适的时候才创建对象，并且只创建唯一的一个。创建对象和管理单例的职责被分布在两个不同的方法中，这两个方法组合起来才具有单例模式的魅力。
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
