Luisteren naar DOM-wijzigingen door Javascript Web API, Mutation Observer (hint: dit is de best practice)

"MutationObserver" is een web-API die wordt aangeboden door moderne browsers om wijzigingen in de DOM te detecteren. Door deze API te gebruiken, kunt u luisteren naar wijzigingen in DOM, zoals toegevoegde of verwijderde knooppunten, wijzigingen in de tekst of wijzigingen in de tekstinhoud van tekstknooppunten aanbrengen en wijzigingen aanbrengen.

Webapps worden tegenwoordig complexer aan de client-kant. Je moet veel doen door naar DOM-veranderingen te luisteren. U wilt bijvoorbeeld een realtime melding naar de gebruiker sturen van een DOM-wijziging of u gebruikt een JS-framework dat zich anders gedraagt ​​voor een ander soort wijziging, of u moet iets doen op basis van de retourwaarde van de JS-plug-in .

"Polling" met setInterval API is een van de weinige alternatieven van Mutation Observer. Laten we het eens bekijken voor een beter begrip van wat "Mutation Observer" precies doet.

index.html

months.js

addMonth is een eenvoudige functie die na 2 seconden een willekeurige naam van een maand of nummer uit de array nameOfMonth retourneert.

Laten we er een polling-functie aan toevoegen.

Om de DOM-wijziging af te drukken, moet CheckMonth elke seconde controleren of er iets in de DOM verandert en na een controle wordt deze afgedrukt van de buitenste HTML. Nadat het de verandering heeft gekregen, wist het het interval. setInterval WebAPI kan een taak instellen die periodiek controleert of er wijzigingen zijn opgetreden. Uiteraard verslechtert deze methode de prestaties van de web-app / website aanzienlijk.

MutationObserver Implementatie:

Het implementeren van MutationObserver in de app is vrij eenvoudig. U moet een MutationObserver-instantie maken door er een functie aan door te geven die elke keer wordt aangeroepen als er een mutatie heeft plaatsgevonden. En wat het beste is, het is een geweldige performer. Bijna alle nieuwste browsers ondersteunen het. Laten we in code springen, hoe de vorige code kan worden gedaan door MutationObserver te implementeren.

In plaats van de Polling-functie toe te voegen, kunnen we MutationObserver gebruiken na de addMonth-functie.

Wat we hier hebben gedaan, hebben we gecontroleerd of een knooppunt is toegevoegd in de DOM door mutation.addedNodes.length. Als het waar terugkeert, registreren we de toegevoegde knoop.

Het gemaakte object heeft drie methoden:

  • observeren - begint te luisteren naar veranderingen. Neemt twee argumenten - het DOM-knooppunt dat u wilt observeren en een instellingenobject
  • verbreken - stopt met luisteren naar veranderingen
  • takeRecords - retourneert de laatste reeks wijzigingen voordat de callback is geactiveerd.

Het volgende fragment laat zien hoe u kunt beginnen met observeren:

Volledige code:

Anders dan alleen het toevoegen van childList, kan het ook luisteren naar het verwijderen van childList en nog veel meer, zoals attributen, substructuur enz. Controleer het onderstaande codeblok.

Dit gaat allemaal overMutationObserver` Het biedt een aantal voordelen ten opzichte van Polling of andere oplossingen. Het is veel geoptimaliseerd omdat het de wijzigingen in batches activeert. Bovendien wordt MutationObserver ondersteund door alle grote moderne browsers, samen met een paar polyfills die MutationEvents onder de motorkap gebruiken. De MutationObserver API is krachtig, informatief en uiteindelijk hack-free.

Leer asynchrone JavaScript in details (callback, belofte, generator en async-await)

Lees meer over React JS hooks in het onderstaande artikel.

Dat is alles voor vandaag :)