Proxies und die Reaktivität in JavaScript

Haben Sie sich jemals gefragt, wie JavaScript-Bibliotheken funktionieren, die die Seite aktualisieren, wenn Sie eine Variable direkt ändern, ohne einen "setter" zu verwenden? Sie verwenden wahrscheinlich einen JavaScript-Proxy!

In diesem Artikel werden wir zuerst erklären, was ein JavaScript-Proxy ist, danach werden wir ein Beispiel für eine reaktive Seite mittels eines Proxys erstellen.

Was ist ein Proxy in JavaScript?

ECMAScript 2015 (ES6) hat ein neues Konzept in JavaScript eingeführt: Proxys.

Diese Proxys dienen dazu, ein JavaScript-Objekt zu wrappen, um grundlegende Operationen abzufangen, die auf das Objekt angewendet werden könnten. Diese Operationen sind zum Beispiel der Zugriff auf und die Änderung von Eigenschaften eines Objekts.

Ist das etwas unklar? Alles wird mit Beispielen klarer werden:

const proxy = new Proxy(target, handlers);

Wo target ist das zu wrappende Objekt und handlers sind die grundlegenden Operationen, von denen wir oben gesprochen haben.

Versuchen wir nun die Operation get, die Funktion nimmt 2 Dinge als Parameter an:

das gewrappte Objekt (target)
der Name der Eigenschaft, auf die wir zuzugreifen versuchen (property)

const proxy = new Proxy({age: 21}, {
  get(target, property) {
    console.log(`Lecture de target.${property}`);
    return target[property];
  }
});
console.log(proxy.age)

Wird anzeigen:

Lecture de target.age
21

Als Nächstes die Operation set, sie nimmt 3 Dinge als Parameter an:

das gewrappte Objekt (target)
der Name der Eigenschaft, auf die wir zuzugreifen versuchen (property)
der neue Wert (value)

const proxy = new Proxy({age: 21}, {
  set(target, property, value) {
    target[property] = value + 1;
  }
});
proxy.age = 41;
console.log(proxy.age);

Wird anzeigen:

Es gibt andere Operationen als get und set aber ich lasse Sie diese selbst entdecken, wenn Sie möchten.

Erstellung einer reaktiven Seite mittels eines Proxys

Wir werden eine Seite erstellen, die anzeigt:

das aktuelle Alter des Benutzers
das Alter des Benutzers in 10, 20 und 30 Jahren

Wir werden dafür sorgen, dass sich diese Seite aktualisiert, sobald wir die Variable "age" ändern.

Zuerst erstellen wir eine einfache HTML-Seite und im Body fügen wir ein:

<body>
  <p>Votre age :</p>
  <input id="ageInput" type="text">
  <h2 id="yourAge"></h2>
  <h2 id="plusTenYears"></h2>
  <h2 id="plusTwentyYears"></h2>
  <h2 id="plusThirtyYears"></h2>
</body>

Als Nächstes wrappen wir den Zustand unserer Seite in einen Proxy:

window.ReactiveSystem = {
  state: new Proxy({ age: 0 }, {})
}

Dann fügen wir das System hinzu, das es ermöglicht, eine Funktion zu starten, jedes Mal, wenn wir eine Eigenschaft des Objekts ändern.

Dafür habe ich mich entschieden, eine Map zu verwenden, die den Namen der Eigenschaft mit der Funktion verknüpft, die aufgerufen werden muss, wenn sich die Eigenschaft ändert:

window.ReactiveSystem.onChangeHandler = new Map();

Wir fügen eine Funktion hinzu, um eine Eigenschaft einfach mit einer Funktion zu verknüpfen:

window.ReactiveSystem.addOnChangeHandler = (property, handler) => {
  window.ReactiveSystem.onChangeHandler.set(property, handler);
}

Wir fügen eine Funktion hinzu, um die Funktion "onChange" einfach zu starten, die einer Eigenschaft zugeordnet ist:

window.ReactiveSystem.runOnChangeHandler = (property) => {
  const handler = window.ReactiveSystem.onChangeHandler.get(property);
  handler?.(window.ReactiveSystem.state[property]);
}

Als Nächstes fügen wir eine Funktion hinzu, um unserer Seite eine neue reaktive Eigenschaft hinzuzufügen:

window.ReactiveSystem.addState = (property, state, onChangeHandler) => {
  window.ReactiveSystem.state[property] = state;
  window.ReactiveSystem.addOnChangeHandler(property, onChangeHandler);
  // on lance directement le onChange après l'ajout de la propriété pour que le premier rendu soit correct
  window.ReactiveSystem.runOnChangeHandler(name);
}

Schliesslich ändern wir den set unseres Proxys, damit er unsere Funktion aufruft runOnChangeHandler

window.ReactiveSystem.state = newProxy({}, {
  set(target,propertyName,value) {
    target[propertyName] = value;
    window.ReactiveSystem.runOnChangeHandler(propertyName);
  },
});

Nachdem unser System fertig ist, muss es nur noch verwendet werden, dafür erstellen wir eine Funktion, die die Dinge aktualisiert, die mit dem Alter zusammenhängen, das der Benutzer eingeben wird:

const renderAgeThings = (value) => {
  const rawAge = +value;
  const age = isNaN(rawAge) ? 0 : rawAge;
  const agePlusTen = `Dans 10 ans vous aurez ${age+10} ans`;
  const agePlusTwenty = `Dans 20 ans vous aurez ${age+20} ans`;
  const agePlusThirty = `Dans 30 ans vous aurez ${age+30} ans`;

  document.getElementById('yourAge').innerHTML = `Vous avez ${age} ans`;
  document.getElementById('plusTenYears').innerHTML = agePlusTen;
  document.getElementById('plusTwentyYears').innerHTML = agePlusTwenty;
  document.getElementById('plusThirtyYears').innerHTML = agePlusThirty;

  document.getElementById('ageInput').value = age.toString();
}

Schliesslich muss unsere Funktion verwendet werden addState :

window.ReactiveSystem.addState('age', 21, renderAgeThings);

Wenn Sie möchten, dass sich das Alter ändert, wenn der Benutzer sein Alter mit dem Textfeld ändert, müssen Sie Folgendes hinzufügen:

document.getElementById('ageInput').addEventListener('input', (e) => {
  window.ReactiveSystem.state.age = e.target.value
})

Es ist fertig! Wenn Sie nun die JavaScript-Konsole in den Entwicklertools öffnen und die Eigenschaft ändern window.ReactiveSystem.age, wird der Inhalt der Seite aktualisiert!

Hier sind die Links zum testen oder den vollständigen Code anzeigen.

Möchten Sie bei der Lancierung Ihres digitalen Projekts begleitet werden?

Reichen Sie Ihr Projekt jetzt ein

Proxies und die Reaktivität in JavaScript

Was ist ein Proxy in JavaScript?

Erstellung einer reaktiven Seite mittels eines Proxys

Weitere Top-Artikel

Loomi, der AI-Assistent von Odealim: eine Claude-Basis, in Europa gehostet und auf die Geschäftsbedürfnisse zugeschnitten und gesichert

Komplexe Verträge automatisch abrechnen: warum Claude-Agenten das Spiel verändern

Publicodes: wie Puncto seine Lohnabrechnungs-Engine codiert hat

Scheduling und Routing: Optimierungssolver und LLM nutzen