摘要：實現代碼如下創建元素設置樣式我們發現在開發中并不會多帶帶使用遮罩層，遮罩層和彈出窗是經常結合在一起使用，前面我們提到過登陸彈窗使用單例模式實現也是最適合的。

確保一個類僅有一個實例，并提供一個訪問它的全局訪問點。

比如線程池、全局緩存等。我們所熟知的瀏覽器的window對象就是一個單例，在JavaScript開發中，對于這種只需要一個的對象，我們的實現往往使用單例。

一般我們是這樣實現單例的，用一個變量來標志當前的類已經創建過對象，如果下次獲取當前類的實例時，直接返回之前創建的對象即可。代碼如下：

// 定義一個類
function Singleton(name) {
    this.name = name;
    this.instance = null;
}
// 原型擴展類的一個方法getName()
Singleton.prototype.getName = function() {
    console.log(this.name)
};
// 獲取類的實例
Singleton.getInstance = function(name) {
    if(!this.instance) {
        this.instance = new Singleton(name);
    }
    return this.instance
};

// 獲取對象1
var a = Singleton.getInstance("a");
// 獲取對象2
var b = Singleton.getInstance("b");
// 進行比較
console.log(a === b);

我們也可以使用閉包來實現：

function Singleton(name) {
    this.name = name;
}
// 原型擴展類的一個方法getName()
Singleton.prototype.getName = function() {
    console.log(this.name)
};
// 獲取類的實例
Singleton.getInstance = (function() {
    var instance = null;
    return function(name) {
        if(!this.instance) {
            this.instance = new Singleton(name);
        }
        return this.instance
    }        
})();

// 獲取對象1
var a = Singleton.getInstance("a");
// 獲取對象2
var b = Singleton.getInstance("b");
// 進行比較
console.log(a === b);

這個單例實現獲取對象的方式經常見于新手的寫法，這種方式獲取對象雖然簡單，但是這種實現方式不透明。知道的人可以通過 Singleton.getInstance() 獲取對象，不知道的需要研究代碼的實現，這樣不好。這與我們常見的用 new 關鍵字來獲取對象有出入，實際意義不大。

var Singleton = (function(){
    var instance;
    var CreateSingleton = function (name) {
        this.name = name;

        if(instance) {
            return instance;
        }
        // 打印實例名字
        this.getName();

        // instance = this;
        // return instance;
        return instance = this;
    }
    // 獲取實例的名字
    CreateSingleton.prototype.getName = function() {
        console.log(this.name)
    }

    return CreateSingleton;
})();
// 創建實例對象1
var a = new Singleton("a");
// 創建實例對象2
var b = new Singleton("b");

console.log(a===b);

這種單例模式我以前用過一次，但是使用起來很別扭，我也見過別人用這種方式實現過走馬燈的效果，因為走馬燈在我們的應用中絕大多數只有一個。

這里先說一下為什么感覺不對勁，因為在這個單例的構造函數中一共干了兩件事，一個是創建對象并打印實例名字，另一個是保證只有一個實例對象。這樣代碼量大的化不方便管理，應該盡量做到職責單一。

我們通常會將代碼改成下面這個樣子：

// 單例構造函數
function CreateSingleton (name) {
    this.name = name;
    this.getName();
};

// 獲取實例的名字
CreateSingleton.prototype.getName = function() {
    console.log(this.name)
};
// 單例對象
var Singleton = (function(){
    var instance;
    return function (name) {
        if(!instance) {
            instance = new CreateSingleton(name);
        }
        return instance;
    }
})();

// 創建實例對象1
var a = new Singleton("a");
// 創建實例對象2
var b = new Singleton("b");

console.log(a===b);

這種實現方式我們就比較熟悉了，我們在開發中經常會使用中間類，通過它來實現原類所不具有的特殊功能。有的人把這種實現方式叫做代理，這的確是單例模式的一種應用，稍后將在代理模式進行詳解。

說了這么多我們還是在圍繞著傳統的單例模式實現在進行講解，那么具有JavaScript特色的單例模式是什么呢。

在我們的開發中，很多同學可能并不知道單例到底是什么，應該如何使用單例，但是他們所寫的代碼卻剛好滿足了單例模式的要求。如要實現一個登陸彈窗，不管那個頁面或者在頁面的那個地方單擊登陸按鈕，都會彈出登錄窗。一些同學就會寫一個全局的對象來實現登陸窗口功能，是的，這樣的確可以實現所要求的登陸效果，也符合單例模式的要求，但是這種實現其實是一個巧合，或者一個美麗的錯誤。由于全局對象，或者說全局變量正好符合單例的能夠全局訪問，而且是唯一的。但是我們都知道，全局變量是可以被覆蓋的，特別是對于初級開發人員來說，剛開始不管定義什么基本都是全局的，這樣的好處是方便訪問，壞處是一不留意就會引起沖突，特別是在做一個團隊合作的大項目時，所以成熟的有經驗的開發人員盡量減少全局的聲明。

而在開發中我們避免全局變量污染的通常做法如下：

全局命名空間

使用閉包

它們的共同點是都可以定義自己的成員、存儲數據。區別是全局命名空間的所有方法和屬性都是公共的，而閉包可以實現方法和屬性的私有化。

說實話，在我下決心學習設計模式之前我并不知道，單例模式還分惰性單例模式，直到我看了曾探大神的《JvaScript設計模式與開發實踐》后才知道了還有惰性單例模式，那么什么是惰性單例模式呢？在說惰性單例模式之前，請允許我先說一個我們都知道的lazyload加載圖片，它就是惰性加載，只當含有圖片資源的dom元素出現在媒體設備的可視區時，圖片資源才會被加載，這種加載模式就是惰性加載；還有就是下拉刷新資源也是惰性加載，當你觸發下拉刷新事件資源才會被加載等。而惰性單例模式的原理也是這樣的，只有當觸發創建實例對象時，實例對象才會被創建。這樣的實例對象創建方式在開發中很有必要的。

就如同我們剛開始介紹的用 Singleton.getInstance 創建實例對象一樣，雖然這種方式實現了惰性單例，但是正如我們剛開始說的那樣這并不是一個好的實現方式。下面就來介紹一個好的實現方式。

遮罩層相信大家對它都不陌生。它在開發中比較常見，實現起來也比較簡單。在每個人的開發中實現的方式不盡相同。這個最好的實現方式還是用單例模式。有的人實現直接在頁面中加入一個div然后設置display為none，這樣不管我們是否使用遮罩層頁面都會加載這個div，如果是多個頁面就是多個div的開銷；也有的人使用js創建一個div，當需要時就用將其加入到body中，如果不需要就刪除，這樣頻繁地操作dom對頁面的性能也是一種消耗；還有的人是在前一種的基礎上用一個標識符來判斷，當遮罩層是第一次出現就向頁面添加，不需要時隱藏，如果不是就是用前一次的添加的。

實現代碼如下：

// html

click it

// js
var createMask = (function() {
    var mask;
    return function() {
        if(!mask) {
            // 創建div元素
            var mask = document.createElement("div");
            // 設置樣式
            mask.style.position = "fixed";
            mask.style.top = "0";
            mask.style.right = "0";
            mask.style.bottom = "0";
            mask.style.left = "0";
            mask.style.opacity = "";
            mask.style.display = "none";
            document.body.appendChild(mask);
        }

        return mask;
    }        
})();

document.getElementById("btn").onclick = function() {
    var maskLayer = createMask();
    maskLayer.style.display = "block";
}

我們發現在開發中并不會多帶帶使用遮罩層，遮罩層和彈出窗是經常結合在一起使用，前面我們提到過登陸彈窗使用單例模式實現也是最適合的。那么我們是不是要將上面的代碼拷貝一份呢？當然我們還有好的實現方式，那就是將上面單例中代碼變化的部分和不變的部分，分離開來。

代碼如下：

var singleton = function(fn) {
    var instance;
    return function() {
        return instance || (instance = fn.apply(this, arguments));
    }
};
// 創建遮罩層
var createMask = function(){
    // 創建div元素
    var mask = document.createElement("div");
    // 設置樣式
    mask.style.position = "fixed";
    mask.style.top = "0";
    mask.style.right = "0";
    mask.style.bottom = "0";
    mask.style.left = "0";
    mask.style.opacity = "o.75";
    mask.style.backgroundColor = "#000";
    mask.style.display = "none";
    mask.style.zIndex = "98";
    document.body.appendChild(mask);
    // 單擊隱藏遮罩層
    mask.onclick = function(){
        this.style.display = "none";
    }
    return mask;
};

// 創建登陸窗口
var createLogin = function() {
    // 創建div元素
    var login = document.createElement("div");
    // 設置樣式
    login.style.position = "fixed";
    login.style.top = "50%";
    login.style.left = "50%";
    login.style.zIndex = "100";
    login.style.display = "none";
    login.style.padding = "50px 80px";
    login.style.backgroundColor = "#fff";
    login.style.border = "1px solid #ccc";
    login.style.borderRadius = "6px";

    login.innerHTML = "login it";

    document.body.appendChild(login);

    return login;
};

document.getElementById("btn").onclick = function() {
    var oMask = singleton(createMask)();
    oMask.style.display = "block";
    var oLogin = singleton(createLogin)();
    oLogin.style.display = "block";
    var w = parseInt(oLogin.clientWidth);
    var h = parseInt(oLogin.clientHeight);
}

在上面的實現中將單例模式的惰性實現部分提取出來，實現了惰性實現代碼的復用，其中使用apply改變改變了fn內的this指向，使用 || 預算簡化代碼的書寫。

設計模式相關文章