cómo agregar un eventListener a un objeto en JavaScript que se activará cuando se manipule el objeto?

Question

que tienen una estructura de interfaz de usuario complicada que se manipula de forma dinámica, y decir que tengo un objeto ui_state donde guardo últimos estados de interfaz de usuario del usuario, tales como la ficha que era visible, lo que estaba dentro de esa pestaña, etc.

Por ejemplo:

var ui_states = { 
    tabs : [ 
    { 
     name  : "some tab", 
     active : true, 
     children : { ... } 
    }, 
    { 
     name  : "some other tab", 
     children : { ... } 
    } 
    ] 
} 

Mantengo esto en html5 localStorage y cuando el usuario actualiza el sitio, vuelve a abrir la página de la misma manera. Y cada vez que cambia la interfaz de usuario, este objeto cambia en consecuencia. Y justo después de cambiarlo necesito correr digamos updateLocalStorage(), que está funcionando perfectamente.

Mi pregunta es para este flujo, puedo crear un evento personalizado a mi ui_states objeto algo así como ui_states.addEventListener('onchange', function(){ // do stuff }) a no ejecutar esa función updateLocalStorage() cada vez que puedo manipular el objeto?

Gracias.

Answer 1

Está mezclando la programación de JavaScript con la programación DOM. Los eventos son puramente un concepto DOM. Los objetos JS no admiten manejadores de eventos.

La única manera de hacerlo es crear getters y setters. Hay formas de hacerlo con special properties, pero desafortunadamente, el soporte del navegador es un poco tal vez. La otra forma de hacerlo es usar métodos explícitos y variables privadas. This is possible but a little complex.