javascript - 变量更新时的JavaScript回调

Question

我目前正在使用HTML5和Javascript开发游戏。现在，我正在添加声音，并且还想要经典的“打开/关闭音乐”和“打开/关闭声音”按钮。我不想跟踪所有Audio对象，并且每次设置这些按钮之一时都在它们上循环，因此我声明了两个全局 bool(boolean) 值，即音乐和声音，都默认为true。当它们为true时，它们各自的Audio对象播放，而为false时，它们不播放。

使用简单的if语句，这很容易在对象创建上完成。但是，如果我要在创建后更改对象的状态，则如果用户更改了任何设置，则将带来不便。我希望能够对 bool(boolean) 值进行回调，有效地说:(伪代码)

var music = true;

class Music() {
    this.audio = new Audio(fileName);

    music.onUpdate(function() {
        if(music) {
            this.audio.play();
        } else {
            this.audio.pause();
        }
    }

    if(music) {
        this.audio.play();
    }
}

此外，如果我可以级联它们，那将更好，以便可以将多个回调注册到同一变量。我知道这不是需要定期进行的事情，但是在完全重写项目的这一部分之前，是否可以使用一种简单的语言功能来实现此功能？

谢谢

Answer 1

您可以将变量包装在实现简单事件处理机制的对象中，下面是一个示例:

var variable = {
  _value: true,
  set: function(value) {
    if (value !== this._value) {
      this._value = value;
      for (var i = 0; i < this._callbacks.length; i++) {
        this._callbacks[i](value);
      }
    }
  },
  get: function() { return this._value; },

  _callbacks: [],
  onChange: function(callback) {
    this._callbacks.push(callback);
  },
  offChange: function(callback) {
    // Find the callback and remove it from the _callbacks array.
    // If !callback, this._callbacks = [];
  }
}

// Usage:
variable.onChange(function(value) { console.log(value); });

variable.set(false); // 'false' logged to the console
variable.set(false); // nothing is logged to the console

您可以使用onChange方法添加多个侦听器。当值更改时，将全部调用它们。您可以使用offChange方法删除事件侦听器。我添加它是为了完整性。

您可以使用支持Observable Objects的库来立即使用。如果您四处看看，有很多可用的功能，但是还包括许多您可能不需要的功能。