Wie fügt man einen EventListener zu einem Objekt in Javascript hinzu, das ausgelöst wird, wenn das Objekt manipuliert wird?

Question

Ich habe eine komplizierte UI-Struktur, die dynamisch manipuliert wird, und sage, ich habe ein ui_state Objekt, wo ich solche neueste UI Zustände des Benutzers halten, wie der Reiter sichtbar war, was usw.

Zum Beispiel innerhalb dieser Registerkarte war:

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

Ich halte dies auf html5 localStorage und wenn Benutzer die Website aktualisiert, öffnet es die Seite die gleiche wieder. Und jedes Mal, wenn sich die Benutzeroberfläche ändert, wird dieses Objekt entsprechend geändert. Und kurz nachdem ich es gewechselt habe, muss ich sagen: updateLocalStorage(), was perfekt funktioniert.

Meine Frage ist für diesen Fluss, kann ich ein benutzerdefiniertes Ereignis zu meinem ui_states Objekt so etwas wie ui_states.addEventListener('onchange', function(){ // do stuff }) dass updateLocalStorage() Funktion erstellen, jedes Mal, nicht zu laufen, wenn ich das Objekt manipulieren?

Danke.

Answer 1

Sie vermischen JavaScript-Programmierung mit DOM-Programmierung. Ereignisse sind ein reines DOM-Konzept. JS-Objekte unterstützen keine Ereignishandler.

Die einzige Möglichkeit besteht darin, Getter und Setter zu erstellen. Es gibt Möglichkeiten, dies mit special properties zu tun, aber leider ist Browser-Unterstützung ein bisschen vielleicht. Die andere Möglichkeit besteht darin, explizite Methoden und private Variablen zu verwenden. This is possible but a little complex.