Javascript 确定对象何时准备就绪。我应该使用事件吗?

Javascript 确定对象何时准备就绪。我应该使用事件吗?,javascript,events,design-patterns,Javascript,Events,Design Patterns,我正在编写一个帆布赛车游戏,并计划使用事件来确定每个游戏对象何时初始化并准备好使用。首先,我尝试将事件侦听器添加到对象中,但意识到它们只能附加到html元素。作为一种解决方法,我改为向窗口对象添加了一个侦听器 如果您能告诉我是否应该使用事件解决这个问题,以及是否有任何常见的模式/方法,我将不胜感激?我要读一读观察者模式,这看起来适合这个场景吗 下面的代码片段显示了我目前正在做什么。加载Track对象的所有项时,它将发送一个事件,该事件由连接到window对象的事件侦听器捕获 主要内容: 轨迹对象

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

如果您能告诉我是否应该使用事件解决这个问题,以及是否有任何常见的模式/方法,我将不胜感激?我要读一读观察者模式,这看起来适合这个场景吗

下面的代码片段显示了我目前正在做什么。加载Track对象的所有项时,它将发送一个事件,该事件由连接到window对象的事件侦听器捕获

主要内容:

轨迹对象:

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;
};

是的,我想说的是,事件就是这样的事情。只是您必须将事件的定义从仅可附加到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请求、其他代码等等

最后,虽然确实不能直接将事件附加到对象,但可以通过将对象附加到对象属性

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);