javascript - 如何让自定义对象监听子自定义对象的事件？

Question

我正在尝试在 JavaScript 中创建几个自定义对象，但我不确定我是否以正确的方式处理事情。

我有两个对象:“UserInterface”和“VolumeSlider”。直到刚才，这两个对象还是独立的，但通过方法耦合。我决定 UserInterface 应该“拥有”一个 VolumeSlider。

所以:

UserInterface = {
    _volumeSlider: null,

    initialize: function () {
        this._volumeSlider = VolumeSlider; //TODO: Should this be a new volumeSlider();
        this._volumeSlider.initialize();

        //I want to setup a listener for VolumeSlider's change-volume events here.
    }
}

VolumeSlider = {
    _volumeSlider: null,

    initialize: function () {
        this._volumeSlider = $('#VolumeSlider');
        var self = this;
        this._volumeSlider.slider({
            orientation: 'horizontal',
            max: 100,
            min: 0,
            value: 0,
            slide: function (e, ui) {
                self.passVolumeToPlayer(ui.value);
            },
            change: function (e, ui) {
                self.passVolumeToPlayer(ui.value);
            }
        });
    },

    passVolumeToPlayer: function (volume) {
        if (volume != 0)
            UserInterface.updateMuteButton(volume);
        else
            UserInterface.updateMuteButton('Muted');
    }
}

问题有两个:

• 这是创建对象和设置子对象的好方法吗？
• 我希望 UserInterface 能够响应 VolumeSlider._volumeSlider 的更改和滑动事件，而不必明确告知。我怎样才能做到这一点？

Answer 1

Is this an alright way to be creating my objects and setting up children?

如果有效，那就“没问题”:)
但严肃地说，实际上有无数种方法可以设置类似的东西。很大程度上取决于您的需求。

不过，我要说的是，如果需要超过 1 个 slider ，您的代码将会变得笨拙。

<小时/>

I would like UserInterface to be able to respond to VolumeSlider._volumeSlider's change and slide events instead of having to be explicitly told. How can I go about accomplishing this?

我可能会跳过 VolumeSlider目的。它不是构造函数(“类”)，因此它是一次性使用的并且硬编码到 #VolumeSlider元素。另外，从您的代码来看，它实际上并没有做那么多。看来只是一个中间人。

这是一个替代方案:

UserInterface = {
  initialize: function () {
    // Internal function to create a horizontal 0-100 slider
    // Takes a selector, and a function that will receive the
    // value of the slider
    function buildSlider(selector, callback) {
      var element = $(selector);
      var handler = function (event, ui) { callback(ui.value); };
      element.slider({
        orientation: 'horizontal',
        max:   100,
        min:   0,
        value: 0,
        slide:  handler,
        change: handler
      });
      return element;
    }

    // We probably want to bind the scope of setVolume, so use $.proxy
    this.volumeSlider = buildSlider("#VolumeSlider", $.proxy(this.setVolume, this));

    // Want more sliders? Just add them
    // this.speedSlider = buildSlider("#SpeedSlider", $.proxy(this.setSpeed, this));
    // this.balanceSlider = buildSlider("#BalanceSlider", $.proxy(this.setBalance, this)); 
    // etc...
  },

  setVolume: function (value) {
    if( value != 0 ) {
      // not muted
    } else {
      // muted
    }
  }
}

有了这个，您可以为您需要的任何目的创建 X 个 slider 。并且没有单独的一次性使用VolumeSlider目的;一切都在 UserInterface 中处理对象。

当然，这本身可能不是最好的主意，但对于这个简单的目的来说，这是可以的。但是，您可能想要提取 buildSlider进入更一般的UIElements目的。它可能有类似 buildSlider 的方法, buildButton等

或者，您可以采用“不显眼的 JavaScript”方式并使用特殊的类名和 data-属性，它将声明元素如何以及在 UI 中的位置。例如

<div id="volumeSlider" class="ui-element" data-role="slider" data-action="setVolume">...

可以使用 $(".ui-element").each ... 与所有其他 UI 元素一起找到之后它的属性可以被解析为意味着它应该被制作成一个名为“volumeSlider”的 slider ，并且它的滑动/更改事件应该调用 setVolume ...等等。

同样，有很多很多的方法来解决这个问题。