JavaScript設計模式學習—單例模式

TerryCai 發布于2019-08-19 18:45 / 2559人閱讀

摘要：什么是單例模式簡單點來說，單例模式就是確保某個類只有一個實例，并且最好只被創建過一次。對計算機來說，像打印機，線程池都是經典的單例模式。

什么是單例模式

簡單點來說，單例模式就是確保某個類只有一個實例，并且最好只被創建過一次。對計算機來說，像打印機，線程池都是經典的單例模式。對于JavaScript所處的前端環境來說，像登錄懸浮框，在整個頁面中只會有一個，無論用戶點擊多少次，只會被創建一次。

單例模式實現實例—登錄框

單例模式非常好理解，無非是辦公室有個打印機，大家一起公用，沒必要再每個人多帶帶買一個了。所以按照這樣的理解，先寫出前端創建懸浮登錄框的前端代碼：

var createLoginDialog = function(){
    var div = document.createElement("div");
    div.innerHTML="登錄懸浮框";
    var closeBtn = document.createElement("button");
    closeBtn.innerHTML = "X";
    div.appendChild(closeBtn);
    closeBtn.onclick = function(){
        div.style.display="none";
    }
    document.body.appendChild(div);
    return div;
}
document.getElementById("loginBtn").onclick = function(){
    var loginDiv = createLoginDialog();
}

這應該是我們平時寫出的“一般”實現單例代碼，看起來單例是實現了。但有很大問題，就是每次創建都會新生成一個div，性能損耗不談，本身也不是真正實現了單例模式。
單例模式的關鍵實現一是要在需要創建的時候才開始創建，即惰性創建，第二就是只被創建一次，再次使用的時候，不需要重復創建。在其他語言實現中，需要借助靜態方法或者其他手段來使代碼駐留內存，達到這一目的。JavaScript卻不提供，但內存駐留卻使我們想到了閉包。
所以再次修改代碼，創建一個閉包來實現。

var createLoginDialog = (function(){
        var div;
        return function(){
            if(!div){
                    div = document.createElement("div");
                    div.innerHTML="登錄懸浮框";
                    var closeBtn = document.createElement("button");
                    closeBtn.innerHTML = "X";
                    div.appendChild(closeBtn);
                    closeBtn.onclick = function(){
                        div.style.display="none";
            }
                    document.body.appendChild(div);
            }else{
                        div.style.display="block";
            }
            return div;
        }
})();
document.getElementById("loginBtn").onclick = function(){
        var loginDiv = createLoginDialog();
}

抽象出JavaScript單例模式表達

實際上，對于js單例模式最核心的邏輯就是

var obj;
if(!obj){
    obj = XXX;
}

而對于以上最后寫出的創建代碼，也不盡完美，因為它違反了設計模式中的單一職原則。即創建對象和管理單例的邏輯都放在一個類的內部。
據此，我們可以剝離出創建單例模式的方法

var getSingleton = function(fn){
            var result;
            return function(){
                return result || (result = fn.apply(this,arguments));
            }
        }

最終在這個方法下實現代碼：

var createLoginDialog = function(){
            var div = document.createElement("div");
            div.innerHTML="登錄懸浮框";
            var closeBtn = document.createElement("button");
            closeBtn.innerHTML = "X";
            div.appendChild(closeBtn);
            closeBtn.onclick = function(){
                div.style.display="none";
            }
            document.body.appendChild(div);
            return div;
        }
var getSingleton = function(fn){
            var result;
            return function(){
                return result || (result = fn.apply(this,arguments));
            }
        }
var createSingletonLogin = getSingleton(createLoginDialog);
document.getElementById("loginBtn").onclick = function(){
            var loginDiv = createSingletonLogin();
            loginDiv.style.display = "block";
}

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

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

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

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

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

xiaolinbang 2019-08-23 15:54 評論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設計模式---單例模式

摘要：單例模式主要是為了解決對象的創建問題。頁面中只放一個按鈕登錄實現得到登錄框元素綁定事件關閉彈框這里做登錄點擊頁面中的按鈕每次讓登錄框出現即可上面的代碼根據單例模式的使用構造函數來實現的。最近打算系統的學習javascript設計模式，以便自己在開發中遇到問題可以按照設計模式提供的思路進行封裝，這樣可以提高開發效率并且可以預先規避很多未知的問題。先從最基本的單例模式開始。什么是單例...

Hanks10100 2019-08-20 14:27 評論0 收藏0
單例模式 | 程序員都想要探索的 Javascript 設計模式

摘要：單例模式主要是為了解決對象的創建問題。頁面中只放一個按鈕登錄實現得到登錄框元素綁定事件關閉彈框這里做登錄點擊頁面中的按鈕每次讓登錄框出現即可上面的代碼根據單例模式的使用構造函數來實現的。 showImg(https://segmentfault.com/img/bVbiE4g?w=568&h=450);最近打算系統的學習 Javascript 設計模式，以便自己在開發中遇到問題可以按照...

rottengeek 2019-08-23 12:32 評論0 收藏0