Kako uporabljati API MutationObserver za spremembe vozlišča DOM

Tukaj je scenarij: pisateljica revije Rita ureja njen članek na spletu. Shrani spremembe in vidi sporočilo “spremembe shranjene!” Takrat je opazila tipkarsko napako, ki jo je zamudila. Popravi jo in kmalu klikne “shranite”, ko je dobil jezen telefonski klic od svojega šefa.

Ko je klic končan, se obrne nazaj na zaslon, vidi “spremembe shranjene!” izklopi računalnik in neurje iz pisarne.

Razen moje nesposobnosti za pripovedovanje zgodb, smo iz tega kratkega scenarija opazili, kakšne težave je vztrajno sporočilo pripravljalo. Torej se bomo v prihodnosti odločili, da se bomo izogibali, ko bo to mogoče, in uporabili tistega, ki uporabnika bodisi pozove, da ga potrdi s klikom - ali izgine sam. Uporaba drugega za kratka sporočila je dobra ideja.

Že vemo, kako narediti element, ki izgine iz strani, tako da ne bi smel biti problem. Kar moramo vedeti je kdaj se je pojavila? Tako lahko izginemo po verodostojnem času.

API MutationObserver

Na splošno, ko element DOM (kot sporočilo div) ali katero koli drugo spremembo vozlišča, bi jo morali vedeti. Dolgo časa so se razvijalci zaradi pomanjkanja domačega API-ja morali zanašati na hake in okvire. Toda to se je spremenilo.

Zdaj imamo MutationObserver (prej mutacijski dogodki). MutationObserver je naraven objekt z nizom lastnosti in metod. To nam omogoča opazujte spremembo na katerem koli vozlišču kot so DOM Element, Document, Text itd. Z mutacijo mislimo dodajanje ali odstranjevanje vozlišča in spremembe atributa in podatkov vozlišča.

Oglejmo si primer za boljše razumevanje. Najprej naredimo nastavitev, kjer se po kliku gumba prikaže sporočilo, kot je tisto, kar je videla Rita. Potem bomo ustvarite in povežite opazovalca mutacije s tem sporočilnim oknom in kodirajte logiko za samodejno skrivanje sporočila. Zdrava?

Opomba: Lahko si me na neki točki ali si že vprašal v svoji glavi “Zakaj ne bi samo skrili sporočila znotraj samega dogodka klikanja gumba v JavaScriptu?” V mojem primeru ne delam s strežnikom, zato je seveda odjemalec odgovoren, da prikaže sporočilo in ga lahko prepogosto skrije. Toda kot v Ritinem orodju za urejanje, če je strežnik tisti, ki se odloči spremeniti vsebino DOM-a, lahko odjemalec ostane le buden in počaka.

Najprej ustvarimo nastavitev za prikaz sporočila o kliku gumba.

 Pokaži sporočilo

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Spremembe shranjene!"; / * Dodaj gumb klik na dogodek * / document .querySelector ('gumb') .addEventListener ('klik', showMsg); funkcija showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Ko smo zagnali začetno nastavitev, lahko naredimo naslednje;

• Ustvariti MutationObserver objekt z uporabniško določeno funkcijo povratnega klica (funkcija je definirana pozneje v pošti). Funkcija se bo izvajala na vsaki mutaciji, ki jo bo opazil MutationObserver.
• Ustvarite objekt config, da določite vrsto mutacij, ki jih bo opazil MutationObserver.
• Povežite MutationObserver do cilja, ki je "msg" div v našem primeru.

(funkcija startObservation () var / * 1) Ustvarite objekt MutationObserver * / opazoval = nov MutationObserver (funkcija (mutacije) mutationObserverCallback (mutacije);), / * 2) Ustvarite konfigentni objekt * / config = childList: prav; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

Spodaj je seznam lastnosti za config objekt, ki identificira različne vrste mutacij. Ker se v našem primeru ukvarjamo le z otrokovim besedilnim vozliščem, ustvarjenim za besedilo sporočila, smo uporabili childList nepremičnine.

Opažene vrste mutacij

Zdaj, na funkcijo povratnega klica, ki se izvede na vsaki opazovani mutaciji.

funkcija mutationObserverCallback (mutacije) / * Zgrabite prvo mutacijo * / var mutationRecord = mutacije [0]; / * Če je bilo dodano podrejeno vozlišče, skrij sporočilo po 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Ker dodajamo samo sporočilo div, zgrabili bomo prvo opaženo mutacijo in preverili, ali je bilo vstavljeno besedilno vozlišče. Če se zgodi več kot ena sprememba, lahko preprosto zapletemo mutacije matrika.

Vsaka mutacija v mutacije predmet predstavlja predmet MutationRecord z naslednjimi lastnostmi.

Lastnosti MutationRecord

In to je to. šele moramo skupaj pripraviti kodo za zadnji korak.

Podpora za brskalnik

Referenca

• “W3C DOM4 opazovalec mutacij.” W3C. Splet. 19. junij 2015
• “MutationObserver.” Mozilla Developer Network. Splet. 19. junij 2015.