DOM izmaiņu noklausīšanās, izmantojot Javascript Web API, Mutation Observer (padoms: tā ir labākā prakse)

“MutationObserver” ir Web API, ko nodrošina mūsdienu pārlūkprogrammas izmaiņu noteikšanai DOM. Izmantojot šo API, jūs varat klausīties izmaiņas DOM, piemēram, pievienotos vai noņemtos mezglus, piedēvēt izmaiņas vai izmaiņas teksta mezglu teksta saturā un veikt izmaiņas.

Mūsdienās klienta pusē tīmekļa lietotnes kļūst sarežģītas. Jums ir daudz jādara, klausoties DOM izmaiņas. Piemēram, jūs vēlaties nosūtīt reāllaika paziņojumu lietotājam no DOM izmaiņām vai izmantojat JS sistēmu, kurai ir atšķirīga izturēšanās pret dažāda veida izmaiņām, vai arī jums jādara kāda darbība, pamatojoties uz JS spraudņa atgriešanās vērtību. .

“Aptaujāšana” ar setInterval API ir viena no nedaudzajām Mutation Observer alternatīvām. Apskatīsim to, lai labāk izprastu, ko dara “Mutation Observer”.

indekss.html

mēneši.js

addMonth ir vienkārša funkcija, kas pēc 2 sekundēm atgriež mēneša nosaukuma vai skaitļa izlases veida vārdu no nameOfMonth masīva.

Pēc tam pievienosim vēlēšanu funkciju.

Lai izdrukātu DOM maiņu, CheckMonth ir jāpārbauda katru sekundi, ja kaut kas mainās DOM, un pēc pārbaudes tas tiek izdrukāts no ārējāHTML. Pēc izmaiņu saņemšanas tas izdzēš intervālu. setInterval WebAPI var iestatīt uzdevumu, kas periodiski pārbaudītu, vai ir notikušas izmaiņas. Protams, šī metode ievērojami pasliktina tīmekļa lietotņu / vietņu veiktspēju.

MutationObserver ieviešana:

MutationObserver ieviešana lietotnē ir diezgan vienkārša. Jums jāizveido MutationObserver piemērs, nododot tam funkciju, kas tiktu izsaukta katru reizi, kad ir notikusi mutācija. Un kas ir labākais, tas ir lielisks izpildītājs. Gandrīz visi jaunākie pārlūki to atbalsta. Pārlūkosim kodu, kā var izdarīt iepriekšējo kodu, ieviešot MutationObserver.

Tā vietā, lai pievienotu aptaujas funkciju, mēs varam izmantot MutationObserver pēc addMonth funkcijas.

Ko mēs šeit izdarījām, mēs pārbaudījām, vai ar mutation.addedNodes.length DOM ir pievienots kāds mezgls. Ja tas atgriežas patiesībā, mēs reģistrējam pievienoto mezglu.

Izveidotajam objektam ir trīs metodes:

  • novērot - sāk klausīties izmaiņas. Izsaka divus argumentus - DOM mezglu, kuru vēlaties novērot, un iestatījumu objektu
  • atvienot - pārstāj klausīties izmaiņas
  • takeRecords - atgriež pēdējo izmaiņu partiju pirms atzvanīšanas tiek aktivizēts.

Šis fragments parāda, kā sākt novērot:

Pilns kods:

Izņemot tikai pievienošanu bērnu sarakstam, tas var klausīties arī bērnu saraksta noņemšanu un daudz ko citu, piemēram, atribūtus, apakškrāsas utt. Pārbaudiet koda bloku zemāk.

Tas attiecas uzMutationObserver`. Tas piedāvā vairākas priekšrocības salīdzinājumā ar aptauju vai citiem risinājumiem. Tas ir daudz optimizēts, jo tas aktivizē izmaiņas partijās. Papildus tam MutationObserver atbalsta visi lielākie mūsdienu pārlūkprogrammas, kā arī pāris polifilmu, kuras zem pārsega izmanto MutationEvents. MutationObserver API ir jaudīgs, informatīvs un galu galā bezmaksas.

Uzziniet sīkāku informāciju par asinhrono JavaScript (atzvanīšana, solījums, ģenerators un async-wait)

Uzziniet par React JS āķiem no zemāk esošā raksta.

Tas ir viss šodienai :)