JavaScript設計模式----單例模式

selfimpr 發(fā)布于2019-08-21 10:55 / 1533人閱讀

摘要：不符合設計模式中的單一職責的概念。引入代理實現單例模式引入代理實現單例模式的特點我們負責管理單例的邏輯移到了代理類中。的單例模式對比在以上的代碼中實現的單例模式都混入了傳統(tǒng)面向對象語言的特點。

聲明：這個系列為閱讀《JavaScript設計模式與開發(fā)實踐》 ----曾探@著一書的讀書筆記

1.單例模式的特點和定義

保證一個類僅有一個實例，并且提供一個訪問它的全局訪問點。

2.傳統(tǒng)面向對象語言的單例模式 2.1傳統(tǒng)語言描述的單例模式JavaScript實現

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("seven1");
var b = Singleton.getInstance("seven2");

或者使用閉包的形式創(chuàng)建單例模式,同時符合惰性單例的特性

var Singleton = function(name) {
    this.name = name;
};

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

//利用閉包的特性創(chuàng)建單例,同時符合惰性單例的特性
Singleton.getInstance = (function(name) {
    var instance;
    return function(name){
        if (!instance) {
            instance = new Singleton(name);
        }
    }
})();

var a = Singleton.getInstance("seven1");
var b = Singleton.getInstance("seven2");

console.log(a===b);   //true

2.2透明的單例模式：

//反面的單例模式的例子

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("seven1");
var b = new CreateDiv("seven2");

這樣編寫單例模式的缺點：

為了把instance封裝起來，我們使用了自執(zhí)行的匿名函數和閉包，并且讓這個匿名函數返回真正的Singleton構造方法，這增加了一些程序的復雜度。

CreateDiv的構造函數負責了兩件事情。1.創(chuàng)建對像和執(zhí)行初始化init方法，第二是保證只有一個對象。不符合設計模式中的單一職責的概念。

2.3引入代理實現單例模式

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);
}

var ProxySingletonCreateDiv = (function() {
    var instance;
    return function(html) {
        if (!instance) {
            instance = new CreateDiv(html);
        }
        return instance;
    }
})();

var a = new ProxySingletonCreateDiv("seven1");
var b = new ProxySingletonCreateDiv("seven2");

引入代理實現單例模式的特點：

我們負責管理單例的邏輯移到了代理類ProxySingletonCreateDiv中。這樣一來，CreateDiv就變成了一個普通的類，他跟ProxySingletonCreateDiv組合起來可以達到單例模式的效果。

3.JavaScript的單例模式對比

在以上的代碼中實現的單例模式都混入了傳統(tǒng)面向對象語言的特點。而沒有利用JavaScript這們語言的特點來實現一個單例模式。

3.1惰性單例的例子

概念描述：

惰性單例指的是在需要的時候才創(chuàng)建對象的實例。惰性單例是單例模式的重點。

var createLoginLayer=(function(){
    var div;
    return function(){
        if(!div){
            div=document.createElement("div");
            //創(chuàng)建一個登錄框
        }
        return div;
    }
})();

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

代碼解析：
這里的對惰性單例的實現主要是只有單例了網頁上的登錄按鈕，才會去創(chuàng)建，登錄框的dom節(jié)點，并且只是創(chuàng)建一次。

3.2通用的單例模式例子

根據3.1的代碼示例，我們的單例對像，但是并不是通用的，比如我們要創(chuàng)建的不是div而是iframe，那要怎么辦呢？

//獲取單例
var getSingle = function(fn){
    var result;
    return function (){
        return result || (result=fn.apply(this,arguments));
    };
};

//創(chuàng)建div登錄框
var createLoginLayer=function (){
    var div= document.createElement("div");
    div.innerHTML="我是登錄框";
    document.body.appendChild(div);
    return div;
};

//創(chuàng)建iframe的dom節(jié)點
var createIframe=function(){
    //創(chuàng)建irame節(jié)點的代碼
}

var createSingleLoginLayer = getSingle(createLoginLayer);
var createSingleIframe=getSingle(createIframe);

var loginLayer1 = createSingleLoginLayer();
var loginLayer2 = createSingleLoginLayer();

var iframe1=createSingleIframe();
var iframe2=createSingleIframe();

console.log(loginLayer1 === loginLayer2);

通用的單例創(chuàng)建的例子就是通過封裝一個getSingle需要實現單例模式的對象。而且只是會只創(chuàng)建一次。因為使用了閉包的原因通過getSingle創(chuàng)建的result會在內存中一直存在不會銷毀（除非頁面關閉，或者手動釋放）。

總結：

單例模式是一種簡單但非常實用的模式，特別是惰性單例技術，在合適的時候才創(chuàng)建對像，并且只創(chuàng)建唯一的一個。更奇妙的是，創(chuàng)建對象和管理單例的職責被分布在兩個不同的方法中，這兩個方法組合起來才具有單例模式的威力。

云服務器 GPU云服務器單例模式單例模式實現單例模式總結 pdo單例模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86420.html

JavaScript設計模式-第一部分：單例模式、組合模式和外觀模式

摘要：但是，這并不是采用單例的唯一原因。使用命名空間單例模式也被稱為模塊設計模式。函數內部聲明了一些局部函數和或變量。緊隨函數聲明放置即可立即執(zhí)行外部函數，并將所得的對象文字費賠給變量。 JavaScript設計模式-第一部分：單例模式、組合模式和外觀模式設計模式是一些可靠的編程方式，有助于保證代碼更加易于維護、擴展及分離，所有設計模式在創(chuàng)建大型JavaScript應用程序時均不可或缺單...

betacat 2019-08-20 13:38 評論0 收藏0
【JavaScript設計模式】單例模式

摘要：此時我們創(chuàng)建的對象內保存靜態(tài)變量通過取值器訪問，最后將這個對象作為一個單例放在全局空間里面作為靜態(tài)變量單例對象供他人使用。單例模式又被稱為單體模式，是只允許實例化一次的對象類。有時我們也用一個對象來規(guī)劃一個命名空間，井井有條的管理對象上面的屬性和方法。傳統(tǒng)的面向對象語言中單例模式的實現，均是單例對象從類中創(chuàng)建而來，在以類為中心的語言中，這是很常見的做法。如果需要某個對象，就必須先...

zhaot 2019-08-21 18:36 評論0 收藏0
JavaScript 設計模式（一）：單例模式

摘要：停更許久，近期計劃更新設計模式系列。單例模式是創(chuàng)建型設計模式的一種。雖然它不是正規(guī)的單例模式，但不可否認確實具備類單例模式的特點。適用場景單例模式的特點，意圖解決維護一個全局實例對象。停更許久，近期計劃更新：設計模式系列。 showImg(https://segmentfault.com/img/bVbt7uw?w=800&h=600); 單例模式：限制類實例化次數只能一次，一個類只...

xialong 2019-08-23 18:13 評論0 收藏0
JavaScript設計模式與開發(fā)實踐 | 04 - 單例模式

摘要：觀察構造函數的代碼，該構造函數實際上負責了兩件事情第一是創(chuàng)建對象和執(zhí)行初始化方法，第二是保證只有一個對象。惰性單例在實際開發(fā)中非常有用，是單例模式的重點。單例模式單例模式的定義是：保證一個類僅有一個實例，并提供一個訪問它的全局訪問點。單例模式是一種常用的模式，有一些對象我們往往只需要一個，比如線程池、全局緩存、瀏覽器的window對象等。例如，當我們點擊登錄按鈕時，頁面會彈出一...

awkj 2019-08-21 10:48 評論0 收藏0
再遇設計模式之JavaScript篇

摘要：在面向對象的語言中，比如，等，單例模式通常是定義類時將構造函數設為，保證對象不能在外部被出來，同時給類定義一個靜態(tài)的方法，用來獲取或者創(chuàng)建這個唯一的實例。萬事開頭難，作為正經歷菜鳥賽季的前端player，已經忘記第一次告訴自己要寫一些東西出來是多久以的事情了。。。如果，你也和我一樣，那就像我一樣，從現在開始，從看到這篇文章開始，打開電腦，敲下你的第一篇文章（或者任何形式的文字）吧。 ...

Clect 2019-08-20 19:09 評論0 收藏0