Views 와 Widgets사이에 커플링을 막고자 사용함.
뷰의 상하의 간에 메시지를 주고 받고 해야 한다.
일반적인 옵저버 패턴.
Broadcasting and Listening
eventHandlerA.on('A', function(data){ alert(data.msg); }); // alerts 'ALERT!' eventHandlerA.emit('A', message);//trigger
emit나 trigger나 같지만, emit는 밖에서 호출할 때, trigger는 안에서 호출할 때.
Piping
이벤트를 아래로 흐르게 해준다.(like 캡처링)
eventHandlerA.pipe(eventHandlerB).pipe(eventHandlerC);
eventHandlerC.on('A', function(data){alert(data.msg)}); // alerts 'ALERT!'
eventHandlerA.emit('A', message);
Subscribing
이벤트를 위로 올려준다.(like 버블링)
eventHandlerC.subscribe(eventHandlerB);
eventHandlerB.subscribe(eventHandlerA);
eventHandlerC.on('A', function(data){alert(data.msg)}); // alerts 'ALERT!'
eventHandlerA.emit('A', message);
Filtering
이벤트를 중간에 필터링 해줌.
var myFilter = new EventFilter(function(type, data) {
return data && (data.msg === 'ALERT!'); //true or false
});
eventHandlerA.pipe(myFilter).pipe(eventHandlerB);
eventHandlerB.on('A', function(data){
alert('piped message: ' + data.msg);
});
Mapping
라우팅하듯이 특정 eventHandler에 이벤트를 전달한다.(개인적으론 불필요하다고 생각)
var myMapper = new EventMapper(function(type, data) {
return (data && (data.direction === 'x')) ? eventHandlerB : eventHandlerC;
});
eventHandlerA.pipe(myMapper);
eventHandlerB.on('A', function(data){
alert('B direction : ' + data.direction);
});
eventHandlerC.on('A', function(data){
alert('C direction : ' + data.direction);
});
eventHandlerA.trigger('A', {direction : 'x'}); // pipes to eventHandlerB
eventHandlerA.trigger('A', {direction : 'y'}); // pipes to eventHandlerC
pipe만 가능하다.(당연한다 subscribe가 되려면 mapping에서 이벤트를 받아야 함)
Arbitration
Mapping하고 비슷한 느낌인데 mode별로 이벤트를 등록할 수 있다.
한번에 하나의 모드만 가능하고 setMode로 하면 해당 모드만 동작.
이것도 왜 있어야 하는지 모르겠다.
var eventArbiter = new EventArbiter();
eventArbiter.forMode('routeA').on('A', function(data){
alert('subscribed message: ' + data.msg);
});
eventArbiter.forMode('routeB').on('B', function(data){
alert('subscribed message: ' + data.msg);
});
eventArbiter.setMode('routeA');
eventArbiter.forMode('routeA').emit('A', message); // alerts 'ALERT!'
eventArbiter.forMode('routeB').emit('B', message); // does nothing. Mode is not set.
eventArbiter.setMode('routeB');
eventArbiter.forMode('routeA').emit('A', message); // does nothing. Mode is not set.
eventArbiter.forMode('routeB').emit('B', message); // alerts 'ALERT!'
Event Handling Inside a Widget
자체적으로 몇가지 룰이 있다.
External to a Widget:
widget.trigger : the interface to talk to a widget
widget.on : the interface to listen to a widget
widget.pipe : the interface to pipe from a widget
widget.subscribe : the interface to subscribe from a widget
Internal to a Widget:
receive events via widget.eventInput
broadcast events via widget.eventOutput
widget.emit는 없음.
//아래와 같이 인풋 핸들러를 등록.
EventHandler.setInputHandler(widget, eventHandlerA);
eventHandlerA.on('B', function(data){alert(data.msg)});
widget.trigger('B', message);
Listening
setInputHandler으로 등록한 놈이 받음
// Child widget
function Child(){
// setup input and output handlers
this.eventOutput = new EventHandler();
this.eventInput = new EventHandler();
EventHandler.setInputHandler(this, this.eventInput);
EventHandler.setOutputHandler(this, this.eventOutput);
this.eventInput.on('hires tutor', function(){
alert('Accepted to Harvard');
}.bind(this));
}
// Parent widget
function Parent(){
// setup input and output handlers
this.eventOutput = new EventHandler();
this.eventInput = new EventHandler();
EventHandler.setInputHandler(this, this.eventInput);
EventHandler.setOutputHandler(this, this.eventOutput);
this.child = new Child();
this.eventInput.on('bad report card', function(){
this.child.trigger('hires tutor');
}.bind(this));
}
var parent = new Parent();
parent.trigger('bad report card');
Broadcasting
setOutputHandler으로 등록한 얘가 전달.
EventHandler.setInputHandler(widget, eventHandlerA);
eventHandlerA.on('B', function(data){alert(data.msg)});
widget.trigger('B', message);
보면서 느낀건 전체적으로 과한 느낌이 있다.
너무 많다. 이런 경우 나중에 이벤트로만 넣으면 데이터가 흘러갈 때 문제가 있을 것 같다.
특히 mapping은 불필요. 데이터가 deep copy되지 않기 때문에 중간에 값을 바꾸면 디버깅의 거의 불가능하고 경험상 이벤트 종류는 너무 할 정도로 간단하게 가야 한다. 복잡하게 되면 나중에 엄청 고생함.
