jS設(shè)計(jì)模式二:?jiǎn)卫J?/h1>

單例模式簡(jiǎn)述

概念:

單例模式思想在于保證一個(gè)特定類(lèi)僅有一個(gè)實(shí)例司抱,意味著當(dāng)你第二次使用同一個(gè)類(lèi)創(chuàng)建信對(duì)象時(shí)款侵,應(yīng)得到和第一次創(chuàng)建對(duì)象完全相同片择。

特點(diǎn):

  1. 可以來(lái)劃分命名空間却盘,從而清除全局變量所帶來(lái)的風(fēng)險(xiǎn)夸研。
  2. 可以把代碼組織的更為一體邦蜜,便于閱讀和維護(hù)。
  3. 可以被實(shí)例化亥至,且實(shí)例化一次悼沈。

單例模式的簡(jiǎn)單實(shí)現(xiàn)

        var Singleton = function(name){
            this.name = name;
        };
        Singleton.prototype.getName = function(){
          return this.name;
        }
        // 獲取實(shí)例對(duì)象
        var getInstance = (function() {
            var instance = null;
            return function(name) {
                if(!instance) {
                    instance = new Singleton(name);
                }
                return instance;
            }
        })();
        // 測(cè)試單例模式的實(shí)例
        var a = getInstance("aa");
        var b = getInstance("bb");
        console.log(b.getName()); // "aa"
        console.log(a === b);     // true

如上代碼,實(shí)現(xiàn)一個(gè)單例模式姐扮,無(wú)非就是使用一個(gè)變量來(lái)標(biāo)識(shí)該類(lèi)是否被實(shí)例化絮供,如果未被實(shí)例化的話(huà),那么我們可以實(shí)例化一次茶敏,否則的話(huà)壤靶,直接返回已經(jīng)被實(shí)例化的對(duì)象。

單例模式的運(yùn)用

日常工作中睡榆,我們經(jīng)常需要實(shí)現(xiàn)一個(gè)遮罩層萍肆,來(lái)防止用戶(hù)中斷頁(yè)面操作袍榆。所謂的遮罩層,就是一個(gè)大小跟窗口一致的半透明div層塘揣。我們要求頁(yè)面最多只能存在一個(gè)遮罩層包雀,此時(shí)運(yùn)用單例模式就再合適不過(guò)了。

以下是代碼實(shí)現(xiàn)~~~

        var createMask = (function(){
            var div;
            return function(){
                if(!div) {
                    div = document.createElement("div");
                    div.innerHTML = "遮罩層";
                    div.style.display = 'none';
                    document.body.appendChild(div);
                }
                return div;
            }
        })();
        document.querySelector("body").onclick = function(){
            var win = createMask();
            win.style.display = "block";
        }

如上代碼亲铡,雖然可以實(shí)現(xiàn)需求才写,但是不通用。如果業(yè)務(wù)又需要我們實(shí)現(xiàn)單例模式創(chuàng)建彈窗效果奖蔓,勢(shì)必需要copy一份代碼赞草,所以我們需要對(duì)單例模式進(jìn)行封裝。

單例模式的封裝

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

如上代碼:我們使用一個(gè)參數(shù)fn傳遞進(jìn)去吆鹤,如果有result這個(gè)實(shí)例的話(huà)厨疙,直接返回,否則的話(huà)疑务,會(huì)去執(zhí)行fn函數(shù)沾凄,并將結(jié)果保存到result中。

現(xiàn)在知允,不管我們需要實(shí)例化多少個(gè)對(duì)象撒蟀,都使用getInstance來(lái)實(shí)現(xiàn)。

以下是代碼示例~~~

        var createMask = function(){
            var div = document.createElement("div");
            div.innerHTML = "遮罩層";
            div.style.display = 'none';
            document.body.appendChild(div);
            return div;
        };
        // 創(chuàng)建iframe
        var createIframe = function(){
            var iframe = document.createElement("iframe");
            document.body.appendChild(iframe);
            return iframe;
        };
        // 獲取實(shí)例的封裝代碼
        var getInstance = function(fn) {
            var result;
            return function(){
                return result || (result = fn.call(this,arguments));
            }
        };
        // 測(cè)試創(chuàng)建遮罩層
        var createSingleMask = getInstance(createMask);
        document.querySelector("body").onclick = function(){
            var win = createSingleMask();
            win.style.display = "block";
        };
        // 測(cè)試創(chuàng)建iframe
        var createSingleIframe = getInstance(createIframe);
        document.querySelector("body").onclick = function(){
            var win = createSingleIframe();
            win.src = "https://jiangxia.github.io/";
        };

單例模式在我們平時(shí)的應(yīng)用中用的比較多的温鸽,相當(dāng)于把我們的代碼封裝在一個(gè)起來(lái)保屯,只是暴露一個(gè)入口,從而避免全部變量的污染涤垫。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

  • 序言:七十年代末姑尺,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子雹姊,更是在濱河造成了極大的恐慌股缸,老刑警劉巖衡楞,帶你破解...
    沈念sama閱讀 221,273評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吱雏,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡瘾境,警方通過(guò)查閱死者的電腦和手機(jī)歧杏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)迷守,“玉大人犬绒,你說(shuō)我怎么就攤上這事《以洌” “怎么了凯力?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,709評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵茵瘾,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我咐鹤,道長(zhǎng)拗秘,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,520評(píng)論 1 296
  • 正文 為了忘掉前任祈惶,我火速辦了婚禮雕旨,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘捧请。我一直安慰自己凡涩,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,515評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布疹蛉。 她就那樣靜靜地躺著活箕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪可款。 梳的紋絲不亂的頭發(fā)上讹蘑,一...
    開(kāi)封第一講書(shū)人閱讀 52,158評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音筑舅,去河邊找鬼座慰。 笑死,一個(gè)胖子當(dāng)著我的面吹牛翠拣,可吹牛的內(nèi)容都是我干的版仔。 我是一名探鬼主播,決...
    沈念sama閱讀 40,755評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼误墓,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蛮粮!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起谜慌,我...
    開(kāi)封第一講書(shū)人閱讀 39,660評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤然想,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后欣范,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體变泄,經(jīng)...
    沈念sama閱讀 46,203評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,287評(píng)論 3 340
  • 正文 我和宋清朗相戀三年恼琼,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了妨蛹。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,427評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡晴竞,死狀恐怖蛙卤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤颤难,帶...
    沈念sama閱讀 36,122評(píng)論 5 349
  • 正文 年R本政府宣布神年,位于F島的核電站,受9級(jí)特大地震影響行嗤,放射性物質(zhì)發(fā)生泄漏瘤袖。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,801評(píng)論 3 333
  • 文/蒙蒙 一昂验、第九天 我趴在偏房一處隱蔽的房頂上張望捂敌。 院中可真熱鬧,春花似錦既琴、人聲如沸占婉。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,272評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)逆济。三九已至,卻和暖如春磺箕,著一層夾襖步出監(jiān)牢的瞬間奖慌,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,393評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工松靡, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留简僧,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,808評(píng)論 3 376
  • 正文 我出身青樓雕欺,卻偏偏與公主長(zhǎng)得像岛马,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子屠列,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,440評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容