jS設計模式二：單例模式

明易發表於2018-12-05
JS設計模式單例

這裡有一份簡潔的前端知識體系等待你查收，看看吧，會有驚喜哦~如果覺得不錯，懇求star哈~


單例模式簡述

概念：

單例模式思想在於保證一個特定類僅有一個例項，意味著當你第二次使用同一個類建立信物件時，應得到和第一次建立物件完全相同。

特點： 

  1. 可以來劃分名稱空間，從而清除全域性變數所帶來的風險。
  2. 可以把程式碼組織的更為一體，便於閱讀和維護。
  3. 可以被例項化，且例項化一次。

單例模式的簡單實現

        var Singleton = function(name){
            this.name = name;
        };
        Singleton.prototype.getName = function(){
          return this.name;
        }
        // 獲取例項物件
        var getInstance = (function() {
            var instance = null;
            return function(name) {
                if(!instance) {
                    instance = new Singleton(name);
                }
                return instance;
            }
        })();
        // 測試單例模式的例項
        var a = getInstance("aa");
        var b = getInstance("bb");
        console.log(b.getName()); // "aa"
        console.log(a === b);     // true
複製程式碼

如上程式碼，實現一個單例模式，無非就是使用一個變數來標識該類是否被例項化，如果未被例項化的話，那麼我們可以例項化一次，否則的話，直接返回已經被例項化的物件。

單例模式的運用

日常工作中，我們經常需要實現一個遮罩層，來防止使用者中斷頁面操作。所謂的遮罩層，就是一個大小跟視窗一致的半透明div層。我們要求頁面最多隻能存在一個遮罩層，此時運用單例模式就再合適不過了。

以下是程式碼實現~~~

        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";
        }
複製程式碼

如上程式碼，雖然可以實現需求，但是不通用。如果業務又需要我們實現單例模式建立彈窗效果，勢必需要copy一份程式碼，所以我們需要對單例模式進行封裝。

單例模式的封裝

var getInstance = function(fn) {
    var result;
    return function(){
        return result || (result = fn.call(this,arguments));
    }
};
複製程式碼

如上程式碼：我們使用一個引數fn傳遞進去，如果有result這個例項的話，直接返回，否則的話，會去執行fn函式，並將結果儲存到result中。

現在，不管我們需要例項化多少個物件，都使用getInstance來實現。

以下是程式碼示例~~~

        var createMask = function(){
            var div = document.createElement("div");
            div.innerHTML = "遮罩層";
            div.style.display = 'none';
            document.body.appendChild(div);
            return div;
        };
        // 建立iframe
        var createIframe = function(){
            var iframe = document.createElement("iframe");
            document.body.appendChild(iframe);
            return iframe;
        };
        // 獲取例項的封裝程式碼
        var getInstance = function(fn) {
            var result;
            return function(){
                return result || (result = fn.call(this,arguments));
            }
        };
        // 測試建立遮罩層
        var createSingleMask = getInstance(createMask);
        document.querySelector("body").onclick = function(){
            var win = createSingleMask();
            win.style.display = "block";
        };
        // 測試建立iframe
        var createSingleIframe = getInstance(createIframe);
        document.querySelector("body").onclick = function(){
            var win = createSingleIframe();
            win.src = "https://jiangxia.github.io/";
        };
複製程式碼

單例模式在我們平時的應用中用的比較多的，相當於把我們的程式碼封裝在一個起來，只是暴露一個入口，從而避免全部變數的汙染。

相關文章