单例模式

单例模式

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

应用场景：前端，弹窗应用比较广泛，比如登录弹窗，无论我们点击多少次登录弹窗，我们的弹窗应该只创建一次

看下伪代码

// es5版本
var Singleton = function (name) {
  this.name = name;
  this.instance = null;
};
Singleton.getInstance = function () {
  // 定义instance 创建并且记录状态，如果下次再次进入，先判断是否存在，如果存在那么直接返回
  let instance; // 核心代码
  return function () {
    if (!instance) {
      // 核心代码
      instance = new Singleton();
    }
    return instance;
  };
};

// es6版本
class Singleton {
  constructor() {}
}
Singleton.getInstance = (function () {
  // 定义instance 创建并且记录状态，如果下次再次进入，先判断是否存在，如果存在那么直接返回
  let instance; // 核心代码
  return function () {
    if (!instance) {
      // 核心代码
      instance = new Singleton();
    }
    return instance;
  };
})();

let s1 = Singleton.getInstance();
let s2 = Singleton.getInstance();
console.log(s1 === s2); // true

// vue 中也有使用到单例模式
let Vue; // bind on install
export function install(_Vue) {
  if (Vue && _Vue === Vue) {
    // 如果发现 Vue 有值，就不重新创建实例了
    return;
  }
  Vue = _Vue;
  applyMixin(Vue);
}

类似 element 这样的 ui 组件库，messageBox 也使用到单例模式，全局只创建一个弹窗