De nombreux frameworks JavaScript utilisant MVC ou MDV doivent répondre aux modifications apportées aux objets qui modélisent l'état dans une application Web. Cette fonctionnalité est un élément fondamental d'un modèle de liaison de données.
Il existe plusieurs façons de surveiller les objets JavaScript et les propriétés DOM pour déclencher une action, mais la plupart des techniques ne sont pas idéales pour diverses raisons (performances, etc.).
Afin d'améliorer les performances des applications Web, une nouvelle méthode appelée Object.observe() a été proposée au TC39, l'organisme de normalisation qui supervise le développement d'ECMAScript (JavaScript).
Object.observe() vous permet d'ajouter un écouteur à n'importe quel objet JavaScript qui est appelé chaque fois que cet objet ou ses propriétés changent.
Vous pouvez déjà l'essayer dans la version 25 de Chrome Canary.
Pour tester cette fonctionnalité, vous devez activer l'option Enable Experimental JavaScript (Activer JavaScript expérimental) dans Chrome Canary, puis redémarrer le navigateur. Vous trouverez l'indicateur sous "about:flags", comme illustré dans l'image ci-dessous:
Voici un exemple simple de configuration d'un observateur sur un objet:
var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
// do something
}
Object.observe(beingWatched, somethingChanged);
Lorsque l'objet "beingWatched" est modifié, il déclenche la fonction de rappel "somethingChanged", qui reçoit un tableau des modifications appliquées à l'objet.
Le moteur JavaScript est donc libre de mettre en mémoire tampon un certain nombre de modifications et de les transmettre toutes en un seul appel à la fonction de rappel. Cela permet d'optimiser les rappels afin que votre code puisse effectuer de nombreuses manipulations JavaScript, mais ne traite que quelques rappels en regroupant les mises à jour.
La fonction de rappel est déclenchée chaque fois qu'une propriété est ajoutée, modifiée, supprimée ou reconfigurée.
Autre avantage de l'observation des tableaux : si un tableau a subi un certain nombre de modifications, vous pouvez utiliser une bibliothèque d'assistance Change Summary (Récapitulatif des modifications) pour créer un ensemble de modifications minimal, afin que le code JavaScript côté client n'ait pas à analyser manuellement le tableau pour vérifier chaque élément.
Vous pouvez itérer chaque modification assez facilement en effectuant quelque chose comme ce qui suit dans votre fonction de rappel "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 propriété type identifie ce qui est arrivé à l'objet. Vous trouverez ci-dessous quelques exemples de propriétés définies et de types associés.
beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new
L'avantage de cette technique est que toutes les fonctionnalités de surveillance se trouvent dans le moteur JavaScript, ce qui permet au navigateur de l'optimiser correctement et de libérer votre code JavaScript pour implémenter des fonctionnalités qui tirent parti de cette fonctionnalité.
Une autre fonctionnalité très intéressante pour le développement est la possibilité d'utiliser Object.observe() pour déclencher le débogueur chaque fois qu'un objet change. Pour ce faire, vous devez utiliser un code semblable à l'exemple ci-dessous.
Object.observe(beingWatched, function(){ debugger; });
Voici une excellente vidéo d'introduction sur Object.observe() qui vous explique en détail cette méthode.
Vous trouverez également un article descriptif et un exemple fonctionnel.
Le comité TC39 chargé des normes souhaite recueillir des commentaires sur cette fonctionnalité. N'hésitez donc pas à l'essayer et à nous faire part de vos impressions.