이번엔 TimedObserver 클래스에 대해 알아보죠.
이 클래스는 Abstract.TimedObserver를 상속받아 구현되어있는 클래스입니다. 그 이전에 Abstract.TimedObserver는 PeriodicalExecuter를 상속받고 있죠. 이쯤 되면 무엇을 하는 녀석일지 감이 오시죠?
기본 모토는 분명히 주기적으로 어떤 콜백 함수를 실행하는 녀석이겠군요. 답부터 말씀 드리자면 폼이나 혹은 폼안의 특정 엘리먼트의 값 변동을 추적하는 일을 합니다.
값을 계속해서 저장해 놓았다가 값이 변경되면 이전의 값과 비교하여 값이 달라졌을 경우 콜백 함수를 실행하게 되죠.
[code]new Form.Element.Observer(
‘myelement’,
0.2, // 0.2초
function(el, value){
alert(‘폼의 myelement의 값이 변경되었음: ‘ + value)
}
)[/code]
감이 오시나요? 콜백 함수의 첫번째 인자로는 이벤트가 발생한 엘리먼트 혹은 폼이 넘어오게 되고 두번째로는 변경된 값이 넘어옵니다.
Abstract.TimedObserver를 좀 볼까요?
[code]Abstract.TimedObserver = Class.create(PeriodicalExecuter, {
// 생성자
initialize: function($super, element, frequency, callback) {
// PeriodicalExecuter의 생성자에 값을 넘김
$super(callback, frequency);
this.element = $(element);
this.lastValue = this.getValue();
},
// 매번 실행될 메서드
execute: function() {
// getValue메서드를 이용하여 해당 엘리먼트의 값을 가져옴
var value = this.getValue();
// lastValue와 value가 문자열인지 확인하여 아닐경우 강제 변환
// lastValue와 value값이 다르면 콜백함수 호출
if (Object.isString(this.lastValue) && Object.isString(value) ?
this.lastValue != value : String(this.lastValue) != String(value)) {
this.callback(this.element, value);
// lasterValue값을 value값으로 바꿈
this.lastValue = value;
}
}
});[/code]
Abstract를 애써 붙인것이 추상 클래스로 사용하고 싶은 모양이군요. Prototype을 보다보면 느끼는거지만 되도않는 언어를 가지고 별의별걸 다 구현해서 나름 의미까지 부여해 가며 만들었다는것에 놀라움을 느끼게 됩니다.
[code]Form.Element.Observer = Class.create(Abstract.TimedObserver, {
getValue: function() {
// 폼 엘리먼트의 값을 가져옴
return Form.Element.getValue(this.element);
}
});
Form.Observer = Class.create(Abstract.TimedObserver, {
getValue: function() {
// 폼의 전체 엘리먼트 값을 파라미터 형식으로 가져옴
return Form.serialize(this.element);
}
});[/code]
위를 보니 getValue만 폼이냐 폼엘리먼트냐에 따라 다르게 구현하였군요.
예제는 굳이 없어도 실행 데모를 한번만 보시면 이해하실 것 같습니다. [데모실행]