Javascript 如何让自定义对象侦听子自定义对象'；什么事？

我正在尝试用JavaScript创建几个自定义对象，我不确定我是否以正确的方式进行操作

我有两个对象：“UserInterface”和“VolumeSlider”。直到不久前，这两个物体是独立的，但通过各种方法耦合在一起。我决定用户界面应该有一个卷滑动器

因此：

问题有两个方面：

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

这是创建对象和设置子对象的好方法吗

如果有效，则“没问题”：）
但是说真的，实际上有无数种方法可以建立这样的东西。这在很大程度上取决于你的需要

不过，我要说的是，如果需要不止一个滑块，那么您的代码将非常笨拙

---

我希望UserInterface能够响应VolumeSlider.\u VolumeSlider的更改和幻灯片事件，而不必明确告知。我怎样才能做到这一点

我可能会跳过

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个滑块。而且没有单独的单一用途

VolumeSlider

对象；一切都在

UserInterface

对象中处理

当然，这本身可能不是最好的主意，但对于这个简单的目的来说，这没关系。但是，您可能希望将

buildSlider

提取到更通用的

UIElements

对象中。它可以有像

buildSlider

，

buildButton

等方法

或者，您可以采用“不引人注目的JavaScript”方式，使用特殊的类名和

data-

属性，这些属性将声明元素在UI中的放置方式和位置。比如说

…

可以使用

$（“.UI元素”）与所有其他UI元素一起找到。每个…

之后，可以解析其属性，以表示应将其制作成一个名为“volumeSlider”的滑块，其滑动/更改事件应调用

setVolume

。。。等等

---

再说一次，有很多很多方法。我不认为你原来的结构会变得很笨拙。JavaScript的内置数据结构在这种情况下会有所帮助

如果需要多个卷滑块，只需将此位

\u volumeSlider:null，

更改为

\u volumeSliders:[]，

如果需要参照滑块，请将

\u volumeSliders

初始化为

dict

。然后通过

\u volumeSliders[selector]

引用它们，就得到了对象

不使用向上传递值的函数，而是向下发送对父实例的引用。然后您可以编写，

parent.volume=value

根据经验，我严格遵守一个坚实的、逻辑的、层次结构。永远不要改变您的体系结构，只需创建范围引用。在本例中，是对父范围的引用。我不会使用第一个回答者的方法，因为我可能需要四处搜索以找到所创建对象的来源

第一个回答者有一些好主意。您可能会注意到某些重复的模式，例如设置jQuery元素引用。我通常会等到我注意到这些重复的模式，然后用一个抽象来描述它，例如一个基类，就像Flambino建议的那样，例如

UIElement

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