Slik bruker du MutationObserver API for DOM Node Changes

Her er et scenario: Rita, et magasinskribent redigerer en artikkel av hennes online. Hun sparer sine endringer, og ser meldingen “Endringer lagret!” Bare da merker hun en skrivefeil hun savnet. Hun løser det og er i ferd med å klikke “lagre”, når hun får en sint telefonsamtale fra sjefen sin.

Etter at samtalen er over, vender hun tilbake til skjermen, ser “Endringer lagret!” avslutter sin datamaskin og stormer ut av kontoret.

Bortsett fra min ineptitude for historiefortelling, la vi merke til fra det korte scenariet hvilke problemer den vedvarende meldingen brygde. Så i fremtiden bestemmer vi oss for å unngå det når det er mulig, og bruk en som enten ber om at brukeren skal bekrefte ved å klikke på den - eller forsvinner på egenhånd. Å bruke den andre for en rask melding er en god ide.

Vi vet allerede hvordan å gjøre et element forsvinne fra en side, så det burde ikke være et problem. Det vi trenger å vite er når skjedde det? Så vi kan få det til å forsvinne etter en troverdig tid.

MutationObserver API

Samlet sett, når et DOM-element (som en melding div) eller noen andre nodeendringer, bør vi kunne kjenne det. I lang tid måtte utviklere stole på hacks og rammer på grunn av mangelen på en innfødt API. Men det var forandret.

Vi har nå MutationObserver (tidligere Mutation Events). MutationObserver er et JavaScript-objekt med et sett med egenskaper og metoder. Det lar oss observere en endring på en node som DOM Element, Document, Text, etc. Ved mutasjon mener vi tillegg eller fjerning av en node og endringer i en nodes attributt og data.

La oss se et eksempel for bedre forståelse. Vi vil først lage et oppsett der en melding vises ved knappeklikk, som den ene Rita-saga. Da skal vi opprett og knytt en mutasjonsobservator til meldingsboksen og kode logikken for å skjule meldingen automatisk. Erfarne?

Merk: Du kan på et tidspunkt eller har allerede bedt meg om i hodet ditt “Hvorfor ikke bare skjule meldingen fra innsiden av knappen, klikk hendelsen i JavaScript?” I mitt eksempel jobber jeg ikke med en server, så selvfølgelig er klienten ansvarlig for å vise meldingen og kan gjemme det for enkelt. Men som i Ritas redigeringsverktøy hvis serveren er den som bestemmer seg for å endre DOM-innholdet, kan klienten bare holde seg vakt og vente.

Først oppretter vi oppsettet for å vise meldingen på knappeklikk.

 Vis melding

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Endringer lagret!"; / * Legg til knapp klikkhendelse * / dokument .querySelector ('button') .addEventListener ('klikk', showMsg); funksjon showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Når vi fikk det første oppsettet, kan vi gjøre følgende:

• Lage en MutationObserver objekt med en brukerdefinert tilbakeringingsfunksjon (funksjonen defineres senere i innlegget). Funksjonen vil utføres på hver mutasjon observert av MutationObserver.
• Opprett en konfigurasjonsobjekt for å angi hvilken type mutasjoner som skal observeres av MutationObserver.
• Bind inn MutationObserver til målet, som er "msg" div i vårt eksempel.

(mutation); /) 2) Opprett en konfigurasjonsobjekt * / config = childList: ekte; / * 3) Lim'em alle * / observer.observe (msg, config); ) (); 

Nedenfor er en liste over eiendommer for config objekt identifisere de forskjellige typer mutasjoner. Siden i vårt eksempel omhandler vi bare en barnetekstnode som er opprettet for meldingsteksten, vi har brukt childList eiendom.

Typer av mutasjoner observert

Nå til den tilbakeringingsfunksjonen som blir utført på hver observerte mutasjon.

funksjon mutasjonObserverCallback (mutasjoner) / * Grip den første mutasjonen * / var mutationRecord = mutasjoner [0]; / * Hvis en barnekode ble lagt til, skjul meldingen etter 2s * / hvis (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  funksjon hideMsg () msg.textContent = "; msg.style.background = 'ingen'; 

Siden vi bare legger til en melding til div, Vi tar bare den første mutasjonen som observeres på den, og kontrollerer om en tekstknute ble satt inn. Hvis vi får mer enn en endring, kan vi bare gå gjennom mutasjoner matrise.

Hver mutasjon i mutasjoner array er representert av objektet MutationRecord med følgende egenskaper.

Egenskaper av MutationRecord

Og det er det. vi må bare sette koden sammen for det siste trinnet.

Nettleserstøtte

Henvisning

• “W3C DOM4 Mutation Observer.” W3C. Web. 19. juni 2015
• “MutationObserver.” Mozilla Developer Network. Web. 19. juni 2015.