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/";
        };
複製代碼

單例模式在咱們平時的應用中用的比較多的，至關於把咱們的代碼封裝在一個起來，只是暴露一個入口，從而避免所有變量的污染。