1

我正在编写一个画布赛车游戏，并计划使用事件来确定每个游戏对象何时初始化并准备好使用。首先，我尝试将事件侦听器添加到我的对象，但意识到它们只能附加到 html 元素。作为一种解决方法，我改为向窗口对象添加了一个侦听器。

对于我是否应该使用事件来解决这个问题，以及我应该查看任何常见的模式/方法，我将不胜感激？我打算阅读观察者模式，这似乎适合这种情况吗？

下面的代码片段显示了我目前正在做的事情。当 Track 对象的所有项目都被加载时，它会调度一个事件，该事件被附加到窗口对象的事件侦听器捕获。

主要的：

function game() {
  var loadCount = 0;
  var itemsToLoad  = 10; 

  window.addEventListener("finishedLoading", itemLoaded, false);      
  function itemLoaded(event) {
    loadCount++;
    if(loadCount >= itemsToLoad)
    {
      gameStateFunction = title;
    }
  }
}

跟踪对象：

function Track(name, bgTileSheet) {  
  this.backgroundImage = new Image();
  this.itemsLoaded = 0;
  this.itemsToLoad = 3;
  this.loadedEvent = new CustomEvent("finishedLoading", {
    detail: {
      objectType: "track"
    },
    bubbles: true,
    cancelable: false
  });

  this.centerPath = null;
}

Track.prototype.updateLoadProgress = function() {
  this.itemsLoaded++;
  if(this.itemsLoaded >= this.itemsToLoad)
  {
    dispatchEvent(this.loadedEvent);
  }
};

Track.prototype.init = function() {
  //calls loadItems() when XML data is ready
};

Track.prototype.loadItems = function() {
  this.loadBackground();
  this.loadMapDimensions();
  this.loadPaths();
};

Track.prototype.loadBackground = function() {
  var self = this;
  this.backgroundImage.addEventListener("load", 
    function() {
      self.updateLoadProgress();
    }, 
    false);     
  this.backgroundImage.src = Track.TILESHEET_DIR + this.bgTileSheet;
};
4

1 回答 1

0

是的，我会说事件是这样的方式。只是您必须放宽对事件的定义，使其不再是仅可附加到 HTML 元素的事件。

您最终将用于此类事情的大多数模式——观察者、订阅者、中介者，等等——将在另一种意义上使用一种人为的事件形式。

您可能想要研究的一件事是 jQuery 的延迟对象。这些通常与 AJAX 相关联，但也可以以非常有效的方式用于人为的主观事件。

几个月前我写了一篇关于这个的博客文章，展示了一种技术。

这是一个快速示例：

function SomeClass() {
    this.ready = false;
    this.deferred = $.Deferred();
}
SomeClass.prototype.makeReady = function() {
    this.ready = true;
    this.deferred.resolve();
}
var myInstance = new SomeClass();

//listen for ready
$.when(myInstance.deferred).done(function() { alert('object is ready!'); });

//after a while, let's say we're ready
setTimeout(function() { myInstance.makeReady(); }, 2000);

这里的超时只是模拟您设置对象的真实环境 - 执行 AJAX 请求、其他代码等等。

最后，虽然您确实不能直接将事件附加到对象，但您可以通过getters/setters将对象附加到对象属性。

于 2012-07-14T12:12:14.093 回答