js单例模式

JS单例模式解析

最新推荐文章于 2022-01-09 13:23:01 发布

原创最新推荐文章于 2022-01-09 13:23:01 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

js设计模式专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了JavaScript中的单例模式实现方式，包括最简单的单例模式、通过new关键字创建单例对象的方法、使用代理实现单例，以及如何用单例模式在页面中创建唯一元素。同时，还介绍了一种通用的单例模式，适用于不同类型的对象创建。

js设计模式之单例模式

最简单的单例模式

var Singleton = function (name) {
        this.name = name
        instance = null
    }

    Singleton.prototype.getName = function () {
        return this.name
    }

    Singleton.getInstance = function (name) {
        if(!this.instance){
            this.instance = new Singleton(name)
        }
        return this.instance
    }

    var a = Singleton.getInstance("a") 
    var b = Singleton.getInstance("b")
    console.log(a === b) // true
    console.log(a.getName()) // a
    console.log(b.getName()) // b
> 这里是一个最简单的单例模式的例子，但是我们并不能用new进行对象创建，而是依赖于Singleto对象的getInstance方法，下面我们需要实现通过new进行创建。

#### new关键字创建单例对象
需要把对象，getInstance封装，返回构造函数
``` javascript
var Singleton = (function (name) {
       var instance

        var Obj = function (name) {
            this.name = name
        }

        Obj.prototype.getName = function(){
           return this.name
        }

       var CreateSin = function (name) {
           if(!instance){
               instance = new Obj(name)
           }
           return instance
       }

       return CreateSin
    })(name)

    var a = new Singleton('a')
    var b = new Singleton('b')
    console.log(a === b)  // true
    console.log(a.getName()) // a
    console.log(b.getName()) // a
> 上面的代码可能有点难懂，但是可以看到，我们的目的是封装，这里使用了一个匿名执行函数来返回一个构造函数。在匿名函数中，我们创建了一个叫做Obj的构造函数，用于构建具体的对象，使用instance来记录到底有没有创建过对象，用匿名函数进行传参数，最后返回构造函数





<div class="se-preview-section-delimiter"></div>

##### 使用代理来实现
以上的代码看起来我们是为了封装而封装，其实可以摆脱给另外一个类来做




<div class="se-preview-section-delimiter"></div>

``` javascript
var Singleton = function (name) {
        this.name = name
    }

    Singleton.prototype.getName = function () {
        return this.name
    }

    var Proxy = (function () {
        var instance
        return function (name) {
            if(!instance){
                instance = new Singleton(name)
            }
            return instance
        }

    })()

    var a = new Proxy('a')
    var b = new Proxy('b')
    console.log(a === b)
    console.log(a.getName())
    console.log()

#### 用单例实现页面创建div

var CreateDiv = (function () {
  var div
  return function (content) {
    if(!div){
      div = document.createElement('div')
      div.innerHTML = content
      document.body.appendChild(div)
    }
    return div
  }
})()

var div = new CreateDiv('div')
var div1 = new CreateDiv('div1')

以上代码会在一个页面创建一个唯一一个div。

#### 通用单例
上面的代码会带来一个问题就是，如果我再另一个页面唯一创建一个a标签，我们就得把这种代码copy一份，解决方法是有一个通用的单例
“`
createDiv = function () {
div = document.createElement(‘div’)
div.innerHTML = ‘xx’
document.body.appendChild(div)
}

var CreateEl = (function () {
  var el
  return function (fn) {
    return el || (div = fn.apply(this))
  }
})()

var div = new CreateEl(createDiv)

下次如果说要创建一个唯一的a，就传如createA这中类型的函数。这里运用到了高阶函数的只是