Implementieren Sie die DOM-Datenbindung in JavaScript

1. Einseitige Datenbindung in JavaScript
2. Eingeschränkte bidirektionale Datenbindung in JavaScript
3. Bessere bidirektionale Datenbindung in JavaScript

Die Datenbindung ist für aktuelle Anwendungen ebenso entscheidend wie die Addition für die Mathematik. Es wäre verrückt, eine bedeutende Anwendung ohne sie zu erstellen.

Das mit der Datenbindung verbundene Model-View-Controller-Muster ist eines der grundlegendsten Architekturmuster, das Hunderte von Nachkommen hervorgebracht hat.

In diesem Artikel wird die Datenbindung in JavaScript erläutert, und verschiedene Methoden werden mit Ihnen geteilt.

Einseitige Datenbindung in JavaScript

Viele der Motive für die existierenden JavaScript-Frameworks ergeben sich aus wahrgenommenen Mängeln in JavaScript, von denen es viele gab. Als Sprache ist JavaScript jedoch so weit gewachsen, dass die Notwendigkeit von Frameworks erheblich reduziert wurde.

Der Begriff der Datenbindung ist ziemlich einfach. Auf der einen Seite befindet sich ein Datenmodell und auf der anderen Seite eine Schnittstelle, die oft als Ansicht bezeichnet wird.

Das Ziel besteht darin, einige Daten an etwas in der Ansicht zu “binden”, damit sich die Ansicht ändert, wenn sich die Daten ändern. Dies ist bei schreibgeschützten Daten üblich.

Nur wenn sich das Modell und die Ansicht ändern, findet eine unidirektionale Datenbindung statt.

Obwohl es am einfachsten erscheint, ist die unidirektionale Datenbindung wahrscheinlich am schwierigsten zu bewerkstelligen, da sie das Einhängen in JavaScript-Getter und -Setter für Eigenschaften erfordert. Object.defineProperty gibt es in JavaScript schon lange.

Diese Methode ermöglicht es Entwicklern, benutzerdefinierte Getter und Setter für ein Objekt zu erstellen und vorhandene zu ersetzen. Diese Funktion wird beispielsweise im folgenden Code verwendet, um Getter und Setter für eine zuvor angegebene Eigenschaft zu ändern.

function Binding(b) {
  _this = this this.element = b.element this.value =
      b.object[b.property] this.attribute = b.attribute this.valueGetter =
          function() {
        return _this.value;
      } this.valueSetter =
              function(val) {
        _this.value = val
        _this.element[_this.attribute] = val
      }

              Object.defineProperty(
                  b.object, b.property,
                  {get: this.valueGetter, set: this.valueSetter});
  b.object[b.property] = this.value;

  this.element[this.attribute] = this.value
}

Schauen Sie sich den Code an: Er erstellt eine Schatteneigenschaft, um den Wert im Objekt Binding zu speichern, und verwendet dann defineProperty, um den Getter und Setter für die Eigenschaft zu setzen. Die Setter-Methode wird nun jedes Mal aufgerufen, wenn die Eigenschaft mit dem Gleichheitszeichen (=) gesetzt wird.

Schließlich setzt die Funktion die Eigenschaft und das DOM-Element auf den angegebenen Wert. Sie können die Funktionsweise dieses Codes über diesen Link sehen.

Eingeschränkte bidirektionale Datenbindung in JavaScript

Wenn die Ansicht oder das Modell geändert wird, erfolgt eine bidirektionale Datenbindung. Eine Zwei-Wege-Bindung kann unter Verwendung des gleichen Grundcodes aufgebaut werden.

Die Bindung erfordert ein Ereignis, auf das gewartet werden muss, um DOM-Feedback zu erhalten. Beachten Sie, wo die Funktion addEventListener aufgerufen wird.

Dadurch wird dem übergebenen Element ein Ereignis-Listener hinzugefügt. Der Ereignishandler legt die Schattenkopie des Objektwerts datengebunden an das Element fest, wenn das Ereignis aufgerufen wird.

Änderungen am Modell führen auch zu einer Aktualisierung des DOM-Elements.

function Binding(b) {
  _this = this this.element = b.element this.value =
      b.object[b.property] this.attribute = b.attribute this.valueGetter =
          function() {
        return _this.value;
      } this.valueSetter =
              function(val) {
        _this.value = val
        _this.element[_this.attribute] = val
      }

  if (b.event) {
    this.element.addEventListener(b.event, function(event) {
      _this.value = _this.element[_this.attribute]
    })
  }

  Object.defineProperty(
      b.object, b.property, {get: this.valueGetter, set: this.valueSetter});
  b.object[b.property] = this.value;

  this.element[this.attribute] = this.value
}

Sie können die Funktionsweise dieses Codes über diesen Link sehen.

Dieser Code ist jedoch relativ restriktiv, da er nur eine einzige unidirektionale oder bidirektionale Datenbindung für das Element und das Attribut zulässt.

Bessere bidirektionale Datenbindung in JavaScript

Das Zulassen, dass eine Eigenschaft an ein oder mehrere Elemente gebunden wird, ist ein besserer Ansatz für die bidirektionale Datenbindung. Dies impliziert, dass die Datenbindung zahlreiche Elemente im DOM aktualisieren kann, wenn sich der Wert ändert, entweder wenn ein DOM-Ereignis aufgerufen wird oder sich das Modell ändert.

Beachten Sie auch die neu eingeführte Methode addBinding. Dies ermöglicht nun das Hinzufügen neuer Komponenten zur Bindung mit Ereignissen.

Diese werden dem Array elementBindings hinzugefügt. Die Setter-Methode iteriert über das elementBindings-Array, wenn ein neuer Wert gesetzt wird, und ändert die Eigenschaft.

Es kann auch verwendet werden, um unidirektionale Datenbindungen zu erstellen, indem die Option event beim Ausführen von addBinding fehlt.

function Binding(b) {
  _this = this this.elementBindings = [] this.value =
      b.object[b.property] this.valueGetter =
          function() {
        return _this.value;
      } this.valueSetter =
              function(val) {
        _this.value = val
        for (var i = 0; i < _this.elementBindings.length; i++) {
          var binding = _this.elementBindings[i]
          binding.element[binding.attribute] = val
        }
      } this.addBinding =
                  function(element, attribute, event) {
        var binding = { element: element, attribute: attribute } if (event) {
          element.addEventListener(event, function(event) {
            _this.valueSetter(element[attribute]);
          })
          binding.event = event
        }
        this.elementBindings.push(binding)
        element[attribute] = _this.value
        return _this
      }

                  Object.defineProperty(
                      b.object, b.property,
                      {get: this.valueGetter, set: this.valueSetter});

  b.object[b.property] = this.value;
}

Sie können die Funktionsweise dieses Codes über diesen Link sehen.

Diese Implementierung ist besser, aber es gibt noch viel zu tun. Beispielsweise gibt es keine Datenvalidierung, Vorlagenerstellung, keine Array-Unterstützung, keine benutzerdefinierten UI-Setter oder UI-Formatierer und eine Reihe anderer Einschränkungen.

Wenn Sie all dies kombinieren, beginnt sich der Begriff Framework zu bilden, und es gibt viele davon. Ein einfaches Skript wie dieses ist jedoch mehr als ausreichend, um das zu erledigen, was Sie für die Datenbindung für viele Ihrer Anforderungen benötigen.