JS-单体模式

末蓝、 2023-08-17 16:40 72阅读 0赞

### 介绍 ###

单体模式是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只实例化一次就可以