聽飛狐聊JavaScript設計模式系列06

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

本回內(nèi)容介紹

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

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

1. 單例模式

保證一個類只有一個實例，從全局命名空間里提供一個唯一的訪問點來訪問該對象。其實之前寫過的對象字面量也是一種簡單單例，如下：

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

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

2. 閉包單例模式

顧名思義要用到閉包，作為返回實例對象，如下：

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

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

3. 惰性單例模式

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

    var Singleton = (function(){
        var uniq;    // 私有變量，用來存放返回實例化對象的容器
        function init(){    // 初始化方法    
            var buildeList = function(){    // 私有方法
                // 下面這一堆就是創(chuàng)建一個有序列表，含有5個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 {
            // 這里就是實例化對象了
            getInstance:function(){
                // 這里的uniq為true的時候，或者可以寫成 typeof uniq==="undefined"
                if(!uniq){
                    // 創(chuàng)建單例實例
                    uniq = init();
                }
                return uniq;
            }
        };
    })();
    
    Singleton.getInstance().method();    // 返回1.帥狐2.帥狐3.帥狐4.帥狐5.帥狐

這個例子就是惰性單例了，也就是說只有在用的時候才會去初始化方法，這樣可以更省資源。

4. 分支單例模式

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

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

這個例子就是分支單例了，比較簡單，這個例子也是模擬京東目前判斷訪問設備的代碼。

裝個逼再說。剛看到一新聞，韓雪發(fā)微博稱，因為自己修改的本月套餐，上月流量就清零了，并稱：“我改這個月的和上個月有什么關系嗎？我付了錢的，多余的流量憑什么你說清零就清零呢？這不是霸王條款嗎？”，女神都忍受不了了，哈哈~~

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

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

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

這個題基本上我都寫了注釋，難度適中，當娛樂消遣。

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

話說，看完文章覺得ok，客觀點個贊唄，好東西多推薦推薦，讓大家都知道，嘿嘿，好像有點那啥賣瓜了...

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/86126.html

聽飛狐聊JavaScript設計模式系列02

摘要：本回內(nèi)容介紹上一回聊到數(shù)據(jù)類型，簡單的過了一遍，包括個數(shù)組新特性等，這一回來聊聊對象，結合數(shù)組來實戰(zhàn)一些例子，在做題中成長，記憶會更深刻，來吧，開始咯創(chuàng)建實例的方式有兩種使用操作符后跟構造函數(shù)飛狐使用對象字面量表示法飛狐也可以飛狐這種寫法與本回內(nèi)容介紹上一回聊到JS數(shù)據(jù)類型，簡單的過了一遍，包括9個數(shù)組新特性等，這一回來聊聊Object對象，結合數(shù)組來實戰(zhàn)一些例子，在做題中成長，記...

tangr206 2019-08-21 10:44 評論0 收藏0
聽飛狐聊JavaScript設計模式系列11

摘要：橋接模式之特權函數(shù)特權函數(shù)，用一些具有特權的方法作為橋梁以便訪問私有空間，可以回憶一下之前的系列。連續(xù)自然數(shù)分組，計算最多組的個數(shù)將至這個連續(xù)自然數(shù)分成組使每組相加的值相等。個數(shù)組中數(shù)字最多的一組有個此時的和為。本回內(nèi)容介紹上一回，聊了適配器模式，圖片預加載，介一回，聊橋接模式（Bridge），跟之前一樣，難度比較小，橋接模式將抽象部分與它的實現(xiàn)部分分離，通過橋接模式聯(lián)系彼此，同時...

wanglu1209 2019-08-19 17:12 評論0 收藏0
聽飛狐聊JavaScript設計模式系列10

摘要：本回內(nèi)容介紹上一回，聊了代理模式，虛擬代理，圖片懶加載，介一回，也比較容易，適配器模式，用一個新的接口對現(xiàn)有類的接口進行包裝，處理類與的不匹配。這一回，主要聊了適配器模式，圖片預加載，主要還是理解下一回，聊一聊橋接模式，順便做一做計算題。本回內(nèi)容介紹上一回，聊了代理模式，虛擬代理，圖片懶加載，介一回，也比較容易，適配器模式（Adapter），用一個新的接口對現(xiàn)有類的接口進行包裝，處...

yexiaobai 2019-08-19 17:12 評論0 收藏0
聽飛狐聊JavaScript設計模式系列14

摘要：本回內(nèi)容介紹上一回，聊了聊狀態(tài)模式，并介紹了一下介一回，聊鏈式編程，模擬一下，再模擬一下封裝一個庫。這一回，主要聊了鏈式調(diào)用，模擬了，尤其是，希望大家能喜歡這次代碼分享。下一回，聊一聊的策略模式。本回內(nèi)容介紹上一回，聊了聊狀態(tài)模式（State），并介紹了一下vue.js；介一回，聊鏈式編程，模擬一下jQuery，再模擬一下underscore.js,封裝一個庫。 1. 鏈式調(diào)用 (...

fox_soyoung 2019-08-19 17:20 評論0 收藏0
聽飛狐聊JavaScript設計模式系列09

摘要：說白了，就是對訪問進行控制。這一回，主要聊了代理模式，虛擬代理，圖片懶加載，難度適中下一回，聊一下適配器模式，難度也比較小。本回內(nèi)容介紹上一回，聊了門面模式，DOM2級事件，事件委托，介一回，也比較容易，代理模式（proxy），代理對象控制對本體對象的訪問，實現(xiàn)了同樣的接口，并且會把任何方法的調(diào)用傳遞到本體對象。說白了，就是對訪問進行控制。直接上代碼，走你： 1.代理模式代理也是...

張春雷 2019-08-19 17:07 評論0 收藏0