Slik bruker du MutationObserver API for DOM Node Changes

Her er et scenario: Rita, et magasinforfatter 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 ved å 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!" Slår av datamaskinen 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 alene . Å 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. Hva vi trenger å vite er når syntes 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 en annen knutepunkt endres, bør vi kunne kjenne det. I lang tid måtte utviklere stole på hack og rammer på grunn av mangelen på en innfødt API. Men det hadde endret seg.

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 hvilken som helst 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 opprette og knytte en mutasjonsobservator til meldingsboksen og kode logikken for å skjule meldingen automatisk . Erfarne?

Merk : Du kan på et tidspunkt eller har allerede spurt meg i hodet ditt " Hvorfor ikke bare skjule meldingen fra innsiden av knappen, klikk på 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 våken 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:

• Opprett et 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 MutationObserver til målet, som er 'msg' div i vårt eksempel.

 (mutation); / / 2) Opprett en konfigurasjonsobjekt * / config = {childList: () (varsling) {var / * 1) Opprett et MutationObserver objekt * / observatør = ny MutationObserver ekte}; / * 3) Lim'em alle * / observer.observe (msg, config); }) (); 

Nedenfor er en liste over egenskaper for config objektet som identifiserer ulike typer mutasjoner. Siden i vårt eksempel handler vi bare om en childList opprettet for meldingsteksten, vi har brukt childList .

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, tar vi 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 mutations .

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

Egenskaper for MutationRecord

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

Nettleserstøtte

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

Styrker webutviklings arbeidsflyt med Yeoman

Det er mange verktøy for å bygge web-apps, men å sette dem alle sammen og gjøre dem i bruk i vår arbeidsflyt, kan være veldig tungvint. Vi har også en tendens til å gjøre gjentatte oppgaver når du bygger webapper, for eksempel å lage filer, lage mapper, installere en rekke frontend-biblioteker. Ville det

(Tekniske og design tips)

Påvirkningen av Microsoft Inclusive Design i Visual Studio Code

Universal, eller inkluderende design er en ny designfilosofi Microsoft ser ut til å ta ganske seriøst i programvareutvikling nylig. Inklusiv design tar tilgjengelig design til neste nivå, da det ser tilgjengelighet fra et mye bredere perspektiv. Da jeg prøvde Microsofts nye kildekode redaktør, Visual Studio Code, oppsto spørsmålet om hvordan de implementerte teorien i praksis naturligvis i mitt sinn.Dette

(Tekniske og design tips)