javascript設計模式學習筆記之單例模式

xiaolinbang 發布于2019-08-23 15:54 / 1103人閱讀

摘要：單例模式單例模式就是保證一個類僅有一個實例并提供一個訪問它的全局訪問點其最大的特點就是永遠只返回一個實例實例通過來獲取類的唯一對象其缺點也明顯增加了類的不透明性透明的單例模式最終會被返回使用代理實現單例模式將負責管理單例的邏輯移到了代理類中

單例模式

單例模式就是保證一個類僅有一個實例, 并提供一個訪問它的全局訪問點.

其最大的特點就是永遠只返回一個實例

    var Singleton = function (name) {
        this.name = name;
        // instance 實例
        this.instance = null;
    };

    Singleton.prototype.getName = function () {
        console.log(this.name);
    };
    
    // 通過queryInstance 來獲取 Singleton 類的唯一對象
    Singleton.queryInstance = function (name) {
        if (!this.instance) {
            this.instance = new Singleton(name)
        }
        return this.instance;
    }

    var a = Singleton.queryInstance("a");
    var b = Singleton.queryInstance("b");
    
    console.log(a);  // {name: "a", instance: null}
    console.log(b);  // {name: "a", instance: null}
    console.log(a === b);  // true

其缺點也明顯, 增加了類的不透明性

透明的單例模式

    var CreateDiv = (function () {
        var instance;
        
        // CreateDiv 最終會被返回
        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("a");
    var b = new CreateDiv("b");

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

使用代理實現單例模式

    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);
    }
    // 將負責管理單例的邏輯移到了代理類中.
    // 這樣CreateDiv 就變成了一個普通的類
    var ProxySingletonCreateDiv = (function () {
        var instance;
        return function (html) {
            if (!instance) {
                instance = new CreateDiv(html);
            }
            return instance;
        }
    })();

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

惰性單例

在需要的時候才創建對象實例

    // 這個函數就是創建一個 通用的惰性單例模式
    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";
    }

云服務器 GPU云服務器設計模式學習筆記單例模式單例模式實現單例模式總結

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

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

優才公開課筆記：php設計模式（一） 之單例模式

摘要：最近開展了三次設計模式的公開課，現在來總結一下設計模式在中的應用，這是第一篇創建型模式之單例模式。不過因為不支持多線程所以不需要考慮這個問題了。最近開展了三次設計模式的公開課，現在來總結一下設計模式在PHP中的應用，這是第一篇創建型模式之單例模式。一、設計模式簡介首先我們來認識一下什么是設計模式：設計模式是一套被反復使用、容易被他人理解的、可靠的代碼設計經驗的總結。設計模式不...

guyan0319 2019-06-27 10:45 評論0 收藏0
JavaScript設計模式之單例模式

摘要：原文博客地址單例模式系統中被唯一使用，一個類只有一個實例。中的單例模式利用閉包實現了私有變量兩者是否相等弱類型，沒有私有方法，使用者還是可以直接一個，也會有方法分割線不是單例最簡單的單例模式，就是對象。原文博客地址：https://finget.github.io/2018/11/06/single/ 單例模式系統中被唯一使用，一個類只有一個實例。實現方法一般是先判斷實例是否存在，...

lk20150415 2019-08-23 13:46 評論0 收藏0
JavaScript設計模式與開發實踐系列之單例模式

摘要：本系列為設計模式與開發實踐作者曾探學習總結，如想深入了解，請支持作者原版單例模式實現單例模式單例模式的定義是保證一個類僅有一個實例，并提供一個訪問它的全局訪問點。本系列為《JavaScript設計模式與開發實踐》（作者：曾探）學習總結，如想深入了解，請支持作者原版單例模式實現單例模式單例模式的定義是：保證一個類僅有一個實例，并提供一個訪問它的全局訪問點。單例模式是一種常用的模式...

Airy 2019-08-19 17:47 評論0 收藏0
javascript設計模式與開發實踐全書深度解析（一）之單例模式

摘要：所以程序在引入文件的時候用了單例模式，一個文件實例化一次，這種做法無疑是好的，但是也容易引起。在我們平時的開發過程中，可以借鑒這兩種方式去緩存變量，節點等。這一章作者講了一個例子，就是在用單例模式生成一個dom節點，還要做到只有訪問的時候才創建，后續訪問直接用前面創建的。那么實際開發中我們會用到這個模式嗎？現在我們基本都是用vue，react，angular開發，不太會直接去操作do...

xioqua 2019-08-26 13:43 評論0 收藏0
每天一個設計模式之單例模式

摘要：博主按每天一個設計模式旨在初步領會設計模式的精髓，目前采用靠這吃飯和純粹喜歡兩種語言實現。單例模式用途如果一個類負責連接數據庫的線程池日志記錄邏輯等等，此時需要單例模式來保證對象不被重復創建，以達到降低開銷的目的。博主按：《每天一個設計模式》旨在初步領會設計模式的精髓，目前采用javascript（_靠這吃飯_）和python（_純粹喜歡_）兩種語言實現。誠然，每種設計模式都有多種實...

yy736044583 2019-07-31 11:16 評論0 收藏0