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

2018-09-22 本文已影响2人悟C

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      width: 100vw;
      height: 100vh;
    }
    #gun {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 20px;
      background-color: #000;
    }
  </style>
</head>
<body>
  <div id="gun"></div>
  <script>
  var bulletCreator = function () {
    var bullet = document.createElement('div');
    document.getElementById('gun').appendChild(bullet);
    return bullet;
  }

  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) {
        bullet.parentNode.removeChild(bullet);
        clearInterval(time);
      }
      bottom += 10;
      bullet.style.bottom = bottom + 'px';
    }, 10)
  }

  window.onkeypress = function (e) {
    if (e.keyCode === 32) {
      var bullet = bulletCreator();
      bulletStyle(bullet);
      shoot(bullet);
    }
  }  
  </script>
</body>
</html>

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

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

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就越少。

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

猜你喜欢

热点阅读