Concevoir un DOM virtuel à partir de zéro : un guide étape par étape

Si vous avez entendu parler de bibliothèques frontales comme React ou Vue, vous avez peut-être rencontré le terme Virtual DOM. Le Virtual DOM est un concept astucieux qui permet d'accélérer le développement Web en rendant les mises à jour du DOM plus efficaces.

Dans ce guide, nous expliquerons comment implémenter un DOM virtuel simple à partir de zéro en utilisant des étapes génériques de type code.

Qu'est-ce que le DOM virtuel ?

Le DOM virtuel n'est qu'une représentation légère en mémoire du vrai DOM (la structure d'une page Web). Au lieu de mettre à jour directement le DOM réel (ce qui est lent), nous apportons d'abord des modifications au DOM virtuel, déterminons ce qui a changé, puis mettons à jour uniquement les parties du DOM réel qui doivent être mises à jour. Cela fait gagner du temps et rend votre application plus rapide !

---

Étape 1 : Représenter le DOM virtuel sous forme d’arborescence

Imaginez la structure d'une page Web sous la forme d'une arborescence, où chaque élément (comme

,

ou

) est un "nœud" dans l'arborescence. Un Nœud DOM virtuel est un petit objet qui représente l'un de ces éléments.

Voici un exemple :

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> tag
    }
  ]
}

Ceci décrit un

avec un id="container", qui contient un

élément avec le texte "Bonjour tout le monde!".

Points clés :

• Chaque nœud a un type (par exemple, div, p).
• Il peut avoir des accessoires (comme une pièce d'identité, une classe, etc.).
• Il a également des enfants qui pourraient être d'autres éléments ou du texte.

---

Étape 2 : rendre le DOM virtuel vers le DOM réel

Maintenant que nous avons un DOM virtuel, nous avons besoin d'un moyen de le transformer en véritable HTML sur la page.

Écrivons une fonction appelée render qui prend en charge un nœud DOM virtuel et le convertit en un élément HTML réel.

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.
}

Que se passe-t-il ici ?

• On crée un élément (document.createElement(vNode.type)).
• Nous ajoutons tous les attributs (comme l'identifiant, la classe, etc.).
• Nous gérons les enfants (texte ou autres éléments) soit en ajoutant du texte, soit en appelant à nouveau le rendu sur chaque élément enfant.

---

Étape 3 : Comparer (différer) l'ancien et le nouveau DOM virtuel

Lorsque quelque chose change dans notre application Web (comme le texte ou le style d'un élément), nous créons un nouveau DOM virtuel. Mais avant de mettre à jour le vrai DOM, nous devons comparer l'ancien DOM virtuel et le nouveau DOM virtuel pour comprendre ce qui a changé. C'est ce qu'on appelle "différent".

Créons une fonction qui compare les deux DOM virtuels :

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> tag
    }
  ]
}

Comment fonctionne la différence :

• Modifications du type de nœud : Si le type d'élément change (comme changer un
  en

  ), nous le marquons pour remplacement.

• Modifications du texte : Si le texte à l'intérieur change, nous mettons à jour le texte.
• Attributs et enfants : Nous vérifions si des attributs (accessoires) ou des enfants de l'élément ont changé.

---

Étape 4 : Corriger le vrai DOM

Une fois que nous savons ce qui a changé, nous devons appliquer ces modifications au vrai DOM. Nous appelons ce processus patching.

Voici à quoi pourrait ressembler la fonction de correction :

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.
}

Opérations clés :

• REPLACE : Remplacez complètement un élément par un autre.
• TEXTE : Mettez à jour le texte à l'intérieur d'un élément.
• MISE À JOUR : Mettez à jour les attributs et les enfants en fonction des modifications.

---

Résumé du processus DOM virtuel :

1. Arbre DOM virtuel : Nous créons une structure arborescente qui représente les éléments et leur hiérarchie sur une page Web.
2. Rendu en DOM réel : Ce DOM virtuel est converti en éléments HTML réels et placé sur la page.
3. Algorithme de différence : Lorsque quelque chose change, nous comparons l'ancien DOM virtuel avec le nouveau pour trouver les différences.
4. Corrigez le vrai DOM : Appliquez ces modifications au vrai DOM de la manière la plus efficace possible.

---

Pensées finales

Le Virtual DOM est un outil puissant qui accélère la mise à jour de l'interface utilisateur en réduisant les modifications inutiles du DOM réel. En implémentant un DOM virtuel, nous pouvons optimiser la façon dont les applications Web mettent à jour et restituent les éléments, conduisant ainsi à des expériences utilisateur plus rapides et plus fluides.

Il s'agit d'une implémentation de base du concept Virtual DOM, mais vous avez maintenant les bases pour comprendre comment des frameworks comme React l'utilisent !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html Object if for break using class Interface Generic function dom this web app Foundation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment imprimer des PDF directement à partir de JavaScript dans des flux de travail HTML ?Article suivant：Comment imprimer des PDF directement à partir de JavaScript dans des flux de travail HTML ?

Articles Liés

Voir plus

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript