聽(tīng)飛狐聊JavaScript設(shè)計(jì)模式系列06

hiYoHoo 發(fā)布于2019-08-21 10:45 / 1803人閱讀

本回內(nèi)容介紹

上一回聊到JS中模擬接口，裝飾者模式，摻元類，分析了backbone的繼承源碼，感覺(jué)還好吧！

介一回，偶們來(lái)聊一下在JS單例模式(singleton)，單例模式其實(shí)運(yùn)用很廣泛，比如：jquery，AngularJS，underscore吖蝦米的都是單例模式，來(lái)吧，直接開(kāi)始咯：

1. 單例模式

保證一個(gè)類只有一個(gè)實(shí)例，從全局命名空間里提供一個(gè)唯一的訪問(wèn)點(diǎn)來(lái)訪問(wèn)該對(duì)象。其實(shí)之前寫過(guò)的對(duì)象字面量也是一種簡(jiǎn)單單例，如下：

    var Singleton = {
        name: "飛狐",
        method: function () {
            return "hello world";
        }
    };
    alert(Singleton.method());    // 返回hello world

這就是一個(gè)簡(jiǎn)單單例了，應(yīng)該很多盆友已經(jīng)看出來(lái)了，沒(méi)有作用域，如果要擴(kuò)展私有屬性和方法的話，那么就可以靠閉包來(lái)實(shí)現(xiàn)。

2. 閉包單例模式

顧名思義要用到閉包，作為返回實(shí)例對(duì)象，如下：

    var Singleton = (function(){
        var name = "飛狐";    // 私有屬性
        var nickname = "帥狐";
        var showNickname = function(){    // 私有方法
            return nickname;
        }
        return {    // 返回一個(gè)對(duì)象
            name:name,    // 將私有屬性公開(kāi)
            nickName: function(){    // 在公開(kāi)的方法中返回私有方法
                return showNickname();
            }
        }
    })();
    alert(Singleton.name);    // 飛狐 
    alert(Singleton.nickName());    // 帥狐

這里我們接著上邊兒簡(jiǎn)單單例的例子來(lái)，稍微的改一下，改成閉包之后，就數(shù)據(jù)保證了不受外界干擾了。

3. 惰性單例模式

惰性單例就是只有在使用的時(shí)候才初始化，如下：

    var Singleton = (function(){
        var uniq;    // 私有變量，用來(lái)存放返回實(shí)例化對(duì)象的容器
        function init(){    // 初始化方法    
            var buildeList = function(){    // 私有方法
                // 下面這一堆就是創(chuàng)建一個(gè)有序列表，含有5個(gè)li
                var root = document.createElement("ol");
                document.body.appendChild(root);
                for(var i=0;i<5;i++){
                    var a = document.createElement("a");
                    a.innerHTML = "帥狐";
                    var li = document.createElement("li");
                    li.appendChild(a);
                    root.appendChild(li);
                }
            }
            
            return {    // 一樣的閉包，暴露共有方法
                method:function(){
                    return buildeList();
                }
            };
        }
        
        return {
            // 這里就是實(shí)例化對(duì)象了
            getInstance:function(){
                // 這里的uniq為true的時(shí)候，或者可以寫成 typeof uniq==="undefined"
                if(!uniq){
                    // 創(chuàng)建單例實(shí)例
                    uniq = init();
                }
                return uniq;
            }
        };
    })();
    
    Singleton.getInstance().method();    // 返回1.帥狐2.帥狐3.帥狐4.帥狐5.帥狐

這個(gè)例子就是惰性單例了，也就是說(shuō)只有在用的時(shí)候才會(huì)去初始化方法，這樣可以更省資源。

4. 分支單例模式

分支單例就很簡(jiǎn)單了，就是做程序分支的判斷，利用分支來(lái)返回相應(yīng)的實(shí)例，經(jīng)常用于瀏覽器檢測(cè)，直接看代碼吧，如下：

    var ua  = window.navigator.userAgent.toLocaleLowerCase();
    var matchedRE = /iphone|android|symbianos|windowssphone/g;
    var Singleton = (function() {
          var webUrl = "web端url";
          var mobileUrl = "移動(dòng)端url";
          return (matchedRE.test(ua))?mobileUrl:webUrl;
    })();
    // 如果是pc端返回就是web端url，如果是移動(dòng)端就返回移動(dòng)端url
    alert(Singleton);

這個(gè)例子就是分支單例了，比較簡(jiǎn)單，這個(gè)例子也是模擬京東目前判斷訪問(wèn)設(shè)備的代碼。

裝個(gè)逼再說(shuō)。剛看到一新聞，韓雪發(fā)微博稱，因?yàn)樽约盒薷牡谋驹绿撞停显铝髁烤颓辶懔耍⒎Q：“我改這個(gè)月的和上個(gè)月有什么關(guān)系嗎？我付了錢的，多余的流量憑什么你說(shuō)清零就清零呢？這不是霸王條款嗎？”，女神都忍受不了了，哈哈~~

這一回講的內(nèi)容不多，就一個(gè)單例模式，
下面的內(nèi)容更簡(jiǎn)單，一道題。

5. 筆試題：判斷字符串中出現(xiàn)次數(shù)最多的字母，返回該字母及其出現(xiàn)次數(shù)

    function calculate(str){
        //命名一個(gè)變量放置字母出現(xiàn)的最高次數(shù)并初始化為0
        var maxLength = 0;
        //命名一個(gè)變量放置結(jié)果輸入 
        var result = "";
        //循環(huán)迭代開(kāi)始，并判斷字符串是否為空
        while(str != "" ){
            //將原始的字符串變量賦值給新變量
            var oldStr = str;
            //用字符串的substr的方法得到第一個(gè)字符（首字母）
            var getStr = str.substr(0,1);
            //執(zhí)行一次全局替換
            eval("str = str.replace(/"+getStr+"/g,"")");
            //判斷原始的字符串的長(zhǎng)度減去替代后字符串長(zhǎng)度是否大于之前出現(xiàn)的最大的字符串長(zhǎng)度
            if(oldStr.length-str.length > maxLength ) {
                //兩字符串長(zhǎng)度相減得到最大的字符串長(zhǎng)度
                maxLength = oldStr.length-str.length;
                //返回最大的字符串結(jié)果（字母、出現(xiàn)次數(shù)）
                result = "出現(xiàn)最多的字母是：" + getStr + "------出現(xiàn)了" + maxLength + " 次。";
            }
        }
        return result;
    }
    var str ="adadfdfseffserfefsefseeffffftsdg";
    alert(calculate(str));

這個(gè)題基本上我都寫了注釋，難度適中，當(dāng)娛樂(lè)消遣。

這一回，主要聊了單例模式，應(yīng)該很好理解，難度不大。
下一回，咱主要聊一聊工廠模式。

話說(shuō)，看完文章覺(jué)得ok，客觀點(diǎn)個(gè)贊唄，好東西多推薦推薦，讓大家都知道，嘿嘿，好像有點(diǎn)那啥賣瓜了...

注：此系飛狐原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處