单例模式

理解：

1. 对于一个类，只能实例化一次。
2. 在 javascript 中对象字面量创建时就是单例模式，此时没有类。
3. 但是当需要有更复杂的对象，例如有私有变量等，需要以类的形式去写的时候，要考虑是否需要使用单例模式；如果使用单例模式的话可以延迟初始化，例如：

let timeTool = (function() {
  let _instance = null;
  
  function init() {
    //私有变量
    let now = new Date();
    //公用属性和方法
    this.name = '处理时间工具库',
    this.getISODate = function() {
      return now.toISOString();
    }
    this.getUTCDate = function() {
      return now.toUTCString();
    }
  }
  
  return function() {
    if(!_instance) {
      _instance = new init();
    }
    return _instance;
  }
})()

这段代码，只有当执行timeTool() 时，才会进行初始化操作。（惰性单例，懒汉模式）

4. 更多使用单例的场景是为了延迟初始化。例如，唯一作用的弹框，可以用惟一实例的单例模式。思路是，首先第一次调用时加载 dom，第二次时返回之前的实例，仅做 dom 的 style 修改。这种做法相比于常规做法，可以在初次加载时少加载一些 dom元素，加快首屏加载速度。

例子：

class Login {

  //构造器
  constructor() {
    this.init();
  }

  //初始化方法
  init() {
    //新建div
    let mask = document.createElement('div');
    //添加样式
    mask.classList.add('mask-layer');
    //添加模板字符串
    mask.innerHTML = 
    `
    

      

        
登录框
        
×
      
      

        用户名:
        
      
      

        密码:
        
      
      

        确定
        清空
      
    
    `;
    //插入元素
    document.body.insertBefore(mask, document.body.childNodes[0]);

    //注册关闭登录框事件
    Login.addCloseLoginEvent();
  }

  //静态方法: 获取元素
  static getLoginDom(cls) {
    return  document.querySelector(cls);
  }

  //静态方法: 注册关闭登录框事件
  static addCloseLoginEvent() {
    this.getLoginDom('.close-btn').addEventListener('click', () => {
      //给遮罩层添加style, 用于隐藏遮罩层
      this.getLoginDom('.mask-layer').style = "display: none";
    })
  }

  //静态方法: 获取实例(单例)
  static getInstance() {
    if(!this.instance) {
      this.instance = new Login();
    } else {
      //移除遮罩层style, 用于显示遮罩层
      this.getLoginDom('.mask-layer').removeAttribute('style');
    }
    return this.instance;
  }
}

//注册点击事件
Login.getLoginDom('.login-btn').addEventListener('click', () => {
  Login.getInstance();
})

5. 核心： 确保只有一个实例， 并提供全局访问

补充一个项目中遇到的例子：
背景： 需要调用一个方法，并传入 true 参数时对chrome.debugger.onEvent事件绑定处理函数，当传入 false 参数时对取消该绑定。
难点：1.解绑和绑定传参必须为一个函数 2. 事件处理函数参数依赖调用时状态
解决： 将该函数作为单例进行获取，同时可传入运行时参数。
问题：该传入参数若为不可变类型，则获取不到更新值

 getListener(interfaceStoreParams) {
        if(this.listener) {
            return this.listener;
        } else {
            const listener = (...args) => netWortListener(...args, interfaceStoreParams);
            this.listener = listener;
            return listener;
        }
    }

    

    @action.bound switchListener(open, interfaceStore) {
        const listen = this.getListener(interfaceStore);
        if(open) {
            chrome.debugger.onEvent.addListener(listen)
        } else {
            chrome.debugger.onEvent.removeListener(listen)
            this.listener = null;
        }
        this.listenerOpen = open;
    }

ps 参数为引用类型和不可变类型的区别

引用类型

let listener = null;

function getListener(interfaceStoreParams) {
    if(listener) {
        return listener;
    } else {
        const l = (...args) => { console.log(...args, interfaceStoreParams) }
        listener = l;
        return listener;
    }
}



function switchListener(open, v) {
    const listen = getListener(v);
    if(open) {
        setTimeout(() => {
            console.log('open');
            listen(1,2);
            v.name = 'wang';
        }, 2000)
    } else {
        setTimeout(() => {
            console.log('close');
            listen(1,2);
        }, 2000)
        listener = null;
    }
}

let obj = { name: 'nena' };
console.log('5秒后打开')
setTimeout(() => {
    switchListener(true, obj);
}, 2000)



setTimeout(() => {
    switchListener(false, obj);
}, 5000)

5秒后打开
open
1 2 { name: 'nena' }
close
1 2 { name: 'wang' }

不可变类型

let listener = null;

function getListener(interfaceStoreParams) {
    if(listener) {
        return listener;
    } else {
        const l = (...args) => { console.log(...args, interfaceStoreParams) }
        listener = l;
        return listener;
    }
}



function switchListener(open, v) {
    const listen = getListener(v);
    if(open) {
        setTimeout(() => {
            console.log('open');
            listen(1,2);
            v = 44;
        }, 2000)
    } else {
        setTimeout(() => {
            console.log('close');
            listen(1,2);
        }, 2000)
        listener = null;
    }
}

let obj = 33;
console.log('5秒后打开')
setTimeout(() => {
    switchListener(true, obj);
}, 2000)



setTimeout(() => {
    switchListener(false, obj);
}, 5000)

5秒后打开
open
1 2 33
close
1 2 33