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

实现单例模式

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

  1. var Singleton = function (name) {
  2.   this.name = name
  3.   this.instance = null
  4. }
  6. Singleton.prototype.getName = function () {
  7.   console.log(this.name)
  8. }
  10. Singleton.getInstance = function (name) {
  11.   if (!this.instance) {
  12.     this.instance = new Singleton(name)
  13.   }
  14.   return this.instance
  15. }
  17. var a = Singleton.getInstance('sven1')
  18. var b = Singleton.getInstance('sven1')
  20. console.log(a === b) // true

or

  1. var Singleton = function (name) {
  2.   this.name = name
  3. }
  5. Singleton.prototype.getName = function () {
  6.   console.log(this.name)
  7. }
  9. Singleton.getInstance = (function () {
  10.   var instance = null
  11.   return function (name) {
  12.     if (!instance) {
  13.       instance = new Singleton(name)
  14.     }
  15.     return instance
  16.   }
  17. })()

透明的单例模式

我们现在的目标是实现一个“透明”的单例类，用户从这个类中创建对象的时候，可以像使 用其他任何普通类一样。在下面的例子中，我们将使用 CreateDiv 单例类，它的作用是负责在页 面中创建唯一的 div 节点，代码如下:

  1. var CreateDiv = (function () {
  2.   var instance
  3.   var CreateDiv = function (html) {
  4.     if (instance) {
  5.       return instance
  6.     }
  7.     this.html = html
  8.     this.init()
  9.     return (instance = this)
  10.   }
  12.   CreateDiv.prototype.init = function () {
  13.     var div = document.createElement('div')
  14.     div.innerHTML = this.html
  15.     document.body.appendChild(div)
  16.   }
  17.   return CreateDiv
  18. })()
  20. var a = new CreateDiv('sven1')
  21. var b = new CreateDiv('sven2')
  23. console.log(a === b)

用代理实现单例模式

  1. var CreateDiv = function (html) {
  2.   this.html = html
  3.   this.init()
  4. }
  6. CreateDiv.prototype.init = function () {
  7.   var div = document.createElement('div')
  8.   div.innerHTML = this.html
  9.   document.body.appendChild(div)
  10. }
  12. // 接下来引入代理类ProxySingletonCreateDiv
  14. var ProxySingletonCreateDiv = (function () {
  15.   var instance
  16.   return function (html) {
  17.     if (!instance) {
  18.       instance = new CreateDiv(html)
  19.     }
  20.     return instance
  21.   }
  22. })()
  24. var a = new ProxySingletonCreteDiv('sven1')
  25. var b = new ProxySingletonCreteDiv('sven1')
  27. console.log(a === b)

通过引入代理类的方式，我们同样完成了一个单例模式的编写，跟之前不同的是，现在我们 把负责管理单例的逻辑移到了代理类 proxySingletonCreateDiv 中。这样一来，CreateDiv 就变成了 一个普通的类，它跟 proxySingletonCreateDiv 组合起来可以达到单例模式的效果。

JavaScript中的单利模式

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

    使用命名中间

    把 a 和 b 都定义为 namespace1 的属性，这样可以减少变量和全局作用域打交道的机会

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

  • 我们还可以动态地创建命名空间 ```javascript 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. <a name="QJRjq"></a>
  2. #### 使用闭包封装私有变量
  3. ```javascript
  4. var user = (function () {
  5.   var __name = 'sven'
  6.   var __age = 29
  7.   return {
  8.     getUserInfo: function () {
  9.       return __name + '-' + __age
  10.     },
  11.   }
  12. })()

惰性单例模式

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

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

    登录浮窗的单例实现

  • 我们登录网页qq的时候，需要登录，此时的登录应当只有一个

  • 当我们点击的时候，才会弹出来（不点击的时候，压根就不创建） ```javascript var createLoginLayer = (function () { var div return function () { if (!div) {
    1. div = document.createElement('div')
    2. div.innerHTML = '我是登录浮窗'
    3. div.style.display = 'none'
    4. document.body.appendChild(div)
    } return div } })()

document.getElementById(‘loginBtn’).onclick = function () { var loginLayer = createLoginLayer() loginLayer.style.display = ‘block’ }

  1. <a name="j6RoB"></a>
  2. #### 通用的惰性单例
  3. ```javascript
  5. var getSingle = function (fn) {
  6.   var result
  7.   return function () {
  8.     return result || (result = fn.apply(this.arguments))
  9.   }
  10. }
  1. var createLoginLayer = function () {
  2.   var div = document.createElement('div')
  3.   div.innerHTML = '我是登录浮窗'
  4.   div.style.display = 'none'
  5.   document.body.appendChild(div)
  6.   return div
  7. }
  8. var createSingleLoginLayer = getSingle(createLoginLayer)
  9. document.getElementById('loginBtn').onclick = function () {
  10.   var loginLayer = createSingleLoginLayer()
  11.   loginLayer.style.display = 'block'
  12. }