맞춤 개체가 하위 맞춤 개체의 이벤트를 수신하는 방법?

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

내 물건을 만들고 아이들을 키우는 것은 괜찮습니까? 그것이 작동하는 경우

, 그것은 :)
을 "괜찮아"입니다하지만 진지, 그런 일을 설정하는 방법의 무한한 수는 실질적으로 존재한다. 당신의 필요에 아주 달려 있습니다.

나는, 예를 들어, 1 개 이상의 슬라이더있을 필요가있는 경우 코드가 다루기 될 것이라고하지만, 말할 것이다.

---

난 후 UserInterface 대신 명시 적으로 말 할 필요없이 VolumeSlider._volumeSlider의 변화와 슬라이드 이벤트에 응답 할 수 있도록하고 싶습니다. 어떻게 이것을 성취 할 수 있습니까?

나는 단지 VolumeSlider 개체를 건너 뛰었을 것입니다. 이것은 생성자 ("클래스")가 아니므로 #VolumeSlider 요소에 대해 단일 용도로 사용되고 하드 코딩되어 있습니다. 또한 코드에서 실제로는 을 수행하지 않습니다.을 모두 수행하십시오. 중산층 인 것처럼 보입니다. 당신이 생각할 당신이 필요로하는 어떤 목적 슬라이더의 X 번호를 만들 수 있습니다이와

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

:

여기에 대안이다. 별도의 일회용 VolumeSlider 개체가 없습니다. 모든 것은 UserInterface 개체에서 처리됩니다. 물론

은, 그 자체가 최고의 생각되지 않을 수도 있지만,이 간단한 목적으로 괜찮아요. 그러나 buildSlider을 좀 더 일반적인 UIElements 개체로 추출 할 수 있습니다. 그것은 당신이 "겸손한 자바 스크립트"웨이 가서 방법과 장소 요소가 UI에 맞는 선언 할 특별한 클래스 이름과 data- 속성을 가질 수

또는 등, buildSlider, buildButton 같은 방법을 가질 수있다.예를 들어

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

는 "이 volumeSlider라는"라는 슬라이더로 만들어, 그 슬라이드/변경되어야 함을 의미하는 것으로 그 속성을 구문 분석 할 수있는 후 $(".ui-element").each ...를 사용하는 다른 모든 UI 요소와 함께 볼 수 있습니다 이벤트는 setVolume ... 등으로 전화해야합니다.

다시 말하지만, 많은 방법이 있습니다.

Answer 2

나는 원래 구조가 전혀 다루기 힘들지 않을 것이라고 생각합니다. 이 시나리오에서는 JavaScript의 기본 제공 데이터 구조가 도움이 될 것입니다. 두 개 이상의 볼륨 슬라이더가 필요한 경우

, 단순히 참조로 슬라이더를해야하는 경우, _volumeSliders: [],

이 비트 _volumeSlider: null,를 변경 dict에 _volumeSliders를 초기화합니다. 그런 다음 _volumeSliders[selector]에 의해 그들을 참조하십시오, 당신은 당신의 개체가있어.

값을 전달하는 함수 대신 상위 인스턴스에 대한 참조를 아래로 보냅니다. 그럼 당신은 쓸 수 있습니다, parent.volume = value.

일반적으로 솔리드, 논리적, 계층 적 구조를 엄격하게 준수합니다. 아키텍처를 변경하지 말고 단순히 범위 참조를 만드십시오. 이 경우 상위 범위에 대한 참조입니다. 생성되는 객체의 소스를 찾기 위해 grep해야 할 수도 있기 때문에 첫 번째 응답자의 메소드를 사용하지 않을 것입니다.

첫 번째 답변자는 좋은 아이디어를 가지고 있습니다. 반복되는 특정 패턴이 나타날 수 있습니다. jQuery 요소 참조 설정. 나는 전형적으로 이런 종류의 반복 된 패턴을 알아 차릴 때까지 기다렸다가 DRY 추상화로 그 패턴을 기다린다. Flambino가 제안한 기본 클래스 (예 : UIElement.