单例模式

概念

在前端开发中，单例模式是一种常见的设计模式。它可以确保一个类只有一个实例，并提供了全局的访问节点。这种模式在多个地方需要访问同一个对象时是非常的有用。

案例

下面列举一个单例模式的案例

class Singleton {
  constructor(){
    if(!this.instance){
      Singleton.instance = this;
    }
    return this.instance;
  }
}

const a = new Singleton();
const b = new Singleton();
console.log(a  === b);  // true 
/**  
 * a b引用的是同一个实例，因此它们相等
 *  这也证明了单例模式的特点是一个类只能有一个实例
 */

应用场景

1. React - store react中的store对象,应用中只需要一个store对象,从而确保了全局的唯一性，并且可在任何组件中访问该对象
1. Context 组件之间共享数据，从而避免了通过props层层传递数据的频繁,该对象在应用中通常只需要一次实例
1. 应用场景demo

// 实现全局的loading
let fullscreenLoading;

const Loading = (options => {}) =>{
  options = merge({},defaults,options);
  if(options.fullscreen && fullscreenLoading){
    return fullscreenLoading;
  }
  let parent = options.body ? document.body : options.target;
  // instance 
  let instance = new LoadingConstructor({
    el:document.createElement('div'),
    data: options
  });
  if(options.fullscreen){
    fullscreenLoading = instance;
  }
  return instance;
};
Loading({
  target:document.getElementById('#root');
})

特点

让你能够保证一个类只有一个实例,并且提供了一个访问该实例的全局节点
底层包内容提供了单例模式 v1.1 v1.2 内容(不同的版本可能存在不同的实例)

单例模式 #

概念 #

案例 #

应用场景 #

特点 #

单例模式

概念

案例

应用场景

特点