Kaip naudoti MutationObserver API DOM mazgų pakeitimams

Štai scenarijus: žurnalas „Rita“ redaguoja savo straipsnį internete. Ji išsaugo savo pakeitimus ir mato pranešimą “išsaugoti pakeitimai!” Tuomet ji pastebi, kad ji praleido klaidą. Ji pataiso ir spustelės “sutaupyti”, kai ji gauna piktas telefono skambutį iš savo viršininko.

Pasibaigus pokalbiui, ji grįžta į ekraną, mato “išsaugoti pakeitimai!” išjungia savo kompiuterį ir audrų iš biuro.

Nepaisant to, kad manęs nepavyko pasakyti apie pasakojimą, nuo trumpo scenarijaus pastebėjome, kokių problemų kelia nuolatinis pranešimas. Taigi ateityje mes nusprendžiame, kad tai būtų įmanoma, kai tik įmanoma, ir naudokitės tuo, kuris paskatins vartotoją patvirtinti jį spustelėjęs - arba išnyksta savaime. Naudojant antrąjį, kad gautumėte greitus pranešimus, gera idėja.

Mes jau žinome, kaip padaryti, kad elementas išnyktų iš puslapio, todėl neturėtų būti problema. Ką turime žinoti kada jis pasirodė? Taigi galime padaryti, kad jis išnyktų po patikimo laiko.

MutationObserver API

Apskritai, kai DOM elementas (kaip pranešimas div) arba bet kuriuos kitus mazgų pakeitimus, turėtume žinoti. Ilgą laiką kūrėjai turėjo pasikliauti hacks ir sistemomis dėl to, kad trūksta vietinės API. Bet tai pasikeitė.

Dabar turime MutationObserver (anksčiau mutacijos įvykiai). MutationObserver yra „JavaScript“ gimtoji objektas, turintis savybių ir metodų rinkinį. Tai leidžia mums stebėkite bet kurio mazgo pakeitimą kaip DOM elementas, dokumentas, tekstas ir kt mazgo pridėjimas arba pašalinimas ir mazgo atributo ir duomenų keitimas.

Pamatysime geresnio supratimo pavyzdį. Pirmiausia nustatysime, kur paspaudus mygtuką bus rodomas pranešimas, kaip ir Rita. Tada mes sukurti ir susieti mutacijos stebėtoją su šiuo pranešimo laukeliu ir koduoti logiką, kad automatiškai paslėptumėte pranešimą. Savvy?

Pastaba: Jūs galbūt kada nors paprašėte manęs galvoje “Kodėl gi ne tik paslėpti pranešimą iš mygtuko paspaudimo įvykio savyje „JavaScript“?” Pavyzdžiui, aš neveikiu su serveriu, todėl, žinoma, klientas yra atsakingas už pranešimą ir gali jį paslėpti pernelyg lengvai. Tačiau, kaip ir Rita redagavimo įrankyje, jei serveris yra tas, kuris nusprendžia keisti DOM turinį, klientas gali likti budrus ir laukti.

Pirma, mes sukuriame sąranką, kad būtų rodomas pranešimas mygtuko paspaudimu.

 Rodyti pranešimą

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Išsaugoti pakeitimai!"; / * Pridėti mygtuko paspaudimą įvykis * / dokumentas .querySelector („mygtukas“) .addEventListener („spustelėkite“, „ShowMsg“); funkcija showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Kai pradėsime pradinį nustatymą, atlikite šiuos veiksmus:

• Sukurti MutationObserver objektas su vartotojo nustatytu atgalinio ryšio funkcija (funkcija apibrėžiama vėliau paštu). Funkcija bus vykdoma kiekvienoje mutacijoje, kurią pastebėjo MutationObserver.
• Sukurkite konfigūracijos objektą, norėdami nurodyti, kokių mutacijų reikia stebėti MutationObserver.
• Susegti MutationObserver į tikslą, kuris yra „msg“ div mūsų pavyzdyje.

(funkcija startObservation () var / * 1) Sukurkite MutationObserver objektą * / observer = new MutationObserver (funkcija (mutacijos) mutationObserverCallback (mutacijos);), / * 2) Sukurkite konfigūracijos objektą * / config = childList: tiesa; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

Toliau pateikiamas sąrašo ypatybių sąrašas konfig objektas, identifikuojantis įvairių rūšių mutacijas. Kadangi mūsų pavyzdyje nagrinėjame tik teksto tekstą, sukurtą pranešimo tekstui, mes naudojome vaikų sąrašas nuosavybė.

Nustatytų mutacijų rūšys

Dabar į tą atgalinio ryšio funkciją, kuri įvykdoma kiekvienoje stebimoje mutacijoje.

funkcija mutationObserverCallback (mutacijos) / * Paimkite pirmąją mutaciją * / var mutationRecord = mutacijos [0]; / * Jei buvo pridėtas vaiko mazgas, paslėpkite pranešimą po 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  funkcija hideMsg () msg.textContent = "; msg.style.background = 'nėra'; 

Kadangi pridedame tik pranešimą div, mes tik paimame pirmąją pastebėtą mutaciją ir patikrinsime, ar įterptas teksto mazgas. Jei įvyksta daugiau nei vienas pokytis, mes galime tik perjungti mutacijos masyvas.

Kiekviena. \ T mutacijos masyvą vaizduoja objektas MutationRecord su šiomis savybėmis.

Ypatybės MutationRecord

Štai ir viskas. mes tiesiog turime įdėti kodą į paskutinį žingsnį.

Naršyklės palaikymas

Nuoroda

• “W3C DOM4 mutacijos stebėtojas.” W3C. Žiniatinklis. 2015 m. Birželio 19 d
• “MutationObserver.” „Mozilla“ kūrėjų tinklas. Žiniatinklis. 2015 m. Birželio 19 d.