Muchos frameworks de JavaScript que usan MVC o MDV necesitan 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 maneras diferentes de supervisar los objetos JavaScript y las propiedades del 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.
A fin de mejorar el rendimiento de las aplicaciones web, se propuso para TC39 un nuevo método llamado Object.observe(), el cuerpo de estándares que supervisa el desarrollo de ECMAScript (JavaScript).
Object.observa() te permite agregar un receptor a cualquier objeto JavaScript al que se llama cada vez que ese objeto o sus propiedades cambian.
Puedes probarlo ahora en Chrome Canary versión 25.
Para experimentar con esta función, debes habilitar la marca Habilitar JavaScript experimental en Chrome Canary y reiniciar el navegador. La marca se puede encontrar en "about:flags", como se muestra en la imagen a continuación:
A continuación, se muestra un ejemplo sencillo 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 una matriz de cambios que se aplicaron al objeto.
Por lo tanto, el motor de JavaScript tiene la libertad de 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 mucha manipulación de JavaScript y procesar solo algunas devoluciones de llamada mediante la agrupación de las actualizaciones en lotes.
La función de devolución de llamada se activará cada vez que se agregue, modifique, borre o reconfigure una propiedad.
Otro aspecto muy bueno al observar arrays es que, si se realizaron varios cambios en uno, puedes usar una biblioteca auxiliar de Resumen de cambios para crear un conjunto de cambios mínimo, de modo que JavaScript del cliente no tenga que escanear manualmente el array para verificar cada elemento.
Puedes iterar cada cambio con bastante facilidad. Para ello, haz algo como lo siguiente en tu 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 las 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 todas las funciones inteligentes de supervisión están dentro del motor de JavaScript, lo que permite que el navegador la optimice correctamente y libere su JavaScript para implementar la funcionalidad que saca provecho de esta función.
Otra función excelente para el desarrollo es la capacidad de usar Object.observa() para activar el depurador cada vez que cambia un objeto. Para ello, usa un código similar al que se muestra en el siguiente ejemplo.
Object.observe(beingWatched, function(){ debugger; });
A continuación, verás una excelente introducción en video sobre Object.observa() que lo explica en detalle.
También encontrarás un agradable resumen y un ejemplo práctico aquí.
El cuerpo del estándar TC39 quiere recibir comentarios sobre esta función, así que pruébala y envíanos tus comentarios.