Å lytte til DOM-endringer av Javascript Web API, Mutation Observer (hint: Det er den beste fremgangsmåten)

"MutationObserver" er et Web API levert av moderne nettlesere for å oppdage endringer i DOM. Ved å bruke dette APIet kan du lytte til endringer i DOM, som lagt til eller fjerne noder, attributtendringer eller endringer i tekstinnholdet i tekstnoder og gjøre endringer.

Nettapper blir komplekse på klientsiden i dag. Du må gjøre mye ved å lytte til DOM-endringer. For eksempel vil du sende et sanntidsvarsel til brukeren fra en DOM-endring, eller du bruker et JS-rammeverk som har forskjellig oppførsel for en annen type endring, eller du må gjøre en ting basert på JS-plugins returverdi .

"Polling" med setInterval API er et av få alternativer til Mutation Observer. La oss se på det for bedre å forstå hva “Mutation Observer” gjør.

index.html

months.js

addMonth er en enkel funksjon som returnerer et tilfeldig navn på en måned eller nummer fra nameOfMonth-matrisen etter 2 sekunder.

La oss legge til en valgfunksjon etter den.

For å skrive ut DOM Change, må CheckMonth sjekke hvert sekund om noe endres i DOM, og etter en sjekk skrives det ut fra den ytre HTML-koden. Etter at den har fått endringen, blir det klart for intervallet. setInterval WebAPI kan sette opp en oppgave som med jevne mellomrom vil sjekke om det har skjedd endringer. Naturlig forringer denne metodens ytelse betydelig.

MutationObserver Implementering:

Det er ganske enkelt å implementere MutationObserver i appen. Du må opprette en MutationObserver-forekomst ved å gi den en funksjon som vil bli kalt hver gang en mutasjon har skjedd. Og hva som er best, det er flott utøver. Nesten all den nyeste nettleseren støtter den. La oss hoppe inn i koden, hvordan den forrige koden kan gjøres ved å implementere MutationObserver.

I stedet for å legge til pollingfunksjon kan vi bruke MutationObserver etter addMonth-funksjonen.

Hva vi gjorde her, sjekket vi om noen node er lagt til i DOM av mutation.addedNodes.length. Hvis det kommer igjen, logger vi den tilførte noden.

Det opprettede objektet har tre metoder:

  • observere - begynner å lytte etter endringer. Tar to argumenter - DOM-noden du vil observere og et innstillingsobjekt
  • koble fra - slutter å lytte etter endringer
  • takeRecords - returnerer den siste batch med endringer før tilbakeringingen har blitt avfyrt.

Følgende utdrag viser hvordan du begynner å observere:

Full kode:

Annet enn bare å legge til childList, kan det også lytte til å fjerne childList og mye mer, som attributter, undertrinn osv. Sjekk kodeblokken nedenfor.

Dette handler om MutationObserver` Det gir en rekke fordeler i forhold til avstemmingen eller andre løsninger. Det er mye mer optimalisert når det skyter endringene i partiene. På toppen av det støttes MutationObserver av alle moderne moderne nettlesere, sammen med et par polyfyller som bruker MutationEvents under panseret. MutationObserver API er kraftig, informativ og til slutt hackfritt.

Lær asynkron JavaScript i detaljer (tilbakeringing, løfte, generator og vente på asynk)

Lær om React JS-kroker fra artikkelen nedenfor.

Det var alt for i dag :)