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.

Valves dampmaskin: Alt du trenger å vite

Når det gjelder gaming duell av PC vs konsoll gaming, har PC spill alltid blitt spilt på et skrivebord med en liten skjerm styrt av en mus og tastatur, mens spillkonsoller har kontroller og spilles på fjernsynet i stuen. Vel, Valves dampmaskin endrer alt det.Steam Machine er en PC / konsoll hybrid spillplattform hvor du kan spille alle PC-spillene dine på en stor skjerm og den revolusjonerende kontrolleren. I

(Tekniske og design tips)

Slik spiller du animerte GIFs påClick

Den animerte GIF er en populær måte å visualisere et designkonsept på (her er et eksempel på hvordan vi gjorde det for posttekst-effekter opprettet med CSS) eller vise et kort videoklipp. Men hvis du har for mange av dem på samme side, vil det avvike brukerens fokus. For sider som viser mange GIFer, er dette dårlige nyheter.Løsnin

(Tekniske og design tips)