JavaScript设计模式——单例模式

单例模式

单例模式顾名思义就是只生成一个实例对象的一种模式。无论调用多少次都只返回相同的实例。

当我们单击登录按钮的时候，页面中会出现一个登录浮窗，而这个登录浮窗是唯一的，无论单击多少次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗就适合用单例模式来创建

应用场景

单例模式一般应用于创建全局的配置对象、全局元素，例如：全局弹出框、全局提示、全局遮罩层等。

全局弹出层

该示例的作用为创建一个全聚德弹出层，用于显示提示信息，用户点击关闭按钮可以隐藏弹出层。

let Tip = (function () {
  class Tip {
    constructor() {
      this.ele = document.createElement('div');
      this.ele.className = 'tip';
    }
    // 设置弹出层的显示信息
    setContent(text) {
      this.ele.innerHTML = '';
      this.ele.style.display = 'block';
    }

    bindEvent() {
      this.ele.addEventListener('click', e => {
        e = e || window.e;
        let target = e.target || e.srcElement;
        if (target.className === 'close') {
          this.ele.style.display = 'none';
        }
        if (target.className === 'cancel') {
          console.log('false')
        }
        if (target.className === 'ok') {
          console.log("ok");
        }
      });
    }
  }
  // 单例模式核心代码，用变量保存需要返回的实例，判断是否已经存在，如果已经存在就返回变量保存的实例，否则就创建实例用变量保存并返回。
  let instance = null;
  return function () {
    if (!instance) {
      instance = new Tip();
    }
    return instance;
  }
})()

上面的代码先构建一个Tip类，并添加方法，然后使用instance存储已经创建的对象，并返回函数，函数内部判断是否已经创建实例，如果已经创建就返回已经存在的实例，否则就创建然后返回。虽然也能实现功能，但是返回实例，与构建类的代码耦合在一起，因此，把返回实例部分的代码进行封装，由此，构建类的代码可以和单例模式代码解耦

function createSingle(constructor){
  let instance;
  return function(){
    if(!instance){
      instance = new constructor(...arguments); 
    }
    return instance;
  }
}

该函数接受一个构造函数，使用 instance 变量保存实例对象，返回一个函数，这个被返回的函数用于判断，如果不存在实例对象就创建并返回实例对象，如果存在就直接返回已创建的实例对象

在使用时，可以传入一个构造函数，用于创建某一类的实例对象，这种模式属于懒汉式单例模式，对象在需要使用的使用才创建。除此之外还有饿汉式单例模式。

function createSingle(constructor){
	let instance = new constructor();
	return function (){
		return instance;
	}
}

饿汉式单例模式中对象在程序加载时就创建

总结

单例模式比较简单，主要用于创建唯一实例，由此可以扩大其唯一的范围，除了创建实例外也可以创建DOM元素、变量、函数、全局缓存等。