Lytter til DOM-ændringer af Javascript Web API, Mutation Observer (tip: Det er den bedste praksis)

“MutationObserver” er et Web API leveret af moderne browsere til at registrere ændringer i DOM. Ved at bruge denne API kan du lytte til ændringer i DOM, som tilføjede eller fjernede noder, attributændringer eller ændringer i tekstindholdet i tekstnoder og foretage ændringer.

Web-apps bliver komplekse på klientsiden i dag. Du skal gøre meget ved at lytte til DOM-ændringer. For eksempel vil du sende en realtidsmeddelelse til brugeren fra en DOM-ændring, eller du bruger en JS-ramme, der har forskellige opførsler til en anden form for ændring, eller du skal gøre en ting baseret på JS-plugins returneringsværdi .

“Polling” med setInterval API er et af de få alternativer til Mutation Observer. Lad os se på det for bedre at forstå, hvad "Mutation Observer" gør.

index.html

months.js

addMonth er en simpel funktion, der returnerer et tilfældigt navn på en måned eller nummer fra arten nameOfMonth efter 2 sekunder.

Lad os tilføje en polling-funktion efter den.

For at udskrive DOM-ændringen skal CheckMonth kontrollere hvert sekund, hvis der ændrer sig noget i DOM, og efter en kontrol udskrives det væk fra det ydreHTML. Når den har fået ændringen, ryddes intervallet. setInterval WebAPI kan opsætte en opgave, der med jævne mellemrum kontrollerer, om der er sket ændringer. Denne metode forværrer naturligvis ydelsen af ​​webapp / websteder markant.

MutationObserver Implementation:

Det er temmelig let at implementere MutationObserver i appen. Du skal oprette en MutationObserver-forekomst ved at videregive den en funktion, der vil blive kaldt hver gang en mutation har fundet sted. Og hvad der er bedst, det er fantastisk kunstner. Næsten alle nyeste browsere understøtter det. Lad os hoppe ind i kode, hvordan den forrige kode kan gøres ved at implementere MutationObserver.

I stedet for at tilføje pollingfunktion kan vi bruge MutationObserver efter addMonth-funktionen.

Hvad vi gjorde her, kontrollerede vi, om der er tilføjet nogen node i DOM ved hjælp af mutation.addedNodes.length. Hvis det vender tilbage, logger vi den tilføjede knude.

Det oprettede objekt har tre metoder:

  • observere - begynder at lytte efter ændringer. Tager to argumenter - den DOM-knude, du vil observere, og et indstillingsobjekt
  • afbryd - stopper med at lytte efter ændringer
  • takeRecords - returnerer den sidste batch af ændringer, før tilbagekaldet er affyret.

Følgende kodestykke viser, hvordan man begynder at observere:

Fuld kode:

Bortset fra bare at tilføjechildList, kan det også lytte til at fjerne childList og meget mere, som attributter, undertræ osv. Kontroller kodeblokken nedenfor.

Dette handler alt omMutationObserver` Det giver en række fordele i forhold til polling eller andre løsninger. Det er langt mere optimeret, da det affyrer ændringerne i batches. Oven på det understøttes MutationObserver af alle større moderne browsere sammen med et par polyfylder, der bruger MutationEvents under hætten. MutationObserver API er kraftfuld, informativ og i sidste ende hackfrit.

Lær asynkron JavaScript i detaljer (tilbagekald, løfte, generator og venter på async)

Lær om React JS-kroge fra artiklen herunder.

Det er alt for i dag :)