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
}
]
}
Copier après la connexion
Copier après la connexion
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.
}
Copier après la connexion
Copier après la connexion
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
}
]
}
Copier après la connexion
Copier après la connexion
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.
}
Copier après la connexion
Copier après la connexion
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 :
-
Arbre DOM virtuel : Nous créons une structure arborescente qui représente les éléments et leur hiérarchie sur une page Web.
-
Rendu en DOM réel : Ce DOM virtuel est converti en éléments HTML réels et placé sur la page.
-
Algorithme de différence : Lorsque quelque chose change, nous comparons l'ancien DOM virtuel avec le nouveau pour trouver les différences.
-
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!
Déclaration de ce site Web
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
Derniers articles par auteur
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
