JavaScript-Proxy-Objekt Proxy erste Erfahrung mit einfacher datengesteuerter Ansichtsübersicht

Dieser Artikel bringt Ihnen relevante Kenntnisse über JavaScript. Er führt Sie zum ersten Mal in die einfache datengesteuerte Ansicht des JS-Proxy-Objekts ein wird für alle hilfreich sein.

Front-End-Einstieg (vue) zum Mastery-Kurs: Einstieg ins Lernen

JQuery ist ereignisgesteuert, das heißt, wenn ein Datenelement mit einem bestimmten Inhalt des DOM verknüpft ist, muss ich das DOM zur Synchronisierung bedienen, nachdem sich die Daten geändert haben:

 <div id="data">Daten</div>

 var data = "data"
//Die Daten haben sich durch irgendeine Art von Ereignis geändert data = "new data"
$("#data").text = Daten

Bei einfachen Interaktionen scheint diese Methode immer noch praktisch zu sein, aber sobald die Interaktionen groß werden, wird der Code aufgebläht.

Als ich kurz vor meinem Abschluss stand, tauchten Angular, Vue und React auf und wir entdeckten einen neuen Weg – datengesteuert. Das heißt, durch die „Bindung“ von DOM und Daten können wir die Daten direkt ändern Der DOM-Inhalt kann direkt geändert werden.

 <div>{{data}}</div>

 var data = "data"
// ...irgendwie gebunden data = "new data"

Der Inhalt im DOM wird direkt zu neuen Daten. Es ist sehr bequem zu verwenden und der Code ist relativ prägnant. Damals schien es magisch.

Verschiedene datengesteuerte Frameworks haben unterschiedliche Bindungsprinzipien und -prozesse und sind alle relativ komplex. Aber heute werden wir es vereinfachen und das Proxy-Objekt von JS verwenden, um das Datenlaufwerk zu implementieren. (Übrigens verwenden die responsiven Daten von Vue3 dieses Prinzip. Natürlich wird es viel komplizierter sein als das heutige Beispiel.)

Was ist ein Proxy-Objekt?

Das Proxy- Objekt wird verwendet, um einen Proxy für ein Objekt zu erstellen, um das Abfangen und Anpassen grundlegender Vorgänge (z. B. Attributsuche, Zuweisung, Aufzählung, Funktionsaufruf usw.) zu implementieren. Die spezifischen Verwendungsmethoden sind:

 neuer Proxy (zu vertretendes Objekt, Ereignisobjekt des Proxys)

Folgende Ereignisse können delegiert werden:

Verwenden Sie Proxy, um eine einfache datengesteuerte Ansicht zu schreiben

Nachdem wir nun die grundlegende Verwendung von Proxy verstanden haben, können wir es als Proxy für den setter des Objekts verwenden, um das Datenlaufwerk zu implementieren.

Definieren Sie zunächst ein DOM-Element mit derselben ID wie die Daten:

 <div id="firstName"></div>
<div id="age"></div>

Legen Sie einen Proxy-Proxy für data fest, stellen Sie seinen setter als Proxy bereit und betreiben Sie das DOM darin:

 var data = {
Vorname: "",
Alter: 0
}
var p_data = new Proxy(data, {
set: function (obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval; // Vergessen Sie nicht, die ursprüngliche Logik zu implementieren return true; // Setter-Proxy-Anforderungen, nach erfolgreicher Verarbeitung true zurückgeben
}
})

Legen Sie dann den Anfangswert und die relevanten Interaktionen fest. Beachten Sie, dass der Agent p_data anstelle von data betrieben wird:

 p_data.firstName = „Der Name wird in zwei Sekunden angezeigt …“
p_data.age = 25
setTimeout(() => {
p_data.firstName = "Lin Yuchen"
}, 2000)
document.getElementById("grow").onclick = function() {
p_data.age++
}

Auf diese Weise wird ein Datenlaufwerk realisiert, solange der Attributwert von p_data willkürlich geändert wird, kann der Inhalt des DOM direkt geändert werden:

JS

 var data = {
Vorname: "",
Alter: 0
}
var p_data = new Proxy(data, {
set: function (obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval;
Rückkehr wahr
}
})
p_data.firstName = „Der Name wird in zwei Sekunden angezeigt …“
p_data.age = 25
setTimeout(() => {
p_data.firstName = „Lin Yuchen“
}, 2000)
document.getElementById("grow").onclick = function() {
p_data.age++
}