首页

# 什么是单例模式

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

单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的 window 对象等。

在 JS 开发中，单例模式的用途同样非常广泛。比如，当我们单击登录按钮的时候，页面中会出现一个登录浮窗，而这个登录浮窗是唯一的，无论单击多少次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗就适合用单例模式来创建。

# 实现单例模式

要实现一个标准的单例模式并不复杂，无非是用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象。

var Singleton = function(name) {
  this.name = name;
  this.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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

或者：

var Singleton = function(name) {
  this.name = name;
};
Singleton.prototype.getName = function() {
  alert(this.name);
};
Singleton.getInstance = (function() {
  var instance = null;
  return function(name) {
    if (!instance) {
      instance = new Singleton(name);
    }
    return instance;
  };
})();
var a = Singleton.getInstance("sven1");
var b = Singleton.getInstance("sven2");
alert(a === b); // true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

我们通过 Singleton.getInstance 来获取 Singleton 类的唯一对象，这种方式相对简单，但有一个问题，就是增加了这个类的 “不透明性”，Singleton 类的使用者必须知道这是一个单例类。

虽然现在已经完成了一个单例模式的编写，但这段单例模式代码的意义并不大。

# 透明的单例模式

我们的目标是要实现一个 “透明” 的单例类，用户从这个类中创建对象的时候，可以像使用其他任何普通类一样。

在下面的例子中，我们将使用 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

虽然现在完成了一个透明的单例类的编写，但它同样有一些缺点。

为了把 instance 封装起来，我们使用了自执行的匿名函数和闭包，并且让这个匿名函数返回真正的 Singleton 构造方法，这增加了一些程序的复杂度，阅读起来也不是很舒服。

CreateDiv 的构造函数实际上负责了两件事情。第一是创建对象和执行初始化 init 方法，第二是保证只有一个对象。这是一种不好的做法，违背了 “单一职责原则”。

假设我们某天需要利用这个类，在页面中创建千千万万的 div，即要让这个类从单例类变成一个普通的可产生多个实例的类，那我们必须得改写 CreateDiv 构造函数，把控制创建唯一对象的那一段去掉，这种修改会给我们带来不必要的烦恼。

# 用代理实现单例模式

我们可以通过引入代理类的方式，来解决上面的问题。

首先在 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);
};
1
2
3
4
5
6
7
8
9

接下来引入代理类 proxySingletonCreateDiv，并把负责管理单例的逻辑移到了代理类 proxySingletonCreateDiv 中。这样一来，CreateDiv 就变成了一个普通的类，它跟 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); // true
1
2
3
4
5
6
7
8
9
10
11
12

# JavaScript 中的单例模式

前面提到的几种单例模式的实现，更多的是接近传统面向对象语言中的实现，单例对象从 “类” 中创建而来。在以类为中心的语言中，这是很自然的做法。

但 JS 其实是一门无类（class-free）语言，也正因为如此，生搬单例模式的概念并无意义。在 JS 中创建对象的方法非常简单，既然我们只需要一个 “唯一” 的对象，为什么要为它先创建一个 “类” 呢？传统的单例模式实现在 JS 中并不适用。

🔔 单例模式的核心是确保只有一个实例，并提供全局访问。

全局变量不是单例模式，但在 JS 开发中，我们经常会把全局变量当成单例来使用。

但是全局变量存在很多问题，它很容易造成命名空间污染。我们有必要尽量减少全局变量的使用，即使需要，也要把它的污染降到最低。

# 降低全局变量带来的命名污染

可以相对降低全局变量带来的命名污染的方式有以下几种：

📌 1. 使用命名空间

适当地使用命名空间，并不会杜绝全局变量，但可以减少全局变量的数量。

最简单的方法依然是用对象字面量的方式：

var namespace1 = {
  a: function() {
    alert(1);
  },
  b: function() {
    alert(2);
  },
};
1
2
3
4
5
6
7
8

还可以动态地创建命名空间：

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: {}
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

📌 2. 使用闭包封装私有变量

把一些变量封装在闭包的内部，只暴露一些接口跟外界通信：

var user = (function() {
  var __name = "sven",
    __age = 29;
  return {
    getUserInfo: function() {
      return __name + "-" + __age;
    },
  };
})();
1
2
3
4
5
6
7
8
9

使用下划线来约定私有变量 __name 和 __age，它们被封装在闭包产生的作用域中，外部是访问不到这两个变量的，这就避免了对全局的命令污染。

# 惰性单例

🔔 惰性单例指的是在需要的时候才创建对象实例。

惰性单例是单例模式的重点，这种技术在实际开发中非常有用。

实际上前面的 Singleton.getInstance 函数就用到了这种技术，instance 实例对象总是在我们调用 Singleton.getInstance 的时候才被创建，而不是在页面加载好的时候就创建：

Singleton.getInstance = (function() {
  var instance = null;
  return function(name) {
    if (!instance) {
      instance = new Singleton(name);
    }
    return instance;
  };
})();
1
2
3
4
5
6
7
8
9

不过这是基于 “类” 的单例模式，前面说过，基于 “类” 的单例模式在 JavaScript 中并不适用。

下面以 WebQQ 的登录浮窗为例，介绍与全局变量结合实现惰性的单例。

假设我们是 WebQQ 的开发人员，当点击左边导航里 QQ 头像时，会弹出一个登录浮窗，很明显这个浮窗在页面里总是唯一的，不可能出现同时存在两个登录窗口的情况。

第一种解决方案是在页面加载完成的时候便创建好这个 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这种方式有一个问题，也许我们进入 WebQQ 只是玩玩游戏或者看看天气，根本不需要进行登录操作，因为登录浮窗总是一开始就被创建好，那么很有可能将白白浪费一些 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

虽然现在达到了惰性的目的，但失去了单例的效果。当我们每次点击登录按钮的时候，都会创建一个新的登录浮窗 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";
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 通用的惰性单例

虽然我们完成了一个可用的惰性单例，但是它还有如下的问题。

  • 这段代码仍然是违反单一职责原则的，创建对象和管理单例的逻辑都放在 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;
  };
})();
1
2
3
4
5
6
7
8
9
10
11

我们需要把不变的部分隔离出来，先不考虑创建一个 div 和创建一个 iframe 有多少差异，管理单例的逻辑其实是完全可以抽象出来的，这个逻辑始终是一样的：用一个变量来标志是否创建过对象，如果是，则在下次直接返回这个已经创建好的对象：

var obj;
if (!obj) {
  obj = xxx;
}
1
2
3
4

现在我们就把如何管理单例的逻辑从原来的代码中抽离出来，这些逻辑被封装在 getSingle 函数内部，创建对象的方法 fn 被当成参数动态传入 getSingle 函数，再让 getSingle 返回一个新的函数，并且用一个变量 result 来保存 fn 的计算结果。result 变量因为身在闭包中，它永远不会被销毁。在将来的请求中，如果 result 已经被赋值，那么它将返回这个值。

var getSingle = function(fn) {
  var result;
  return function() {
    return result || (result = fn.apply(this, arguments));
  };
};
1
2
3
4
5
6
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";
};
1
2
3
4
5
6
7
8
9
10
11
12

下面再试试创建唯一的 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";
};
1
2
3
4
5
6
7
8
9

在这个例子中，我们把创建实例对象的职责和管理单例的职责分别放置在两个方法里，这两个方法可以独立变化而互不影响，当它们连接在一起的时候，就完成了创建唯一实例对象的功能。

这种单例模式的用途远不止创建对象，比如我们通常渲染完页面中的一个列表之后，接下来要给这个列表绑定 click 事件，如果是通过 ajax 动态往列表里追加数据，在使用事件代理的前提下，click 事件实际上只需要在第一次渲染列表的时候被绑定一次，但是我们不想去判断当前是否是第一次渲染列表，如果借助于 jQuery，我们通常选择给节点绑定 one 事件：

var bindEvent = function() {
  $("div").one("click", function() {
    alert("click");
  });
};
var render = function() {
  console.log("开始渲染列表");
  bindEvent();
};
render();
render();
render();
1
2
3
4
5
6
7
8
9
10
11
12

如果利用 getSingle 函数，也能达到一样的效果。

var bindEvent = getSingle(function() {
  document.getElementById("div1").onclick = function() {
    alert("click");
  };
  return true;
});
var render = function() {
  console.log("开始渲染列表");
  bindEvent();
};
render();
render();
render();
1
2
3
4
5
6
7
8
9
10
11
12
13

可以看到，render 函数和 bindEvent 函数都分别执行了 3 次，但 div 实际上只被绑定了一个事件。

上次更新时间: 2024年03月24日 18:40:39

← 策略模式 →