Entwerfen eines virtuellen DOM von Grund auf: Eine Schritt-für-Schritt-Anleitung

Wenn Sie von Front-End-Bibliotheken wie React oder Vue gehört haben, ist Ihnen möglicherweise der Begriff Virtual DOM begegnet. Das virtuelle DOM ist ein cleveres Konzept, das die Webentwicklung beschleunigt, indem es DOM-Updates effizienter macht.

In diesem Leitfaden erläutern wir, wie Sie mit generischen Code-ähnlichen Schritten ein einfaches virtuelles DOM von Grund auf implementieren können.

Was ist das virtuelle DOM?

Das Virtuelle DOM ist lediglich eine leichte, speicherinterne Darstellung des echten DOM (der Struktur einer Webseite). Anstatt das reale DOM direkt zu aktualisieren (was langsam ist), nehmen wir zunächst Änderungen am virtuellen DOM vor, finden heraus, was sich geändert hat, und aktualisieren dann nur die Teile des realen DOM, die aktualisiert werden müssen. Das spart Zeit und macht Ihre App schneller!

---

Schritt 1: Darstellung des virtuellen DOM als Baum

Stellen Sie sich die Struktur einer Webseite als einen Baum vor, in dem jedes Element (wie

,

oder

) ein „Knoten“ im Baum ist. Ein Virtueller DOM-Knoten ist ein kleines Objekt, das eines dieser Elemente darstellt.

Hier ist ein Beispiel:

Virtual DOM Node:
{
  type: 'div',
  props: { id: 'container' },  // attributes like id, class, etc.
  children: [                 // children inside this element
    {
      type: 'p',              // a <p> tag (paragraph)
      props: {},
      children: ['Hello, world!']  // text inside the </p><p> tag
    }
  ]
}
</p>

Dies beschreibt ein

Element mit einer id="container", das ein

enthält. Element mit dem Text "Hallo, Welt!".

Kernpunkte:

• Jeder Knoten hat einen Typ (z. B. div, p).
• Es kann Requisiten haben (wie ID, Klasse usw.).
• Es hat auch untergeordnete Elemente, die andere Elemente oder Text sein können.

---

Schritt 2: Rendern des virtuellen DOM in das reale DOM

Da wir nun ein virtuelles DOM haben, brauchen wir eine Möglichkeit, es in echtes HTML auf der Seite umzuwandeln.

Lassen Sie uns eine Funktion namens render schreiben, die einen virtuellen DOM-Knoten aufnimmt und ihn in ein tatsächliches HTML-Element konvertiert.

function render(vNode) {
  // 1. Create a real element based on the Virtual DOM type (e.g., div, p).
  const element = document.createElement(vNode.type);

  // 2. Apply any attributes (props) like id, class, etc.
  for (const [key, value] of Object.entries(vNode.props)) {
    element.setAttribute(key, value);
  }

  // 3. Process the children of this Virtual DOM node.
  vNode.children.forEach(child => {
    if (typeof child === 'string') {
      // If the child is just text, create a text node.
      element.appendChild(document.createTextNode(child));
    } else {
      // If the child is another Virtual DOM node, recursively render it.
      element.appendChild(render(child));
    }
  });

  return element;  // Return the real DOM element.
}

Was passiert hier?

• Wir erstellen ein Element (document.createElement(vNode.type)).
• Wir fügen beliebige Attribute hinzu (wie ID, Klasse usw.).
• Wir verarbeiten untergeordnete Elemente (Text oder andere Elemente), indem wir entweder Text hinzufügen oder für jedes untergeordnete Element erneut „render“ aufrufen.

---

Schritt 3: Vergleichen (Unterscheiden) des alten und neuen virtuellen DOM

Wenn sich in unserer Web-App etwas ändert (wie der Text oder der Stil eines Elements), erstellen wir ein neues virtuelles DOM. Aber bevor wir das echte DOM aktualisieren, müssen wir das alte virtuelle DOM und das neue virtuelle DOM vergleichen, um herauszufinden, was sich geändert hat. Dies wird als "Diffing" bezeichnet.

Lassen Sie uns eine Funktion erstellen, die die beiden virtuellen DOMs vergleicht:

Virtual DOM Node:
{
  type: 'div',
  props: { id: 'container' },  // attributes like id, class, etc.
  children: [                 // children inside this element
    {
      type: 'p',              // a <p> tag (paragraph)
      props: {},
      children: ['Hello, world!']  // text inside the </p><p> tag
    }
  ]
}
</p>

So funktioniert das Diffing:

• Knotentypänderungen: Wenn sich der Typ des Elements ändert (z. B. die Änderung eines
  in ein

  ), markieren wir es zum Ersetzen.

• Textänderungen: Wenn sich der Text darin ändert, aktualisieren wir den Text.
• Attribute und untergeordnete Elemente:Wir prüfen, ob sich Attribute (Requisiten) oder untergeordnete Elemente des Elements geändert haben.

---

Schritt 4: Patchen des echten DOM

Sobald wir wissen, was sich geändert hat, müssen wir diese Änderungen auf das echte DOM anwenden. Wir nennen diesen Prozess Patching.

So könnte die Patch-Funktion aussehen:


function render(vNode) {
  // 1. Create a real element based on the Virtual DOM type (e.g., div, p).
  const element = document.createElement(vNode.type);

  // 2. Apply any attributes (props) like id, class, etc.
  for (const [key, value] of Object.entries(vNode.props)) {
    element.setAttribute(key, value);
  }

  // 3. Process the children of this Virtual DOM node.
  vNode.children.forEach(child => {
    if (typeof child === 'string') {
      // If the child is just text, create a text node.
      element.appendChild(document.createTextNode(child));
    } else {
      // If the child is another Virtual DOM node, recursively render it.
      element.appendChild(render(child));
    }
  });

  return element;  // Return the real DOM element.
}

Schlüsseloperationen:

• ERSETZEN: Ersetzen Sie ein Element vollständig durch ein anderes.
• TEXT: Aktualisiert den Text innerhalb eines Elements.
• UPDATE:Attribute und untergeordnete Elemente basierend auf den Änderungen aktualisieren.

---

Zusammenfassung des virtuellen DOM-Prozesses:

1. Virtueller DOM-Baum: Wir erstellen eine baumartige Struktur, die die Elemente und ihre Hierarchie auf einer Webseite darstellt.
2. In echtes DOM rendern:Dieses virtuelle DOM wird in echte HTML-Elemente konvertiert und auf der Seite platziert.
3. Unterschiedsalgorithmus:Wenn sich etwas ändert, vergleichen wir das alte virtuelle DOM mit dem neuen, um die Unterschiede zu finden.
4. Patchen Sie das echte DOM:Wenden Sie diese Änderungen so effizient wie möglich auf das echte DOM an.

---

Letzte Gedanken

Das virtuelle DOM ist ein leistungsstarkes Tool, das die Aktualisierung der Benutzeroberfläche beschleunigt, indem unnötige Änderungen am realen DOM reduziert werden. Durch die Implementierung eines virtuellen DOM können wir die Art und Weise optimieren, wie Web-Apps Elemente aktualisieren und rendern, was zu schnelleren und reibungsloseren Benutzererlebnissen führt.

Dies ist eine grundlegende Implementierung des Virtual DOM-Konzepts, aber Sie haben jetzt die Grundlage, um zu verstehen, wie Frameworks wie React es nutzen!