MutationObserver nelle regole — una regola che sta al passo con la pagina
La tua regola viene eseguita dopo il caricamento della pagina — ma le pagine moderne non finiscono al caricamento. Una lista tira dentro altre voci, una SPA scambia intere viste, il contenuto compare secondi dopo. Un MutationObserver fa reagire la regola a ciò che accade dopo l'avvio.
Il problema: il codice viene eseguito una volta
Il JavaScript di una regola JustZix viene eseguito una volta, quando la pagina carica. Se nascondi .promo e la pagina aggiunge altri .promo allo scroll, il tuo codice non li ha mai visti — non esistevano ancora. Ti serve qualcosa che reagisca a un cambiamento nel DOM.
MutationObserver in tre righe
function apply() {
document.querySelectorAll('.promo').forEach(el => el.remove());
}
apply();
new MutationObserver(apply)
.observe(document.body, { childList: true, subtree: true });Il pattern è sempre lo stesso: una funzione apply fa il lavoro, la chiami una volta subito, poi la affidi al MutationObserver perché la chiami a ogni cambiamento.
Cosa significano le opzioni observe
childList: true— reagisci quando vengono aggiunti o rimossi elementi figli.subtree: true— osserva non solo i figli diretti ma l'intero sottoalbero. Senza, i cambiamenti in profondità nel DOM sfuggono.attributes: true— opzionale: reagisci anche ai cambiamenti di attributi (classi,style).
Trappola uno — il ciclo di retroazione
Se apply cambia il DOM essa stessa (e di solito lo fa), quel cambiamento attiva l'observer, che richiama apply. Per il nascondere è di solito innocuo — il secondo passaggio non ha più nulla da fare. Ma se apply aggiunge qualcosa, marca gli elementi fatti:
function apply() {
document.querySelectorAll('.card:not([data-jz])').forEach(el => {
el.dataset.jz = '1';
el.prepend(makeBadge());
});
}Il selettore :not([data-jz]) fa sì che tu gestisca ogni elemento esattamente una volta — il ciclo non si avvita.
Trappola due — il costo
Su pagine molto dinamiche l'observer si attiva centinaia di volte. Tieni apply poco costosa: un querySelector veloce, un marcatore «fatto», nessun calcolo pesante. Se deve essere pesante — avvolgila in un debounce (rinvia l'esecuzione di 100 ms e resetta il timer a ogni nuovo cambiamento).
Vedi anche
- Regole resistenti ai cambiamenti del DOM — un insieme più ampio di tecniche
- Auto-expand — MutationObserver in pratica
- Esempi — regole pronte da studiare
Installa JustZix — e scrivi regole che stanno al passo con la pagina.
Valuta questo articolo
Nessuna valutazione — sii il primo.