Separare calcoli e modifiche della pagina

Non mescolare logica dei dati e codice del DOM quando non serve.

In parole semplici

Una funzione che calcola non dovrebbe conoscere la pagina. Una funzione che modifica la pagina non dovrebbe decidere tutte le regole. Separare rende il codice più facile da provare.

Questa lezione fa parte del modulo Organizzare una piccola app. L’obiettivo del modulo è: Passare da esempi isolati a un progetto con file, dati e funzioni organizzati.

Parole nuove

logica: regola o calcolo del programma.
DOM: parte che modifica la pagina.

Cosa impari

Capire il concetto senza partire da definizioni astratte.
Vedere un esempio piccolo che puoi copiare e modificare.
Collegare l’argomento al risultato del modulo: una notes app semplice con file separati e salvataggio locale.

Esempio da copiare

function filtraNote(note, testo) {
  return note.filter((nota) => nota.titolo.includes(testo));
}

const visibili = filtraNote(note, "JS");
render(visibili);

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizio guidato

Scrivi una funzione che filtra note senza usare document.
Provala in console.
Passa il risultato alla funzione render.
Controlla che il filtro funzioni.
Cambia testo di ricerca.

Controllo finale

Hai finito quando la funzione di filtro funziona anche senza pagina HTML.