201321Jun

Reactor.js: Automatisches Aktualisieren von Variablen

Das Konzept der funktionalen reaktiven Programmierung ist fester Bestandteil von Bibliotheken wie Knockout.js oder Bacon.js: Variablen, also Modelle, werden als "Signale" initialisiert, die dann von einem "Observer" überwacht und bei Bedarf aktualisiert werden. In Knockout können so DOM-Elemente an Variablen geknüpft werden, die bei deren Änderung automatisch erneuert werden und der neue Wert sichtbar wird.
Das kompakte Framework Reactor.js bietet den Komfort der reaktiven Programmierung und lässt sich einfach einsetzen.

Reactor.js - Automatisches Aktualisieren von Variablen durch reaktive Programmierung

So müssen die zu überwachenden Variablen lediglich als Signale notiert werden und ein entsprechender Observer kann mit dieser Variable verbunden werden. Ein Beispiel:

  • // HTML
  •  
  • <div id="wert"></div>
  • <input type="button" id="btn" value="Update" />
  •  
    // JavaScript
  •  
  • // DOM
  • var btn = document.querySelector("#btn");
  • var wert = document.querySelector("#wert");
  •  
    // Model
  • model = Signal("Startwert");
  •  
  • // Observer
  • Observer(function(){
  • wert.innerHTML = model();
  • });
  •  
  • btn.addEventListener("click", function(){
  • model(new Date());
  • });

Hier wird also der Wert des Elements mit der Id "wert" bei einem Klick auf die Schaltfläche mit dem aktuellen Zeitstempel gefüllt. Dank Reactor müssen so Modell und DOM nicht separat behandelt werden.
Die Bibliothek bietet noch weitere Methoden für den Einsatz von Objekt- und Array-Signalen. Weitere Infos finden sich bei GitHub.