이번엔 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만 폼이냐 폼엘리먼트냐에 따라 다르게 구현하였군요.

예제는 굳이 없어도 실행 데모를 한번만 보시면 이해하실 것 같습니다. [데모실행]