Javascript設(shè)計(jì)模式（三）單例模式

孫吉亮發(fā)布于2019-08-23 13:01 / 3120人閱讀

摘要：?jiǎn)卫Ｊ降亩x是保證一個(gè)類只有僅有一個(gè)實(shí)例，并提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn)。并且按照單一職責(zé)原則類實(shí)現(xiàn)功能類管理單例管理單例模式，達(dá)到可組合的的效果創(chuàng)建普通類引入代理類惰性單例模式分離創(chuàng)建實(shí)例對(duì)象的職責(zé)與管理單例的職責(zé)。

單例模式的定義是：保證一個(gè)類只有僅有一個(gè)實(shí)例，并提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn)。

單例模式是一種常用的模式，有些對(duì)象我們往往只需要一個(gè)，比如線程池，全局緩存，window對(duì)象。

簡(jiǎn)單單例模式

要實(shí)現(xiàn)一個(gè)單例模式并不復(fù)雜，無(wú)非是用一個(gè)變量來(lái)標(biāo)志當(dāng)前是否已經(jīng)為某個(gè)類創(chuàng)建過(guò)對(duì)象，如果是，則在下一次獲取該類的時(shí)候，直接返回之前創(chuàng)建的對(duì)象。

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

通過(guò)Singleton.getInstance來(lái)獲取Singleton類的唯一對(duì)象，這種方式相對(duì)簡(jiǎn)單，但有問(wèn)題，使用者并不知道這是一個(gè)單例類

用代理實(shí)現(xiàn)的單例模式

我們現(xiàn)在的目標(biāo)是實(shí)現(xiàn)一個(gè)透明的單例類，用戶從這個(gè)類中獲取對(duì)象的時(shí)候，可以像使用其他普通類一樣。并且按照單一職責(zé)原則,createDiv類實(shí)現(xiàn)功能,proxySingletonCreateDiv類管理單例管理單例模式，達(dá)到可組合的的效果

// 創(chuàng)建普通類
var CreateDiv = function(html){
    this.html = html
    this.init()
}

CreateDiv.prototype.init = function() {
    var div = document.createComment("div")
    div.innerHTML = this.html
    document.body.appendChild(div)
}

//引入代理類
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

惰性單例模式

分離創(chuàng)建實(shí)例對(duì)象的職責(zé)與管理單例的職責(zé)。下面用創(chuàng)建一個(gè)登陸框舉例

// 管理單例
var getSingle = function(fn) {
    var result
    return function() {
        return result || (result= fn.apply(this, arguments))
    }
}
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"
}

單例模式是一種簡(jiǎn)單但非常使用的技術(shù)，特別是惰性單例技術(shù)，在合適的時(shí)候才創(chuàng)建對(duì)象，并且至創(chuàng)建唯一的一個(gè)。更奇妙的是，創(chuàng)建對(duì)象和管理單例的職責(zé)被分布在兩個(gè)不同的方法中，這兩個(gè)方法組合起來(lái)才具有單例模式的威力。