Molti framework JavaScript che utilizzano MVC o MDV devono rispondere alle modifiche agli oggetti che modellano lo stato all'interno di un'applicazione web. Questa funzionalità è una parte fondamentale di un modello di associazione dati.
Esistono diversi modi per monitorare gli oggetti JavaScript e le proprietà DOM per attivare una sorta di azione, ma la maggior parte delle tecniche non è ideale per vari motivi, come il rendimento e così via.
Per migliorare il rendimento delle applicazioni web, è stato proposto un nuovo metodo chiamato Object.observe() al TC39, l'organismo di standardizzazione che supervisiona lo sviluppo di ECMAScript (JavaScript).
Object.observe() ti consente di aggiungere un ascoltatore a qualsiasi oggetto JavaScript che viene chiamato ogni volta che l'oggetto o le sue proprietà cambiano.
Puoi provarlo subito nella versione 25 di Chrome Canary.
Per provare questa funzionalità, devi attivare il flag Attiva JavaScript sperimentale in Chrome Canary e riavviare il browser. Il flag si trova in "about:flags", come mostrato nell'immagine seguente:
Ecco un semplice esempio di come configurare un osservatore su un oggetto:
var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
// do something
}
Object.observe(beingWatched, somethingChanged);
Quando l'oggetto "beingWatched" viene modificato, viene attivata la funzione di callback "somethingChanged", che riceve un array di modifiche applicate all'oggetto.
Di conseguenza, il motore JavaScript è libero di memorizzare una serie di modifiche e di passarle tutte in una singola chiamata alla funzione di callback. Questo contribuisce a ottimizzare i callback in modo che il codice possa eseguire molte manipolazioni di JavaScript, ma elaborare solo alcuni callback raggruppando gli aggiornamenti.
La funzione di callback viene attivata ogni volta che una proprietà viene aggiunta, modificata, eliminata o riconfigurata.
Un'altra funzionalità molto interessante per l'osservazione degli array è che, se a un array sono state apportate diverse modifiche, puoi utilizzare una libreria di utilità Change Summary per creare un set di modifiche minimo, in modo che il codice JavaScript lato client non debba eseguire manualmente la scansione dell'array per controllare ogni elemento.
Puoi eseguire l'iterazione di ogni modifica abbastanza facilmente, ad esempio nel seguente modo nella funzione di callback "somethingChanged":
function whatHappened(change) {
console.log(change.name + " was " + change.type + " and is now " + change.object[change.name]);
}
function somethingChanged(changes) {
changes.forEach(whatHappened);
}
La proprietà type identifica cosa è successo all'oggetto. Alcuni esempi di proprietà impostate e del tipo associato sono riportati nel codice seguente.
beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new
Il vantaggio di questa tecnica è che tutte le funzionalità di monitoraggio sono all'interno del motore JavaScript, il che consente al browser di ottimizzarlo bene e di liberare il codice JavaScript per implementare le funzionalità che sfruttano questa funzionalità.
Un'altra funzionalità davvero eccezionale per lo sviluppo è la possibilità di utilizzare Object.observe() per attivare il debugger ogni volta che un oggetto cambia. A tal fine, utilizza un codice simile a quello riportato di seguito.
Object.observe(beingWatched, function(){ debugger; });
Ecco un ottimo video introduttivo su Object.observe() che lo spiega in dettaglio.
È inoltre disponibile una bella descrizione e un esempio funzionante qui.
Il TC39, l'organismo di standardizzazione, sta cercando feedback su questa funzionalità, quindi provala e facci sapere cosa ne pensi.