MutationObserver w regułach — reguła, która nadąża za stroną
Twoja reguła działa po wczytaniu strony — ale nowoczesne strony nie kończą się na wczytaniu. Lista doładowuje kolejne wpisy, SPA podmienia całe widoki, treść pojawia się sekundy później. MutationObserver sprawia, że reguła reaguje na to, co dzieje się po starcie.
Problem: kod biegnie raz
JavaScript reguły JustZix wykonuje się raz, gdy strona się ładuje. Jeśli ukrywasz .promo, a strona dorzuca kolejne .promo przy scrollu — Twój kod ich nie widział, bo jeszcze nie istniały. Potrzebujesz czegoś, co zareaguje na zmianę DOM-u.
MutationObserver w trzech liniach
function apply() {
document.querySelectorAll('.promo').forEach(el => el.remove());
}
apply();
new MutationObserver(apply)
.observe(document.body, { childList: true, subtree: true });Wzorzec jest zawsze ten sam: funkcja apply robi swoje, wywołujesz ją raz od razu, a potem oddajesz MutationObserver-owi, żeby wołał ją przy każdej zmianie.
Co znaczą opcje observe
childList: true— reaguj, gdy dodawane lub usuwane są elementy potomne.subtree: true— obserwuj nie tylko bezpośrednie dzieci, ale całe poddrzewo. Bez tego zmiany głęboko w DOM-ie umkną.attributes: true— opcjonalnie: reaguj też na zmianę atrybutów (klasy,style).
Pułapka pierwsza — pętla zwrotna
Jeśli apply sama zmienia DOM (a zwykle zmienia), to ta zmiana odpala obserwatora, który znów woła apply. Przy ukrywaniu to zwykle nieszkodliwe — drugi przebieg nie ma nic do roboty. Ale jeśli apply coś dodaje, oznaczaj zrobione elementy:
function apply() {
document.querySelectorAll('.card:not([data-jz])').forEach(el => {
el.dataset.jz = '1';
el.prepend(makeBadge());
});
}Selektor :not([data-jz]) sprawia, że każdy element obsłużysz dokładnie raz — pętla się nie nakręca.
Pułapka druga — koszt
Na bardzo dynamicznych stronach obserwator odpala się setki razy. Trzymaj apply tanią: szybki querySelector, znacznik „zrobione", żadnych ciężkich obliczeń. Jeśli musi być ciężka — opakuj ją w debounce (odłóż wykonanie o 100 ms i resetuj licznik przy kolejnej zmianie).
Zobacz też
- Reguły odporne na zmiany DOM — szerszy zestaw technik
- Auto-rozwijanie — MutationObserver w praktyce
- Przykłady — gotowe reguły do podejrzenia
Zainstaluj JustZix — i pisz reguły, które nadążają za stroną.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.