0

JavaScript でいくつかのカスタム オブジェクトを作成しようとしていますが、適切な方法で作業を進めているかどうかわかりません。

「UserInterface」と「VolumeSlider」の 2 つのオブジェクトがあります。少し前まで、これら 2 つのオブジェクトは独立していましたが、メソッドによって結合されていました。代わりに、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');
    }
}

質問は 2 つあります。

  • これは、オブジェクトを作成して子を設定するのに適した方法ですか?
  • 明示的に通知する代わりに、UserInterface が VolumeSlider._volumeSlider の変更およびスライド イベントに応答できるようにしたいと考えています。これを達成するにはどうすればよいですか？
4

2 に答える 2

1

元の構造が扱いにくくなることはないと思います。このシナリオでは、JavaScriptの組み込みデータ構造が役立ちます。

複数のボリュームスライダーが必要な場合は、このビット_volumeSlider: null,を次のように変更するだけです。_volumeSliders: [],

参照によりスライダーが必要な場合は、に初期化_volumeSlidersしdictます。次に、でそれらを参照する_volumeSliders[selector]と、オブジェクトが得られます。

値を渡す関数の代わりに、親インスタンスへの参照を下に送信します。次に、と書くことができますparent.volume = value。

経験則として、私は堅実で論理的な階層構造を堅持しています。アーキテクチャを変更しないでください。スコープ参照を作成するだけです。この場合、親スコープへの参照。作成されているオブジェクトのソースを見つけるためにgrepしなければならない可能性があるため、最初の回答者のメソッドは使用しません。

最初の回答者はいくつかの良いアイデアを持っています。jQuery要素参照の設定など、繰り返される特定のパターンに気付く場合があります。私は通常、これらの種類の繰り返されるパターンに気付くまで待ってから、抽象化してそれを乾かします。たとえば、Flambinoが提案したような基本クラスですUIElement。

于 2012-06-11T06:51:47.457 に答える
1

これは、オブジェクトを作成して子を設定するのに適した方法ですか?

それが機能する場合、それは「大丈夫」です:)
しかし、真剣に、そのようなものを設定する方法は事実上無限にあります。あなたのニーズに大きく依存します。

ただし、たとえば、複数のスライダーが必要な場合、コードは扱いにくくなります。

明示的に通知する代わりに、UserInterface が VolumeSlider._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

Alternatively, you could go the "Unobtrusive JavaScript"-way and have special class names and data- attributes, that would declare how and where an element fits in the UI. For instance

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

Could be found along with all the other UI elements using $(".ui-element").each ... after which its attributes could be parsed to mean that it should be made into a slider called "volumeSlider", and its slide/change events should call setVolume... Et cetera.

Again, many, many ways of going about it.

于 2012-06-11T05:35:29.593 に答える