Kuidas kasutada MutationObserveri API DOM sõlme muutuste jaoks

Siin on stsenaarium: ajakirjanik Rita redigeerib oma artiklit internetis. Ta salvestab oma muudatused ja näeb sõnumit “salvestatud muudatused!” Lihtsalt siis märkab ta, et ta on vastamata. Ta parandab selle ja kavatseb klõpsata “salvestage”, kui ta saab oma ülemusest vihane telefonikõne.

Pärast kõne lõppemist pöörab ta tagasi ekraanile, näeb “salvestatud muudatused!” sulgeb oma arvuti ja tormid kontorist välja.

Peale oma lugupidamatuse lugu rääkides märkasime sellest lühikesest stsenaariumist, milliseid probleeme see püsiv sõnum valmistas. Niisiis otsustame tulevikus seda võimaluse korral vältida ja kasutada seda, mis kutsub kasutajalt seda kinnitama - või kaob. Teise kasutamine kiirsõnumite jaoks on hea mõte.

Me teame juba, kuidas muuta element leheküljelt kaduma, nii et see ei tohiks olla probleem. Me peame teadma millal see ilmus? Nii et me saame selle kaduda usutava aja pärast.

MutationObserveri API

Üldiselt, kui DOM element (nagu sõnum div) või mis tahes muud sõlme muudatused, peaksime seda teadma. Pikka aega pidid arendajad tuginema natiivsete API puudumise tõttu häkkidele ja raamistikele. Aga see oli muutunud.

Meil on nüüd MutationObserver (varem mutatsiooniüritused). MutationObserver on JavaScript natiivne objekt, millel on omaduste ja meetodite kogum. See võimaldab meil jälgige muutust mis tahes sõlmes nagu DOM element, dokument, tekst jne. Mutatsiooni järgi me mõtleme sõlme lisamine või eemaldamine ja sõlme atribuudi ja andmete muutmine.

Vaatame näiteks paremat mõistmist. Teeme kõigepealt seadistuse, kus nupu klõpsamisel ilmub teade, nagu Rita nägi. Siis me luua ja siduda selle sõnumikasti mutatsiooni vaatleja ja koodi loogika sõnumi automaatseks peitmiseks. Savvy?

Märge: Te võite mingil hetkel või peagi küsis mind oma peaga “Miks mitte ainult peita sõnum nupu klõpsamise sündmuse sees, JavaScript?” Minu näites ei tööta ma serveriga, nii et loomulikult vastutab klient sõnumi näitamise eest ja võib selle liiga lihtsalt varjata. Aga nagu Rita redigeerimisvahendis, kui server on see, kes otsustab DOMi sisu muuta, saab klient jääda ainult tähelepanelikuks ja oodata.

Esiteks loome seadistuse, et näidata nuppu nupu klõpsamisel.

 Näita sõnumit

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Salvestatud muudatused!"; / * Lisa nupp klõpsuga sündmus * / dokument .querySelector ('nupp') .addEventListener ('kliki', showMsg); funktsioon showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Kui meil on algne häälestus käivitatud, siis tehke järgmist;

• Loo MutationObserver kasutaja määratud tagasihelistamisfunktsiooniga objekt (funktsioon määratletakse hiljem postituses). Funktsioon käivitub iga mutatsiooni puhul, mida tähistab MutationObserver.
• Looge konfigureerimisobjekt, et määrata, milliseid mutatsioone tuleb järgida MutationObserver.
• Siduge MutationObserver sihtmärgile, mis on "msg" div meie näites.

(funktsioon startObservation () var / * 1) MutationObserver objekti * / observer = uue MutationObserveri loomine (funktsioon (mutatsioonid) mutationObserverCallback (mutatsioonid);), / * 2) Loo konfigureerimisobjekt * / config = lapse nimekiri: tõsi; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

Allpool on loetelu omadustest config objekt, mis identifitseerib erinevaid mutatsioone. Kuna meie näites käsitleme ainult sõnumi teksti jaoks loodud lapse tekstisõlme, oleme seda kasutanud lapse nimekiri vara.

Täheldatud mutatsioonide liigid

Sellele tagasihelistamisfunktsioonile, mis täidetakse iga täheldatud mutatsiooni korral.

funktsioon mutatsioonObserverCallback (mutatsioonid) / * Haara esimene mutatsioon * / var mutationRecord = mutatsioonid [0]; / * Kui lisati lapsõlm, peida msg pärast 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  funktsioon hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Kuna me lisame ainult sõnumi div, me lihtsalt haarame esimesena täheldatud mutatsiooni ja kontrollime, kas tekstisõlm on sisestatud. Kui me saame rohkem kui ühe muudatuse, siis saame lihtsalt läbi mutatsioonid massiivi.

Iga mutatsioon mutatsioonid massiivi esindab objekt MutationRecord järgmiste omadustega.

Selle omadused MutationRecord

Ja see ongi kõik. me peame koodi lõplikult lõpule viima.

Brauseri tugi

Viide

• “W3C DOM4 mutatsiooni vaatleja.” W3C. Võrk. 19. juuni 2015
• “MutationObserver.” Mozilla arendajavõrk. Võrk. 19. juuni 2015.