JavaScript設(shè)計(jì)模式----單例模式

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

摘要：不符合設(shè)計(jì)模式中的單一職責(zé)的概念。引入代理實(shí)現(xiàn)單例模式引入代理實(shí)現(xiàn)單例模式的特點(diǎn)我們負(fù)責(zé)管理單例的邏輯移到了代理類中。的單例模式對(duì)比在以上的代碼中實(shí)現(xiàn)的單例模式都混入了傳統(tǒng)面向?qū)ο笳Z(yǔ)言的特點(diǎn)。

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

1.單例模式的特點(diǎn)和定義

保證一個(gè)類僅有一個(gè)實(shí)例，并且提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn)。

2.傳統(tǒng)面向?qū)ο笳Z(yǔ)言的單例模式 2.1傳統(tǒng)語(yǔ)言描述的單例模式JavaScript實(shí)現(xiàn)

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)建單例模式,同時(shí)符合惰性單例的特性

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

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

//利用閉包的特性創(chuàng)建單例,同時(shí)符合惰性單例的特性
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");

這樣編寫(xiě)單例模式的缺點(diǎn)：

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

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

2.3引入代理實(shí)現(xiàn)單例模式

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

引入代理實(shí)現(xiàn)單例模式的特點(diǎn)：

我們負(fù)責(zé)管理單例的邏輯移到了代理類ProxySingletonCreateDiv中。這樣一來(lái)，CreateDiv就變成了一個(gè)普通的類，他跟ProxySingletonCreateDiv組合起來(lái)可以達(dá)到單例模式的效果。

3.JavaScript的單例模式對(duì)比

在以上的代碼中實(shí)現(xiàn)的單例模式都混入了傳統(tǒng)面向?qū)ο笳Z(yǔ)言的特點(diǎn)。而沒(méi)有利用JavaScript這們語(yǔ)言的特點(diǎn)來(lái)實(shí)現(xiàn)一個(gè)單例模式。

3.1惰性單例的例子

概念描述：

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

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

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

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

3.2通用的單例模式例子

根據(jù)3.1的代碼示例，我們的單例對(duì)像，但是并不是通用的，比如我們要?jiǎng)?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é)點(diǎn)
var createIframe=function(){
    //創(chuàng)建irame節(jié)點(diǎn)的代碼
}

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)建的例子就是通過(guò)封裝一個(gè)getSingle需要實(shí)現(xiàn)單例模式的對(duì)象。而且只是會(huì)只創(chuàng)建一次。因?yàn)槭褂昧?strong>閉包的原因通過(guò)getSingle創(chuàng)建的result會(huì)在內(nèi)存中一直存在不會(huì)銷(xiāo)毀（除非頁(yè)面關(guān)閉，或者手動(dòng)釋放）。

總結(jié)：

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

GPU云服務(wù)器云服務(wù)器單例模式單例模式實(shí)現(xiàn) 單例模式總結(jié) pdo單例模式

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/86420.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

selfimpr

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

游戲開(kāi)發(fā)商如何租用合適穩(wěn)定的游戲服務(wù)器？

閱讀 2766·2021-11-22 13:54
“云”上醫(yī)療｜云計(jì)算加速醫(yī)療數(shù)字化轉(zhuǎn)型升級(jí)_云資訊

閱讀 2704·2021-10-14 09:42
華納云(hncloud)，中國(guó)香港/美國(guó)云服務(wù)器，低至3折，384元/年起，OpenStack+CN

閱讀 4053·2021-09-28 09:47
django框架之sass項(xiàng)目中用到的工具 (1)

閱讀 2174·2021-09-03 10:28
青果網(wǎng)絡(luò)-618阿里云，騰訊云特惠優(yōu)惠折上折！

閱讀 1217·2021-07-26 23:38
CSS魔法堂：display:none與visibility:hidden的恩怨情仇

閱讀 2568·2019-08-30 15:54
JavaScript面向?qū)ο蟪醪秸J(rèn)識(shí)

閱讀 2649·2019-08-29 16:35
618購(gòu)物節(jié)來(lái)襲，電商陪你浪浪浪

閱讀 1438·2019-08-29 15:42

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript設(shè)計(jì)模式----單例模式

相關(guān)文章

*JavaScript**設(shè)計(jì)*模式-第一部分：單例模式、組合模式和外觀模式