成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript設(shè)計模式學(xué)習(xí)—單例模式

TerryCai / 2562人閱讀

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

什么是單例模式

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

單例模式實(shí)現(xiàn)實(shí)例—登錄框

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

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

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

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單例模式表達(dá)

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

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

而對于以上最后寫出的創(chuàng)建代碼，也不盡完美，因?yàn)樗`反了設(shè)計模式中的單一職原則。即創(chuàng)建對象和管理單例的邏輯都放在一個類的內(nèi)部。
據(jù)此，我們可以剝離出創(chuàng)建單例模式的方法

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

最終在這個方法下實(shí)現(xiàn)代碼：

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79956.html

相關(guān)文章

  • javascript設(shè)計模式學(xué)習(xí)筆記之單例模式

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

    xiaolinbang 評論0 收藏0

  • JavaScript設(shè)計模式之單例模式

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

    lk20150415 評論0 收藏0

  • JavaScript設(shè)計模式與開發(fā)實(shí)踐系列之單例模式

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

    Airy 評論0 收藏0

  • 探索Javascript設(shè)計模式---單例模式

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

    Hanks10100 評論0 收藏0

  • 單例模式 | 程序員都想要探索的 Javascript 設(shè)計模式

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

    rottengeek 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<