从JavaScript学习设计模式-02单例模式

保证一个类仅有一个实例，而且提供一个访问它的全局访问点

单例模式的思路是：一个类能返回一个对象的引用（而且永远是同一个）和一个得到该实例的方法（静态方法，一般使用 getInstance 名称）。那么当咱们调用这个方法时，若是类持有的引用不为空就返回该引用，否者就建立该类的实例，而且将实例引用赋值给该类保持的那个引用再返回。同时将该类的构造函数定义为私有方法，避免其余函数使用该构造函数来实例化对象，只经过该类的静态方法来获得该类的惟一实例。

应用场景

平常开发中，常常制做弹窗的时候咱们须要一个半透明的遮罩层，为了减小没必要要的dom操做，咱们正确的思路应该是，判断有没有生成过这个 model div 若是已经生成了就没必要再次生成。

实现步骤

步骤1 写一个生成 model div的方法

<style> .modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .5; background: #000; z-index: 99; } </style>
  
 <script> function createModal () { const div = document.createElement('div'); div.className = 'modal'; document.body.appendChild(div); } createModal() createModal() // 调用两次 将会产生两个模态框 </script>  

复制代码

调用两次 createModal 方法将会产生在body上追加两个div 很显然不是咱们须要的结果，咱们须要增长一个变量判断是否已经调用过

根据单例模式的定义来实现

1. 保证一个类仅有一个实例 new createModal()
2. 而且提供一个访问它的全局访问点 createModal.getInstance 方法访问

function createModal () {
    const div = document.createElement('div');
    div.className = 'modal';
    document.body.appendChild(div);
  }

  createModal.getInstance = function () {
    if (this.instace) {
      return this.instace;
    } else {
      this.instace = new createModal(); 
      return this.instace;
    }
  };
  const a = createModal.getInstance()
  const b = createModal.getInstance() // 调用两次 实例一次
  console.log(a === b)  // true
复制代码

此段代码就根据单例模式的定义来用js实现了一个单例模式，调用屡次也只会实例一个 createModal ，生成一个模态框

惰性单例

因为js的特性，可用闭包的形式保护一个私有变量，让他来做为判断值，而且惰性函数表明：在须要的时候才建立对象实例，而非在页面加载时就建立

const createModal = (function(){
    let div;
    return function(){
      if(!div){
        div = document.createElement('div');
        div.className = 'modal';
        document.body.appendChild(div);
      }
    }
  })();
  createModal()
  createModal() // 调用两次 div 生成一次

复制代码

经过闭包，保护了 div 变量，在调用时候判断

通用模式

经过上面代码咱们发现若是须要新建另一个div，只能复制代码，是否能想办法把 return 里生成div 的方法分离出来呢。

1. 建立一个 getSingle 方法 result 为判断变量
2. 建立一个 createModal 的方法为具体执行代码，而且返回一个bool值给 getSingle 中的 result 进行判断

const getSingle = function (fn) {
    let result;
    return function () {
      return result || (result = fn.apply(this, arguments));
    }
  };
  const createModal = function () {
    const div = document.createElement('div');
    div.className = 'modal';
    document.body.appendChild(div);
    return div
  }
  const createSingleDiv = getSingle(createModal)
  const a = createSingleDiv()
  const b = createSingleDiv()
  console.log(a === b)  // true
复制代码

这样就建立了一个 建立惰性单例的通用模式了

总结

单例模式在实际开发中应用不少，特别是在框架设计，合理利用能够提升性能。