这个例子使用的是什么 javascript 对象模式？

Question

我正在制作一个 javascript/canvas 游戏，我在 CSS Tricks 上看到了这个示例。这是链接 http://css-tricks.com/9876-learn-canvas-snake-game/#comment-100804

无论如何，我想知道，因为我正在重构我的游戏代码，并创建我自己的对象，到目前为止，这看起来是一个很好的模式。

对我来说，这看起来像是我读到的揭示模块模式 http://addyosmani.com/resources/essentialjsdesignpatterns/book/

我说的对吗？

/* NOTE: this is just a snippet from the example, go to the link to see the
finished example */


var JS_SNAKE = {};

JS_SNAKE.game = (function () {
  var ctx;
  JS_SNAKE.width = 200;
  JS_SNAKE.height = 200;
  JS_SNAKE.blockSize = 10;
  var frameLength = 500; //new frame every 0.5 seconds
  var snake;

  function init() {
    $('body').append('<canvas id="jsSnake">');
    var $canvas = $('#jsSnake');
    $canvas.attr('width', JS_SNAKE.width);
    $canvas.attr('height', JS_SNAKE.height);
    var canvas = $canvas[0];
    ctx = canvas.getContext('2d');
    snake = JS_SNAKE.snake();
    bindEvents();
    gameLoop();
  }

  function gameLoop() {
    ctx.clearRect(0, 0, JS_SNAKE.width, JS_SNAKE.height);
    snake.advance();
    snake.draw(ctx);
    setTimeout(gameLoop, frameLength); //do it all again
  }

  function bindEvents() {
    var keysToDirections = {
      37: 'left',
      38: 'up',
      39: 'right',
      40: 'down'
    };

    $(document).keydown(function (event) {
      var key = event.which;
      var direction = keysToDirections[key];

      if (direction) {
        snake.setDirection(direction);
        event.preventDefault();
      }
    });
  }

  return {
    init: init
  };
})();

另外，在 javascript/canvas 游戏中创建对象时，我应该使用更好的模式吗？

如果您想查看我的游戏，请访问我的网站。 http://magnut.comze.com

我创建的游戏名为 Fruit Blitz，而我现在正在进行的下一个更新将是一个大型更新，包括敌人、能量提升等。

Answer 1

另外，在 javascript/canvas 游戏中创建对象时，我应该使用更好的模式吗？

我要说的是使用原型。你使用闭包和对象字面量。

至于代码，还不错。它只是命名空间，所有逻辑都由.init 调用触发。

很多这些“模式”（它们不是真正的模式）是个人喜好。

如果你想要代码审查，那是另一个问题。

参考资料：

• JS prototypical OOP

Answer 2

它是一个立即实例化函数 (IIF)，它使用一种方法返回一个对象。它创建了JS_SNAKE.game.init 方法，该方法可以使用通过闭包在IIF 中分配的所有内容。 我不知道它是否有特定的模式名称。。它被称为module pattern。

见this SO-question关于立即函数调用

我想借用 Raynos 的回答：很多这些“模式”（它们不是真正的模式）是个人喜好。

您可能有兴趣阅读有关原型模式的更多信息 - javascript 的基础 - this 可能是一个好的开始。

Answer 3

这不是揭示模块模式。模块模式允许您通过将公共成员包装在 return 块中来模拟 JS 中的私有成员。

对我来说，它只是带有命名空间的 JS（命名空间为 JS_SNAKE）。