So implementieren Sie eine bidirektionale Bindungsfunktion in vue.js mit reinem JS

Siehe Screenshot unten

Dies ist eine normale HTML-Datei und Vue.js wird nicht eingeführt. Fällt Ihnen im Code etwas Vertrautes auf? Zum Beispiel: „v-model“, „v-on:click“ und die häufig verwendete Zuweisungsanweisung „doppelte geschweifte Klammern {{}}“.

Lassen Sie uns zunächst über die Idee der Implementierung der bidirektionalen Bindung sprechen:

1. Erstellen Sie ein benutzerdefiniertes Vue-js-Objekt, z. B. das obige wslVue-Objekt. Die in der Initialisierungsmethode erforderlichen Parameter sind: (1) die zu mountende DOM-Objekt-ID, (2) das Datenattribut des benutzerdefinierten Vue-Objekts (JSON-Objekt) und (3) eine simulierte Mounting-Methode, die später hinzugefügt wird. (Die Parameter (1) und (2) sind hier nützlich. Der Parameter (3) kann verwendet werden, um anzunehmen, dass der Rückruf der Rendering-Methode (Mounting-Methode) ausgeführt werden kann, nachdem alle Initialisierungsarbeiten des Vue-Objekts abgeschlossen sind.)

2. Schreiben Sie die Set- und Get-Methoden des Vue-Attributdaten-JSON-Objekts neu. Gleichzeitig können Sie alle Attribute unter Daten zum Vue-Objekt hinzufügen, die Set- und Get-Methoden der von Vue generierten Attribute neu schreiben und die Set- und Get-Methoden der Daten in der Methode direkt ausführen (der Zweck besteht darin, das Lesen und Schreiben von Vue-Objektattributen direkt für DOM-Operationen zu verwenden).

3. Analysieren Sie HTML und reorganisieren Sie die Tag-Knoten und Textknoten in HTML (die spezifische Reorganisation bezieht sich hier auf die Konvertierung der Vue-Anweisungen und {{}}-Zuweisungssymbole in normale HTML-Dokumente für die Ausgabe). Während des Analysevorgangs werden für jeden Knoten, der bedient werden muss (z. B. Eingabe-Tag-Eingabe), Cache, Bindungslogik und Hinzufügen von Abhörereignissen zwischengespeichert.

Lassen Sie uns über die wichtigsten Methoden von js zum Implementieren dieser Funktionen sprechen:

1. Methoden der JS-Objekteigenschaften festlegen und abrufen.

2. document.createDocumentFragment - HTML-Fragment-Analyse.

3. Organisieren Sie die HTML-Codefragmente auf Grundlage relevanter regulärer Ausdrücke neu.

Welche Werkzeugklassen müssen letztendlich erstellt werden?

1. Vue-Objekt.

2. Die Beobachterklasse Watcher speichert die zu bedienenden Knotenknoten und die auszuführenden Callback-Methoden bei Änderungen der Attribute.

3. Verwalten Sie die Verwaltungsklasse Dep aller Beobachter-Watcher und steuern Sie die Rückrufwiedergabe des Watchers im Zusammenhang mit Datenänderungen.

Implementieren der bidirektionalen Vue-Bindung

Methode zum Initialisieren des Vue-Objekts

Hinweise:

1: Fügen Sie dem Vue-Objekt alle Eigenschaften in den Daten hinzu und schreiben Sie die Set- und Get-Methoden neu.

2: Fügen Sie dem Vue-Objekt ein Methodenverwaltungsobjekt hinzu. Wenn Sie das HTML analysieren, um die v-on:click-Methode zu erhalten, fügen Sie dem Tag einen Methodentext für das Klickereignis hinzu.

3: Analysieren Sie hier das HTML. Wenn beim Parsen ein Knoten auftritt, der verarbeitet werden muss, erstellen Sie ein Watcher-Objekt, speichern Sie den entsprechenden Knoten und die Anweisungen im Watcher-Objekt und fügen Sie das Watcher-Objekt der Dep-Sammlung der Observer-Verwaltungsklasse hinzu.

4: Nachdem die Initialisierung abgeschlossen ist, mounten Sie es und rendern Sie das vollständige HTML im angegebenen DOM-Element.

Das Parsen der Kompilierungsklasse erfordert das Mounten des entsprechenden Doms

Holen Sie sich alle Knotenknoten

Analysieren spezifischer Anweisungen

Beurteilung von Beschriftungselementen und Textinhalten

Wenn es sich hier um einen Tag-Knoten handelt, müssen Sie die darin enthaltenen v-on- und v-model-Anweisungen analysieren

V-Modell

v-on:klick

Die rote Linie ist die Methode, die den Methoden im Vue-Objekt entspricht und dem aktuellen Knoten ein Klickereignis hinzufügt.

Wenn der Knoten Textinhalt ist, muss die darin enthaltene {{}}-Direktive analysiert werden.

Zusammenfassung: Hier werden viele Watcher-Objekte erstellt. Die Objekte speichern das aktuelle Vue-Objekt, den Knoten, den Rückruf bei Datenänderungen und werden in der Dep-Verwaltungsklasse gespeichert, sodass bei Datenänderungen der Methodenrückruf direkt zum Rendern ausgeführt wird.

Spezifische Anweisungsbeurteilung

Watcher- und Dep-Objekte

Erstellen Sie abschließend eine Mindmap

Fazit: Hier endet die Grundidee. Es gibt keine komplizierte Logik und die Ausdrucksfähigkeit ist begrenzt. Ich hoffe, dass dies für alle hilfreich ist und nehme auch Kritik und Korrekturen der Meister entgegen, damit wir gemeinsam Fortschritte machen können.

Oben sind die Details, wie reines JS die bidirektionale Bindungsfunktion unter vue.js implementieren kann. Weitere Informationen zur Implementierung der bidirektionalen Bindung von Vue durch JS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!