Kuinka käyttää MutationObserver API ta DOM-solmujen muutoksiin

Tässä on skenaario: Rita, aikakauslehtikirjoittaja muokkaa hänen artikkeliaan verkossa. Hän tallentaa muutokset ja näkee viestin “muutokset tallennettu!” Juuri silloin hän huomaa, että hän on jättänyt virheensä. Hän korjaa sen ja klikkaa “Tallentaa”, kun hän saa vihaisen puhelun pomoltaan.

Kun puhelu on päättynyt, hän kääntyy takaisin näyttöön “muutokset tallennettu!” sulkee tietokoneen ja myrskyt toimistosta.

Lukuun ottamatta minun tarinaa tarinankerrontaa varten, huomasimme tästä lyhyestä skenaariosta, mitä vaivaa tämä pysyvä viesti sai. Niinpä päätämme tulevaisuudessa välttää sen mahdollisuuksien mukaan ja käyttää sellaista, joka kehottaa käyttäjää vahvistamaan napsauttamalla sitä - tai katoaa yksin. Toisen käyttäminen pikaviesteihin on hyvä idea.

Tiedämme jo, miten elementti katoaa sivulta, joten sen ei pitäisi olla ongelma. Meidän on tiedettävä milloin se ilmestyi? Joten voimme tehdä sen katoavan uskottavan ajan kuluttua.

MutationObserver API

Kaiken kaikkiaan kun DOM-elementti (kuten viesti div) tai mikä tahansa muu solmu muuttuu, meidän pitäisi pystyä tuntemaan se. Jo pitkään kehittäjien oli luotettava häkkeihin ja kehyksiin, koska natiivi API puuttui. Mutta se oli muuttunut.

Meillä on nyt MutationObserver (aiemmin mutaatiotapahtumat). MutationObserver on JavaScript-ominaisuus, jossa on joukko ominaisuuksia ja menetelmiä. Se antaa meille mahdollisuuden tarkkaile muutosta mihin tahansa solmuun kuten DOM Element, Document, Text jne. Mutaation avulla tarkoitamme solmun lisääminen tai poistaminen ja solmun attribuutin ja tietojen muutokset.

Katsotaanpa esimerkkiä paremmasta ymmärryksestä. Teemme ensin perustuksen, jossa painetaan painiketta, kun Rita näki. Sitten me luoda ja yhdistää mutaation tarkkailija tähän viestiruutuun ja koodaa logiikka, jos haluat piilottaa viestin automaattisesti. Taju?

Huomautus: Saatat jossain vaiheessa kysyä minulta päänne “Miksi ei vain piilota viesti painikkeen napsauttamistapahtuman sisältä JavaScriptissä?” Esimerkiksi en toimi palvelimen kanssa, joten asiakas on tietenkin vastuussa viestin näyttämisestä ja voi piilottaa sen helposti. Mutta kuten Ritan muokkaustyökalussa, jos palvelin on se, joka päättää muuttaa DOM-sisältöä, asiakas voi pysyä valppaina ja odottaa.

Ensinnäkin luomme asennuksen, joka näyttää viestin napsautuksella.

 Näytä viesti

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Tallennetut muutokset!"; / * Lisää painike napsauttamalla tapahtumaa * / asiakirja .querySelector ('painiketta') .addEventListener ('napsauta', showMsg); toiminto showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Kun olemme saaneet alkuperäisen asennuksen, voit tehdä seuraavan;

• Luo MutationObserver objekti, jolla on käyttäjän määrittämä takaisinsoitto (toiminto määritellään myöhemmin postissa). Toiminto suoritetaan jokaisella mutaatiolla, jota MutationObserver.
• Luo konfiguraatioobjekti määrittääksesi, mitä mutaatioita on noudatettava MutationObserver.
• Sido MutationObserver kohteeseen, joka on "msg" div esimerkissämme.

(toiminto startObservation () var / * 1) MutationObserver-objektin luominen * / observer = uusi MutationObserver (toiminto (mutaatiot) mutationObserverCallback (mutations);), / * 2) Luo konfiguraatioobjekti * / config = childList: totta; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

Alla on luettelo ominaisuuksista config kohde, joka tunnistaa erilaisia ​​mutaatioita. Koska esimerkissämme käsitellään vain tekstiviestille luotua tekstisolmua, olemme käyttäneet sitä childList omaisuus.

Havaitut mutaatiotyypit

Nyt tähän soittopyyntötoimintoon, joka suoritetaan jokaisella havaitulla mutaatiolla.

toiminto mutationObserverCallback (mutaatiot) / * Tartu ensimmäiseen mutaatioon * / var mutationRecord = mutaatiot [0]; / * Jos lapsisolmu lisättiin, piilota viesti 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  toiminto hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Koska lisäämme vain viestin div, otamme vain ensimmäisen havaitun mutaation ja tarkistamme, onko tekstisolmu asetettu. Jos saamme enemmän kuin yhden muutoksen, voimme vain silmukata mutaatiot ryhmä.

Jokainen mutaatio mutaatiot array edustaa kohdetta MutationRecord ominaisuuksia.

Ominaisuudet MutationRecord

Ja… se on se. meidän on vain laitettava koodi yhteen viimeistä vaihetta varten.

Selaimen tuki

Viite

• “W3C DOM4 mutaation tarkkailija.” W3C. Web. 19. kesäkuuta 2015
• “MutationObserver.” Mozilla Developer Network. Web. 19. kesäkuuta 2015.