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只实例化一次就可以