DOM o'zgarishlarini Javascript Web API, Mation Observer-da tinglash (ishora: eng yaxshi amaliyot)

"MutationObserver" - bu DOM-dagi o'zgarishlarni aniqlash uchun zamonaviy brauzerlar tomonidan ta'minlanadigan Web API. Ushbu API yordamida siz DOM-dagi o'zgarishlarni, masalan, qo'shilgan yoki o'chirilgan tugunlarni, atributlarni yoki matnli tugunlarning matn tarkibidagi o'zgarishlarni tinglashingiz va o'zgarishlar qilishingiz mumkin.

Hozirda veb-dasturlar mijoz tomonidan murakkablashmoqda. DOM o'zgarishini tinglab, ko'p ish qilishingiz kerak. Masalan, siz DOM o'zgarishidan foydalanuvchiga real vaqt rejimida bildirishnoma yubormoqchisiz yoki JS tizimidan foydalanib, har xil o'zgarish uchun har xil bo'lgan yoki JS plaginining qaytish qiymati asosida ish qilishingiz kerak .

SetInterval API bilan "so'rovnoma" Mutatsiya Observer-ning bir nechta alternativlaridan biridir. "Mutatsiya kuzatuvchisi" nima qilayotganini yaxshiroq tushunish uchun uni ko'rib chiqaylik.

indeks.html

oylar.js

addMonth - bu 2 soniyadan keyin oyning yoki raqamning tasodifiy nomini OfMonth massividan qaytaradigan oddiy funksiya.

Undan keyin so'rov o'tkazish funktsiyasini qo'shaylik.

DOM o'zgarishini chop etish uchun CheckMonth DOM-da biron bir narsa o'zgarganini har soniyada tekshirishi kerak va tekshiruvdan so'ng tashqiHTML-dan uzoqlashishi kerak. O'zgarishlarni olgandan so'ng, oraliq aniqlanadi. setInterval WebAPI vaqti-vaqti bilan biron bir o'zgarish yuz berganligini tekshiradigan vazifani o'rnatishi mumkin. Tabiiyki, ushbu usul veb-ilova / veb-sayt ishini sezilarli darajada yomonlashtiradi.

MutationObserver dasturini amalga oshirish:

MutationObserver dasturini dasturga kiritish juda oson. Siz har bir mutatsiya sodir bo'lganida chaqiriladigan funktsiyani berib, MutationObserver nusxasini yaratishingiz kerak. Eng yaxshisi, zo'r ijrochi. Deyarli barcha so'nggi brauzerlar qo'llab-quvvatlaydi. Oldingi kodni MutionObserver-ni qo'llash orqali qanday amalga oshirish mumkinligini kodga olaylik.

Ovoz berish funktsiyasini qo'shish o'rniga addMonth funktsiyasidan keyin MutationObserver-dan foydalanishimiz mumkin.

Bu erda nima qildik, biz mutatsion.addedNodes.length tomonidan DOM-ga biron bir tugun qo'shilganligini tekshirdik. Agar u to'g'ri bo'lsa, biz qo'shilgan tugunni ro'yxatga olamiz.

Yaratilgan ob'ekt uchta usulga ega:

  • kuzatish - o'zgarishlarni tinglashni boshlaydi. Ikkita dalil oladi - siz kuzatmoqchi bo'lgan DOM tuguni va sozlash ob'ekti
  • ajratish - o'zgarishlarni tinglashni to'xtatadi
  • takeRecords - qo'ng'iroqni qaytarishdan oldin so'nggi o'zgarishlarni qaytaradi.

Quyidagi parcha kuzatishni qanday boshlashni ko'rsatib beradi:

To‘liq kod:

Bu shunchaki qo'shilganList-dan tashqari, bolalar ro'yxati va boshqa xususiyatlarni, xususan, subtrudni va boshqalarni o'chirishni tinglashi mumkin. Quyidagi kod blokini tekshiring.

Bu haqida hamma narsa haqida xabar beradiMutationObserver` U so'rovnoma yoki boshqa echimlarga nisbatan bir qator afzalliklarni taqdim etadi. Bu yanada optimallashtirilgan, chunki u partiyalarning o'zgarishiga olib keladi. Buning ustiga, MutationObserver-ni barcha yirik zamonaviy brauzerlar, shuningdek kaput ostidagi MutationEvents-dan foydalanadigan bir nechta polyfillar qo'llab-quvvatlaydi. MutationObserver API juda kuchli, ma'lumotli va oxir-oqibat hack-bepul.

Asinxron JavaScript-ni batafsil o'rganing (qo'ng'iroqni qaytarish, va'da berish, generator va asinx-kutish)

React JS kancalari haqida quyidagi maqoladan bilib oling.

Bugun hammasi :)