TimedObserver

TimedObserver类可以周期性的调用callback方法监视表单元素的变化,注意callback方法只有表单或者表单元素的值发生变化的时候才会被调用,即在一个周期内发生了变化就会调用callback,否则等下个周期表单或者表单元素的变化

new Form.Element.Observer(element, frequency, callback), 对于表单元素,callback函数有两个参数(elment,value),element是Form.Element制向当前元素,value是Form.Element.getValue()的结果,frequency为周期(单位:s)

new Form.Element.Observer(
   'myelement', //The ID of the Element
   0.2, // 周期0.2s,每隔0.2s会调用callback函数
   function(el, value){
       alert('The form control has changed value to: ' + value)
      }
)

FormObserver:new Form.Observer(element,frequency,callback),对于表单,callbck方法参数为(form,value),此处的value是调用Form.serialize()的结果

new Form.Observer('example', 0.3, function(form, value){
      $('msg').update('Your preferences have changed. Resubmit to save').style.color = 'red';
      form.down().setStyle({ background:'lemonchiffon', borderColor:'red' }) ;
})

$('example').onsubmit = function() {
     $('msg').update('Preferences saved!').style.color = 'green' ;
     this.down().setStyle({ background:null, borderColor:null }) ;
     return false ;
}

TimedObserver的实现

//先了解Abstract
var Abstract = new Object();//Abstract 本身是一个对象,不能声明为实例,可认为是"抽象类"
/*--------------------------------------------------------------------------*/

Abstract.TimedObserver = function() {}
Abstract.TimedObserver.prototype = {
    initialize: function(element, frequency, callback) {
    this.frequency = frequency;
    this.element = $(element);
    this.callback = callback;
    this.lastValue = this.getValue();//lastValue记录着上一个周期的值
    this.registerCallback();
},

registerCallback: function() {
setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
},

onTimerEvent: function() {
var value = this.getValue();
var changed = ('string' == typeof this.lastValue && 'string' == typeof value
? this.lastValue != value : String(this.lastValue) != String(value));
if (changed) {//只有改变才调用回调函数
this.callback(this.element, value);
this.lastValue = value;//保存lastValue
         }
     }
}

Form.Element.Observer = Class.create();
Form.Element.Observer.prototype = Object.extend(new Abstract.TimedObserver(), {/*继承了Abstract.TimedObserver类*/
getValue: function() {//覆盖了getValue()
return Form.Element.getValue(this.element);
}
});

Form.Observer = Class.create();
Form.Observer.prototype = Object.extend(new Abstract.TimedObserver(), {
getValue: function() {
return Form.serialize(this.element);
}
});

/*--------------------------------------------------------------------------*/

Abstract.EventObserver = function() {}
Abstract.EventObserver.prototype = {
initialize: function(element, callback) {
this.element = $(element);
this.callback = callback;

this.lastValue = this.getValue();
if (this.element.tagName.toLowerCase() == 'form')
this.registerFormCallbacks();
else
this.registerCallback(this.element);
},

onElementEvent: function() {
var value = this.getValue();
if (this.lastValue != value) {
this.callback(this.element, value);
this.lastValue = value;
}
},

registerFormCallbacks: function() {
Form.getElements(this.element).each(this.registerCallback.bind(this));
},

registerCallback: function(element) {
if (element.type) {
switch (element.type.toLowerCase()) {
case 'checkbox':
case 'radio':
Event.observe(element, 'click', this.onElementEvent.bind(this));
break;
default:
Event.observe(element, 'change', this.onElementEvent.bind(this));
break;
}
}
}
}

Form.Element.EventObserver = Class.create();
Form.Element.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), {
getValue: function() {
return Form.Element.getValue(this.element);
}
});

Form.EventObserver = Class.create();
Form.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), {
getValue: function() {
return Form.serialize(this.element);
}
});