Répondre aux modifications avec Object.observe

Alex Danilo

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 afin de déclencher une sorte d'action, mais la plupart de ces techniques ne sont pas idéales pour diverses raisons, telles que les performances, etc.

Afin d'améliorer les performances des applications Web, une nouvelle méthode appelée Object.observe() a été proposée à TC39, l'organisme de normalisation qui supervise le développement d'ECMAScript (JavaScript).

Object.observe() vous permet d'ajouter un écouteur à tout objet JavaScript appelé chaque fois que cet objet ou ses propriétés sont modifiés.

Vous pouvez l'essayer dès maintenant dans la version 25 de Chrome Canary.

Pour tester cette fonctionnalité, vous devez activer l'indicateur Activer JavaScript expérimental dans Chrome Canary, puis redémarrer le navigateur. Cet indicateur se trouve sous "about:flags", comme illustré dans l'image ci-dessous:

Indicateurs Chrome.

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é, cela 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 en un seul appel à la fonction de rappel. Cela permet d'optimiser les rappels afin que votre code puisse effectuer beaucoup de manipulations JavaScript tout en ne traitant 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 très intéressant lors de l'observation de tableaux : si un certain nombre de modifications ont été apportées à un tableau, vous pouvez utiliser une bibliothèque d'aide Résumé des modifications pour créer un ensemble de modifications minimal. Ainsi, le JavaScript côté client n'a pas besoin d'analyser manuellement le tableau pour vérifier chaque élément.

Vous pouvez facilement itérer chaque modification en procédant comme 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. Le code ci-dessous présente quelques exemples de propriétés en cours de définition et le type associé.

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 intelligentes de surveillance se trouvent dans le moteur JavaScript, ce qui permet au navigateur de bien l'optimiser et de libérer votre code JavaScript pour qu'il puisse implémenter une fonctionnalité en tirant 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 est modifié. Pour ce faire, vous devez utiliser du code semblable à l'exemple ci-dessous.

Object.observe(beingWatched, function(){ debugger; });

Voici une excellente vidéo d'introduction qui explique en détail la méthode Object.observe().

Vous pouvez également consulter un excellent résumé descriptif ainsi qu'un exemple pratique.

L'organisme de normalisation TC39 souhaite obtenir des commentaires sur cette fonctionnalité, alors n'hésitez pas à l'essayer et dites-nous ce que vous en pensez.