设计模式-享元模式（2）-对象池

第一次创建后，进行回收，等待下次创建的时候可以再次使用，减少了创建时间，占用了内存。

1. 并没有主动分离内部状态和外部状态的过程
2. 上次创建的对象进行回收，共享给下次创建的时候使用。

例子：地图搜索地址气泡提示问题
搜索地图的时候，显示附近地点，出现了2个提示泡，然后程序回收了2个提示泡，第二次搜索的时候，出现4个提示泡，此时程序从上次回收中取出两个，并再创建了2个提示泡对象，返回显示到地图上。

应用：

1. 提示工具tip,pop,modal等弹窗。

  // 对象池
  let toolTipFactory = (function() {
    var toolTipPool = []
    return {
      create: function() {
        console.log(toolTipPool)
        if(toolTipPool.length == 0) { // 创建节点并返回
          let div = document.createElement('div') 
          document.body.appendChild(div)
          return div
        } else {
          return toolTipPool.shift() // 取出节点
        }
      },
      recover: function(tipDom) {
        return toolTipPool.push(tipDom) // 回收节点
      }
    }
  })()

  // 创建
  let ary = []
  for(var i = 0, str; str = ['a','b'][i++];) {
    var toolTip = toolTipFactory.create()
    toolTip.innerHTML = str
    ary.push(toolTip)
  }
  // 回收,方便下次使用。如果不回收，下面的创建则会再次创建ab两个节点。
  for(var i = 0, toolTip; toolTip = ary[i++];) {
    toolTipFactory.recover(toolTip)
  }
  // 再创建
  for(var i = 0, str; str = ['a','b','c','d'][i++];) {
    var toolTip = toolTipFactory.create()
    toolTip.innerHTML = str
  }

通用实现：

    // 工厂化，通用实现
    let objPoolFactory = function(createFn) {
      let objPool = [] //闭包
      return {
        create: function() {
          // 使用自定义函数创建对象
          let obj = objPool.length == 0 ? createFn.apply(this, arguments) : objPool.shift() // 取出
          return obj
        },
        recover: function(obj) {
          objPool.push(obj) // 插入，进行回收
        }
      }
    }
    // 配置创建对象的函数，并对回收进行处理
    let iframeFactory = objPoolFactory(function(){
      let iframe = document.createElement('iframe') // 创建一次，长期存储在内存中，等待下次调用时使用。
      document.body.appendChild(iframe)
      iframe.onload = function() {
        iframe.onload = null
        iframeFactory.recover(iframe) // 加载完毕后进行回收
      }
      return iframe
    })
    let iframe1 = iframeFactory.create()
    iframe1.src = 'http://www.taobao.com/'
    let iframe2 = iframeFactory.create()
    iframe2.src = 'http://qq.com'
    setTimeout(function() {
      let iframe3 = iframeFactory.create()
      iframe3.src = 'http://163.com'
    })