Muchos frameworks de JavaScript que usan MVC o MDV deben responder a los cambios en los objetos que modelan el estado dentro de una aplicación web. Esta función es una parte fundamental de un modelo de vinculación de datos.
Existen varias formas diferentes de supervisar objetos JavaScript y propiedades DOM para activar algún tipo de acción, pero la mayoría de las técnicas no son ideales por varios motivos, como el rendimiento, etcétera.
Para mejorar el rendimiento de las aplicaciones web, se propuso un nuevo método llamado Object.observe() a TC39, el organismo de estándares que supervisa el desarrollo de ECMAScript (JavaScript).
Object.observe() te permite agregar un objeto de escucha a cualquier objeto JavaScript al que se le llame cada vez que ese objeto o sus propiedades cambien.
Puedes probarlo ahora en la versión 25 de Chrome Canary.
Para experimentar con esta función, debes habilitar la marca Habilitar JavaScript experimental en Chrome Canary y reiniciar el navegador. Puedes encontrar la marca en "about:flags", como se muestra en la siguiente imagen:
Este es un ejemplo simple de cómo configurar un observador en un objeto:
var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
// do something
}
Object.observe(beingWatched, somethingChanged);
Cuando se modifique el objeto "beingWatched", se activará la función de devolución de llamada "somethingChanged", que recibe un array de cambios que se aplicaron al objeto.
Por lo tanto, el motor de JavaScript puede almacenar en búfer una serie de cambios y pasarlos todos en una sola llamada a la función de devolución de llamada. Esto ayuda a optimizar las devoluciones de llamada para que tu código pueda realizar muchas manipulaciones de JavaScript, pero procesar solo algunas devoluciones de llamada agrupando las actualizaciones.
La función de devolución de llamada se activará cada vez que se agregue, modifique, borre o vuelva a configurar una propiedad.
Otra ventaja de observar los arrays es que, si se le hicieron varios cambios a un array, puedes usar una biblioteca de ayuda de Resumen de cambios para crear un conjunto de cambios mínimo, de modo que el código JavaScript del cliente no tenga que analizar el array de forma manual para verificar cada elemento.
Puedes iterar a través de cada cambio con bastante facilidad. Para ello, haz algo como lo siguiente en la función de devolución de llamada "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 propiedad type identifica lo que le sucedió al objeto. En el siguiente código, se pueden ver algunos ejemplos de propiedades que se establecen y el tipo asociado.
beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new
Lo mejor de esta técnica es que toda la inteligencia de supervisión se encuentra dentro del motor de JavaScript, lo que permite que el navegador la optimice bien y libere tu código JavaScript para implementar la funcionalidad que aprovecha esta función.
Otra función muy útil para el desarrollo es la capacidad de usar Object.observe() para activar el depurador cada vez que cambia un objeto. Para ello, usarías un código similar al siguiente ejemplo.
Object.observe(beingWatched, function(){ debugger; });
Este es un video introductorio sobre Object.observe() que lo explica en detalle.
También hay una descripción disponible y un ejemplo en funcionamiento aquí.
El organismo de estándares TC39 busca comentarios sobre esta función, así que pruébala y danos tu opinión.