Introduction aux API JavaScript natives : MutationObserver, IntersectionObserver et History API

Les applications Web modernes exigent réactivité, efficacité et interactivité dynamique. Les API JavaScript natives, telles que MutationObserver, IntersectionObserver et l'API History, permettent aux développeurs de relever ces défis directement, sans avoir besoin de bibliothèques externes. Explorons ces API en détail, comprenons leurs cas d'utilisation et apprenons à exploiter efficacement leur puissance.

MutationObservateur

Aperçu :

L'interface MutationObserver surveille les modifications dans l'arborescence DOM, remplaçant les événements de mutation désormais obsolètes. Il peut détecter quand des nœuds sont ajoutés, supprimés ou modifiés, ce qui en fait un outil essentiel pour les applications dynamiques.

Caractéristiques principales :

• Surveille les modifications apportées à l'arborescence DOM.
• Détecte les modifications apportées aux attributs, aux nœuds enfants et au contenu du texte.
• Fonctionne de manière asynchrone, garantissant un impact minimal sur les performances.

Q. Comment fonctionne MutationObserver ?

Une instance MutationObserver est créée avec une fonction de rappel qui est déclenchée chaque fois que des modifications spécifiées se produisent dans le DOM.

Options dans MutationObserver

• sous-arbre : observe le nœud cible et tous ses descendants.

• childList : surveille les ajouts ou les suppressions de nœuds enfants.

• attributs : suit les modifications apportées aux attributs du nœud cible.

• attributeFilter : limite la surveillance aux attributs spécifiés.

• attributeOldValue : capture la valeur précédente d'un attribut avant qu'il ne change.

• characterData : observe les modifications apportées au contenu textuel d'un nœud.

• characterDataOldValue : capture la valeur précédente du contenu du texte avant modification.

Syntaxe HTML

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

Cas d'utilisation :

• Mise à jour dynamique des éléments de l'interface utilisateur.
• Implémentation d'un comportement personnalisé pour les modifications du DOM.
• Surveillance des modifications de bibliothèques tierces.

IntersectionObservateur

Aperçu :

IntersectionObserver est une interface qui observe de manière asynchrone les changements de visibilité d'un élément cible par rapport à un conteneur racine ou à la fenêtre d'affichage. Il est couramment utilisé pour le chargement paresseux, le défilement infini et l’analyse.

Caractéristiques principales :

• Suive efficacement la visibilité des éléments.
• Réduit le recours aux auditeurs d'événements de défilement.
• Offre un contrôle précis sur les valeurs de seuil.

Q. Comment fonctionne l'observateur d'Intersection ?

L'API Intersection Observer déclenche un rappel qui est appelé lorsque l'une de ces circonstances se produit :

1. Un élément cible croise soit la fenêtre d'affichage de l'appareil, soit un élément racine spécifié.

2. La première fois que l'observateur commence à observer un élément cible.

Options dans l'observateur d'intersection

• root : l'élément utilisé comme fenêtre d'affichage pour vérifier la visibilité. La valeur par défaut est la fenêtre d'affichage du navigateur si elle n'est pas spécifiée.

• rootMargin : une marge autour de la racine, spécifiée sous forme de chaîne (par exemple, "10px 20px"). Agrandit ou rétrécit la zone observable.

• seuil : Une valeur (ou un tableau de valeurs) comprise entre 0 et 1, indiquant le pourcentage de visibilité nécessaire pour déclencher le rappel.

Q. Comment l'intersection est-elle calculée ?

L'API Intersection Observer utilise des rectangles pour calculer les zones d'intersection :

• Les éléments de forme irrégulière sont traités comme s'insérant à l'intérieur du plus petit rectangle qui les entoure entièrement.

• Pour les éléments partiellement visibles, le plus petit rectangle contenant toutes les parties visibles est utilisé. Cela garantit la cohérence des mesures quelle que soit la forme ou la visibilité de l'élément.

Syntaxe de base

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

Cas d'utilisation :

• Chargement paresseux d'images ou de vidéos.
• Implémentation du défilement infini.
• Suivi de l'engagement des utilisateurs avec des éléments spécifiques.

Fonctionnalités avancées :

• Seuils multiples : observez une visibilité partielle à l'aide de tableaux de seuils.
• Marge racine : étendez les limites de la fenêtre d'affichage pour une détection précoce.

API d'historique

Aperçu :

L'API History permet aux applications Web de manipuler l'historique des sessions du navigateur. Il permet d'ajouter, de remplacer ou de modifier des entrées sans recharger la page, pierre angulaire des applications à page unique (SPA).

Caractéristiques principales :

• Gérez la pile d'historique avec pushState et replaceState.
• Écoutez les événements de navigation à l'aide de popstate.
• Mettez à jour la barre d'adresse du navigateur sans recharger la page entière.

Syntaxe de base :

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is visible in the viewport.')
      // Optionally stop observing
      observer.unobserve(entry.target)
    }
  })
})

// Target elements to observe
const targetElement = document.querySelector('.lazy-load')

// Start observing
observer.observe(targetElement)

Cas d'utilisation :

• Construire des SPA avec routage dynamique.
• Gestion de l'état de l'application avec la navigation dans le navigateur.
• Créer des expériences de navigation personnalisées.
• Remarques importantes :
• Assurez-vous de solutions de secours appropriées pour les anciens navigateurs.
• Combinez avec les paramètres d'URL pour un meilleur référencement.

Combiner ces API

Ces API peuvent fonctionner ensemble pour créer des applications Web sophistiquées. Par exemple :

• Utilisez MutationObserver pour surveiller les changements dynamiques du DOM.
• Implémentez IntersectionObserver pour chargement différé du contenu ajouté par les modifications du DOM.
• Exploitez l'API d'historique pour fournir une navigation transparente au sein de l'application.

Exemple de cas d'utilisation :

Une application de blog charge dynamiquement les articles lorsque l'utilisateur fait défiler vers le bas (défilement infini). Il met également à jour l'URL pour refléter la publication en cours sans recharger la page, garantissant une meilleure expérience utilisateur et un référencement amélioré.

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

Conclusion

Les API MutationObserver, IntersectionObserver et History offrent des solutions puissantes et natives pour les applications Web dynamiques et interactives. En comprenant leurs capacités et en les intégrant efficacement, les développeurs peuvent créer des applications performantes et riches en fonctionnalités sans trop dépendre de bibliothèques externes.