„Esegui JS una sola volta” — script senza effetti collaterali sulle SPA
Sulle pagine di tipo applicazione a pagina singola (SPA), JustZix riesegue il JavaScript di un set di regole dopo ogni cambio di indirizzo — così la regola elabora la vista appena renderizzata. Per la maggior parte degli script va bene. Ma per gli script con effetti collaterali globali ciò porta a un accumulo. La nuova opzione „Esegui JS una sola volta” risolve questo problema.
Il problema: uno script eseguito più e più volte
Una SPA cambia il contenuto senza ricaricare il documento. JustZix rileva questa navigazione e riesegue il JS del set di regole affinché la regola funzioni sulla nuova vista. Ma se lo script aggiunge un listener di eventi, imposta un intervallo (setInterval) o „avvolge” una funzione della pagina (come window.fetch o dataLayer.push), ogni riesecuzione aggiunge un\'altra copia. Dopo alcune transizioni ti ritrovi con cinque listener identici, cinque intervalli paralleli e una funzione avvolta cinque volte.
La soluzione: la casella „Esegui JS una sola volta”
La scheda JavaScript dell\'editor del set di regole ha ora un campo „Esegui JS una sola volta” (disattivato per impostazione predefinita — nulla cambia per i set di regole esistenti). Quando è selezionato, il JS del set di regole viene eseguito una sola volta nell\'arco di vita del documento. La navigazione SPA, un cambio di #hash e il pulsante Indietro non lo eseguono più di nuovo. Un ricaricamento completo della pagina dà sempre un nuovo avvio.
Quando selezionarla
Attiva „Esegui JS una sola volta” per gli script che:
- aggiungono listener globali (
addEventListenersudocumentowindow), - impostano intervalli o timeout,
- modificano l\'oggetto
windowo avvolgono funzioni integrate, - impostano un observer (
MutationObserver) che comunque catturerà da solo le viste successive.
Quando lasciarla disattivata
Lascia l\'opzione disattivata per gli script che devono reagire a ogni sotto-vista SPA — per esempio quelli che ogni volta trovano elementi appena renderizzati e ci fanno qualcosa. Se il tuo script è idempotente (sicuro da eseguire più volte), anche in questo caso non devi cambiare nulla.
Buona pratica: codice idempotente
Indipendentemente da questa opzione, vale la pena scrivere script resistenti alla riesecuzione. Un pattern semplice è una guardia che interrompe lo script se è già stato eseguito una volta:
// Guardia: esegui la logica una sola volta per documento
if (!window.__jzMyScript) {
window.__jzMyScript = true;
document.addEventListener('keydown', onKey);
}
L\'opzione „Esegui JS una sola volta” e una guardia nel codice sono due livelli della stessa protezione — puoi usarli entrambi insieme.
Installa JustZix e scrivi script che funzionano sulle SPA senza che gli effetti collaterali si accumulino.
Valuta questo articolo
Nessuna valutazione — sii il primo.