Kā lietot MutationObserver API DOM mezglu izmaiņām

Lūk, scenārijs: žurnāls Rita Rita rediģē savu rakstu tiešsaistē. Viņa saglabā izmaiņas un redz ziņojumu “saglabātas izmaiņas!” Tikai tad viņa pamanīja nepareizu kļūdu. Viņa to labo un gatavojas noklikšķināt “saglabāt”, kad viņa no sava priekšnieka saņem dusmīgu telefona zvanu.

Pēc tam, kad zvans ir beidzies, viņa atgriežas ekrānā, redz “saglabātas izmaiņas!” pārtrauc savu datoru un vētras no biroja.

Neatkarīgi no manas nespējas stāstīt, mēs no šī īsa scenārija pamanījām, kādas problēmas pastāvīgi uzrakstīja. Tātad nākotnē mēs nolemsim to izvairīties, kad vien iespējams, un izmantot to, kas liek lietotājam apstiprināt, noklikšķinot uz tā - vai pazūd pati. Labas idejas ir otrās informācijas izmantošana ātrām ziņām.

Mēs jau zinām, kā padarīt elementu pazušanu no lapas, tāpēc tas nedrīkst būt problēma. Mums ir jāzina kad tas parādījās? Tāpēc mēs varam padarīt to izzūd pēc ticama laika.

MutationObserver API

Kopumā, kad DOM elements (piemēram, ziņojums div) vai jebkura cita mezgla maiņa, mums ir jāspēj to zināt. Ilgu laiku izstrādātājiem bija jāpaļaujas uz hacks un ietvariem, jo ​​trūkst vietējās API. Bet tas bija mainījies.

Mums tagad ir MutationObserver (iepriekš Mutācijas notikumi). MutationObserver ir JavaScript vietējais objekts ar īpašību un metožu kopumu. Tas ļauj mums ievērot izmaiņas jebkurā mezglā piemēram, DOM elements, dokuments, teksts utt. Ar mutāciju mēs domājam mezgla pievienošana vai noņemšana un mezgla atribūta un datu izmaiņas.

Redzēsim piemēru labākai izpratnei. Vispirms mēs izveidosim iestatījumu, kur uz pogas klikšķa parādīsies ziņojums, piemēram, Rita. Tad mēs izveidot un saistīt mutācijas novērotāju ar šo ziņojumu lodziņu un kodēt loģiku, lai automātiski paslēptu ziņu. Savvy?

Piezīme: Jūs varat kaut kādā brīdī vai jau man ir jautājis savā galvā “Kāpēc ne tikai paslēpt ziņojumu no pogas klikšķa notikuma iekšpuses JavaScript?” Manā piemērā es nestrādā ar serveri, tāpēc, protams, klients ir atbildīgs par ziņojuma rādīšanu un var to slēpt pārāk viegli. Bet, tāpat kā Rita rediģēšanas rīkā, ja serveris ir tāds, kurš nolemj mainīt DOM saturu, klients var tikai palikt brīdināts un gaidīt.

Pirmkārt, mēs izveidojam iestatījumu, lai parādītu ziņojumu uz pogas klikšķa.

 Rādīt ziņojumu

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Saglabātas izmaiņas"; / * Pievienot pogas klikšķi notikums * / dokuments .querySelector ('poga') .addEventListener ('klikšķis', showMsg); funkcija showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Kad mēs esam ieguvuši sākotnējo iestatīšanu, ļauj to darīt;

• Izveidojiet a MutationObserver objekts ar lietotāja definētu atzvanīšanas funkciju (funkcija ir definēta vēlāk ziņojumā). Funkcija tiks izpildīta katrai mutācijai, ko novēro MutationObserver.
• Izveidojiet konfigurācijas objektu, lai norādītu mutāciju veidu, kas jāievēro MutationObserver.
• Iesiet MutationObserver mērķim, kas ir “msg” div mūsu piemērā.

(funkcija startObservation () var / * 1) Izveidot MutationObserver objektu * / observer = new MutationObserver (funkcija (mutācijas) mutationObserverCallback (mutācijas);), / * 2) Izveidojiet konfigurācijas objektu * / config = bērnu saraksts: true; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

Zemāk ir saraksts ar konfigur objekts, kas identificē dažāda veida mutācijas. Tā kā mūsu piemērā mēs nodarbojamies tikai ar teksta teksta mezglu, kas izveidots ziņojuma tekstam, mēs esam to izmantojuši bērnu saraksts īpašums.

Novēroto mutāciju veidi

Tagad uz šo atzvanīšanas funkciju, kas tiek izpildīta katrai novērotajai mutācijai.

funkcija mutācijaObserverCallback (mutācijas) / * Satveriet pirmo mutāciju * ​​/ var mutationRecord = mutācijas [0]; / * Ja ir pievienots bērnu mezgls, paslēpiet ziņu pēc 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  funkcija hideMsg () msg.textContent = "; msg.style.background = 'neviens'; 

Tā kā mēs tikai pievienojam ziņu div, mēs vienkārši paņemam pirmo mutāciju, kas novērota, un pārbaudiet, vai ir ievietots teksta mezgls. Ja notiks vairāk nekā viena pārmaiņa, mēs varam vienkārši izlocīties caur mutācijas masīvs.

Katra mutācija mutācijas masīvu attēlo objekts MutationRecord ar šādām īpašībām.

Īpašības MutationRecord

Un… tā ir. mums tikai jāpievieno kods pēdējam solim.

Pārlūka atbalsts

Atsauce

• “W3C DOM4 mutācijas novērotājs.” W3C. Tīmeklis. 2015. gada 19. jūnijs
• “MutationObserver.” Mozilla izstrādātāju tīkls. Tīmeklis. 2015. gada 19. jūnijs.