JavaScript 单例模式

Question

单例 (singleton) 模式是 JavaScript 中最基本又最有用的模式之一。

这种模式提供了一种将代码组织为一个逻辑单元的手段，这个逻辑单元中的代码可以通过单一的变量进行访问。通过确保单体对象只存在一份实例，就可以确信自己的所有代码使用的都是同样的全局资源。

单例模式不能通过 new 关键字进行实例化

共有类别：

1. 简单单体
2. 闭包单体
3. 惰性单体
4. 分支单体

简单单体

方式：使用一个对象。

主要是为了划分命名空间 (区分代码)

const Singleton = {
  attr1: true , 
  attr2: 10 ,
  method1 : function(){
    alert('我是方法 1');
  },
  method2 : function(){
    alert('我是方法 2');
  }
};

// 或者

const BHX = {};
BHX.Singleton = {
  attr1: true , 
  attr2: 10 ,
  method1 : function(){
    alert('我是方法 1');
  },
  method2 : function(){
    alert('我是方法 2');
  }				
};
BHX.Singleton.method1();

闭包单体

借用闭包创建单体 的主要的目的是 保护数据，不受外界干扰

// 命名空间
const BHX = {} ;
BHX.Singleton = (function(){
  // 添加自己的私有成员. 这里的数据外界无法访问
  let a1 = true ;
  let a2 = 10  ;
  let f1 = function(){
    alert('f1');
  }
  let f2 = function(){
    alert('f2');
  }			
  
  // 把块级作用域里的执行结果赋值给单体对象
  return {
    attr1: a1 , 
    attr2: a2 ,
    method1 : function(){
      return f1();
    },
    method2 : function(){
      return f2();
    }						
  } ;
})();

惰性单体（底层代码使用这种方式)

惰性单体（和闭包单体有一些相似的地方）。 区别是 ：使用私有变量控制返回的单体对象

const Ext = {} ;
Ext.Base = (function(){
  // 私用变量 控制返回的单体对象
  let uniqInstance ; // undefined
  // 需要一个构造器 init 初始化单体对象的方法
  function init(){
    // 私用成员变量 
    let a1 = 10 ; 
    let a2 = true ; 
    let fn1 = function(){alert('fn1')};
    let fn2 = function(){alert('fn2')};	
    return {
      attr1 : a1 , 
      arrt2 : a2 , 
      method1 : function(){
        return fn1();
      },
      method2 : function(){
        return fn2();
      }
    };						
  }
  return {
    getInstance : function(){
      if(!uniqInstance){ //如果不存在 创建单体实例
        uniqInstance = init();
      }
      return uniqInstance ;
    }
  };
})();

alert(Ext.Base.getInstance().attr1);
Ext.Base.getInstance().method1();

分支单体

判断程序的分支 ，常用 浏览器差异的检测 ，不同浏览器使用不同代码

const Ext = {};
let def =  false;
Ext.More = (function(){
  let objA = {		// 火狐浏览器 内部的一些配置
    attr1:'FF 属性 1'
    // 属性 1 
    // 属性 2 
    // 方法 1 
    // 方法 2
  } ;
  let objB = {		// IE 浏览器 内部的一些配置
    attr1:'IE 属性 1'
    // 属性 1 
    // 属性 2 
    // 方法 1 
    // 方法 2							
  } ;
  return def ? objA:objB;
})();
alert(Ext.More.attr1);