用亨元模式让打飞机游戏更加高效

亨元(flyweight)模式是一种用于性能优化的模式，其核心是运用共享技术来有效的支持大量细粒度的对象。

如果系统中要创建大量类似的对象而导致内存占用过高的时候，就可以用亨元模式进行优化。下面以打飞机游戏为例子，来看看如何用亨元模式进行性能优化。

这里主要是为了学习亨元模式，所以只创建一个飞机发射子弹的场景，其中子弹就是那个需要大量创建的类似对象，下面先用普通的方式实现：

每次发射子弹（按下空格），我们都去创建一颗子弹，在子弹超出可视范围然后删除回收。在快速射击的情况下，这个过程是非常消耗性能。

其实子弹我们可以循环利用，下面我们就用亨元模式。实现子弹共享，循环利用，避免每次都创建新子弹的性能开销：

var objectPoolFactory = function (createObjFn) {
  var objectPool = [];

  return {
    create: function () {
      var obj = objectPool.length === 0 ? createObjFn.apply(this, arguments) : objectPool.shift();
      return obj;
    },
    recover: function (obj) {
      objectPool.push(obj);
    }
  }
}


var bulletCreator = function () {
  var bullet = document.createElement('div');
  document.getElementById('gun').appendChild(bullet);
  return bullet;
}

var bulletFactory = objectPoolFactory(bulletCreator);

function bulletStyle(bullet) {
  bullet.style.width = '2px';
  bullet.style.height = '10px';
  bullet.style.backgroundColor = 'red';
  bullet.style.position = 'absolute';
}

function shoot(bullet) {
  var windowH = window.innerHeight;
  var bottom = 0;
  var time = setInterval(function () {
    if (windowH <= bottom) {
      bulletFactory.recover(bullet);
      clearInterval(time);
    }
    bottom += 10;
    bullet.style.bottom = bottom + 'px';
  }, 10)
}

window.onkeypress = function (e) {
  if (e.keyCode === 32) {
    var bullet = bulletFactory.create();
    bulletStyle(bullet);
    shoot(bullet);
  }
}

上面例子中创建了一个对象池objectPool，只有当对象池中没有子弹的时候，才去创建新的子弹，这样就避免了频繁的创建和删除子弹的DOM操作。 我们可以发现用亨元模式写的示例，子弹回收越快，创建的DOM就越少。