L'Observer Pattern si basa sul concetto di eventi. Quando un evento ha luogo, bisogna che questo evento venga comunicato e che si provveda ad eseguire delle azioni in base a questo evento. Prendiamo l'esempio di un blog: quando un lettore si iscrive, bisogna che venga aggiunto ad una lista di lettori e che il contatore del blog venga aggiornato in modo tale da informare l'autore che ora il blog ha un dato numero di lettori (come avviene per i feed RSS). Questo è un esempio ideale per spiegare le basi dell'Observer Pattern.
Abbiamo un oggetto Blog:
var Blog = new function() {
}();
Creiamo il nome del blog e una lista vuota di lettori:
var subscribers = [];
var blogName = 'Blog';
Ora creiamo un'azione per aggiungere un lettore (oggetto Subscriber) alla lista di lettori:
var addSubscriber = function(subscriber) {
if(typeof subscriber === 'object' && subscriber.constructor.toString().indexOf('Subscriber') != -1) {
subscribers.push(subscriber);
}
};
Un certo controllo sui dati è necessario per verificare che il parametro passato sia un oggetto di tipo Subscriber. Con questo avviene l'azione o evento dell'iscrizione alla lista. Ora occorre notificare tale iscrizione e aggiornare il conteggio dei lettori del blog:
var notify = function() {
var len = subscribers.length;
var readers = (len == 1) ? 'lettore' : 'lettori';
console.log(blogName + ' ha ' + len + ' ' + readers);
};
Ovviamente vogliamo anche sapere i nomi dei nostri lettori, quindi creiamo un ulteriore metodo di supporto:
var getSubscribers = function() {
if(subscribers.length > 0) {
var i, len = subscribers.length, list = 'Elenco degli iscritti: ';
for(i = 0; i < len; i += 1) {
list += subscribers[i].name + ' ';
}
}
console.log(list);
};
Infine, il nostro oggetto "lettore", ossia Subscriber. Il suo metodo pubblico subscribe() richiama i metodi privati addSubscriber() e notify() che inseriscono tale oggetto nella lista e notificano il numero di lettori ad iscrizione avvenuta:
function Subscriber(name) {
this.name = name;
this.subscribe = function() {
addSubscriber(this);
notify();
}
};
Testiamo il tutto come segue:
this.init = function() {
var subscriber = new Subscriber('Paolo');
subscriber.subscribe();
var subscriber2 = new Subscriber('Franco');
subscriber2.subscribe();
getSubscribers();
};
E invocando l'ultimo metodo citato:
Blog.init();
Otteniamo il seguente output nella console JavaScript:
Blog ha 1 lettore Blog ha 2 lettori Elenco degli iscritti: Paolo Franco
Ovviamente è possibile creare esempi molto più complessi di questo, ma l'importante è afferrare il concetto base di eventi e risposta agli eventi.