Il modello di eventi di jQuery può essere esteso anche ai tradizionali oggetti JavaScript. In tal senso è possibile monitorare lo stato di un oggetto applicando il tradizionale Observer Pattern.
Iniziamo con un semplice oggetto:
var Class = {
property: 'Test',
getProperty: function () {
return this.property;
},
setProperty: function (value) {
this.property = value;
}
};
Quando si imposta un nuovo valore per il membro property lo stato dell'oggetto cambia:
Class.setProperty('Bar');
console.log(Class.property); // 'Bar'
Possiamo monitorare tale stato aggiungendo un evento custom all'oggetto:
$(Class).on('change', function () {
if (this.property !== 'Test') {
console.log('Property changed');
} else {
console.log(this.property);
}
});
Il metodo .on() viene usato direttamente sull'oggetto tramite il wrapper $(). A questo punto dobbiamo inserire l'evento al momento della modifica della
proprietà:
setProperty: function(value) {
this.property = value;
$(Class).triggerHandler('change');
}
Esempio:
console.log(Class.getProperty()); // 'Test'
Class.setProperty('Bar'); // 'Property changed'