单例模式

接触到的第一个设计模式——单例模式

是什么？

保证一个类只有一个实例，并提供一个访问它的全局访问点

使用闭包实现

function Person() {
    this.name = 'lucas'
}

const getSingleInstance = (function(){
     var singleInstance
    return function() {
         if (singleInstance) {
            return singleInstance
         } 
        return singleInstance = new Person()
    }
})()

const instance1 = new getSingleInstance()
const instance2 = new getSingleInstance()

事实上，我们有 instance1 === instance2。因为借助闭包变量 singleInstance，instance1 和 instance2 是同一引用的（singleInstance），这正是单例模式的体现

使用场景

惰性单例模式的原理也是这样的，只有当触发创建实例对象时，实例对象才会被创建。这样的实例对象创建方式在开发中很有必要的。
一个类只有一个对象（相当于全局对象）防止全局命名空间被变量污染，提高网页稳定性。
这样减少了重复创建dom元素的时间

缺点：有可能导致模块之间的强耦合。

比如登录弹窗以及他的遮罩层

image.png

一般我们写遮罩层是这么写的：通过一个变量去控制遮罩层的display：none。这样的话，无论登录窗口是否出现，dom Tree都会有他一席之地。
那如果是点击按钮再添加这个窗口dom元素，点击弹窗或者遮罩就移除dom呢？这样难免要进行很多dom操作
这个时候就应用到单例模式了
当遮罩层第一次出现的时候，我们就创建这个dom元素，添加到dom Tree中。不需要就将他隐藏。需要就把他显示。

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);
}

这里代码写的他把惰性单例模式单独抽离了出来。避免了耦合！值得学习！