JS-單體模式

介紹

單體模式是JavaScript中比較簡單的且常用的模式。單體模式思想在於保證一個特定類僅有一個實例，意味着當你第二次使用同一個類創建信對象時，應得到和第一次創建對象完全相同。

優點

1.可以用來劃分命名空間，減少全局變量的數量

2.可以被實例化，且實例化一次

實現

老規矩舉個栗子來解釋一下：頁面需要一個彈窗來展示接口返回的錯誤信息

// 實現彈窗
var createWindow = function(){
    var div = document.createElement("div");
    div.innerHTML = "返回錯誤信息";
    div.style.display = 'none';
    document.body.appendChild('div');
    return div;
};
document.getElementById("Id").onclick = function(){
    // 點擊後先創建一個div元素
    var win = createWindow();
    win.style.display = "block";
}

缺點很明顯，當有很多接口短時間內返回錯誤信息的時候，會頻繁的創建元素，從而引起重繪影響性能。那如果使用單體模式呢

// 創建div
var createWindow = 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));
    }
};
// 測試創建div
var createSingleDiv = getInstance(createWindow);
document.getElementById("Id").onclick = function(){
    var win = createSingleDiv();
    win.style.display = "block";
};
// 測試創建iframe
var createSingleIframe = getInstance(createIframe);
document.getElementById("Id").onclick = function(){
    var win = createSingleIframe();
    win.src = "http://cnblogs.com";
};

通過getInstance來實例化傳入的fn函數，不需要管他是創建什麼元素，只需要保證fn只實例化一次就可以