🚚 logica per il router di una spa
La logica dietro un router contiene i seguenti passaggi.
- Carica il percorso. Identifica dove siamo sul sito. È fatto attraverso un carico iniziale del percorso.
- Confronta l’URL con uno dei nostri percorsi. L’URL che vogliamo spostare, dovrebbe essere confrontato con i percorsi che abbiamo dal momento che il percorso richiesto deve essere tra i nostri percorsi definiti per essere caricato.
- Aggiorna il percorso nella barra di navigazione. Per questo possiamo utilizzare un metodo HTML noto come
pushState. Questo metodo fa parte dell’oggetto della finestra del nostro navigatorewindows.history.pushState. Questo metodo ci aggiunge uno stato alla nostra cronologia di navigazione e quando si aggiunge un nuovo stato si riflette nella barra di navigazione. - Aggiorna il SUNDER con il nuovo. Il nuovo contenuto può essere inviato tramite
innerHTML.
🏗 Architettura della nostra applicazione
Architettura per questa applicazione contempla un html File dove vivrai il nostro Temlate che riceverai il contenuto che cambierà nella domenica.
D’altra parte la logica dell’applicazione sarà nei nostri file .js che saranno tre come mostrato nel diagramma seguente. architettura dell’app
Struttura della cartella con cui lavoreremo.
|- root|-- /js|--- index.js|--- router.js|--- routes.js|-- index.html|-- style.css🧭 Perché SPA?
La SPA come nome indica che è una singola pagina Web pagine e la navigazione all’interno che si verifica senza la necessità di ricaricare il browser.
💡 Lo scopo di eseguire il routing con JavaScript La vaniglia è comprendere il funzionamento delle librerie di routing dei quadri.
Per lavorare con l’URL useremo l’API della cronologia, che non è una caratteristica di JavaScript se non il browser. Questo API porta un metodo chiamato che ci aiuta a portare i dati dello stack dalla navigazione.
🖥 Andiamo al codice
Abbiamo iniziato Dare struttura al nostro modello HTML. Richiamare che la funzionalità di questa piccola pratica è quella di fare un router con la vaniglia JavaScript, quindi il nostro modello sarà il più semplice possibile.
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SPA Routing</title> <link rel="stylesheet" href="style.css"></head><body> <!-- Botones de navegación --> <header> <button onclick="ROUTER.load('home')">Home </button> <button onclick="ROUTER.load('about')">About</button> <button onclick="ROUTER.load('contact')">Contact</button> </header> <!-- Aquí es donde se insertará el contenido según la página en la que nos encontremos --> <div></div> <!-- En estos archivos estará la mágica para la navegación --> <script src="./js/router.js"></script> <script src="./js/routes.js"></script> <script src="./js/index.js"></script></body></html>Con il nostro modello HTML eseguito il passo successivo sarà quello di definire il nostro dizionario del percorso, qui sarà un elenco di tutti i percorsi disponibili all’interno della nostra spa e il contenuto di ciascuno di essi.
const PATHS = { home: { path: "/", template: `<h1>🏠 Home</h1>`, }, about: { path: "/about", template: `<h1>👩🏻💻 Sobre mi</h1>`, }, contact: { path: "/contact", template: `<h1>📱 Contacto</h1>`, }}Il seguente file da lavorare sarà quello che contiene tutta la logica per gestire i nostri percorsi, se ora lavoreremo nell’ID
In cui definiremo una classe chiamataRouter, questa classe è quella che ci inizializza nel nostroindex.js, ma questo lo vedrà Più tardi.
class Router {Il primo sarà quello di definire un costruttore per la nostra classe. Le funzioni di questo costruttore verranno caricate il nostro elenco del percorso e inizializzando il router.
Con il nostro costruttore creato noi Scriverà la logica per avviare il router. Questa funzione è responsabile dell’identificazione del percorso in cui si trova il nostro browser.
initRouter() { const { location: { pathname = "/" } } = window; const URL = pathname === "/" ? "home" : pathname.replace("/", ""); this.load(URL); } Con il percorso identificato, noi Può iniziare a lavorare sulla funzione che sarà responsabile del caricamento delle pagine che si desidera visualizzare l’utente. Questa sarà la funzione load che ricevi per impostazione predefinita il parametro di home Come vogliamo che il contenuto sia il contenuto principale della nostra spa .
load(page = "home") { const { paths } = this; const { path, template } = paths || paths.error; const $CONTAINER = document.querySelector("#content"); $CONTAINER.innerHTML = template; window.history.pushState({}, "done", path); }} Ora con tutta la logica del nostro router costruito, rimane solo per inizializzare la classe nel index.js.
const ROUTER = new Router(PATHS);Ora per provare correttamente la nostra piccola spa necessario per avere un server locale. Questo può essere implementato in molti modi, ma consiglio che se si sta utilizzando VSCODE, installare il server Live che renderà la tua vita più facile.
→ Livesterver
✅ Conclusioni
Questo sarebbe in un modo molto semplice il modo in cui i router di alcuni framework JavaScript funzionano come angolari o vue. Personalmente non consiglio “a mano” il router a meno che non sia un progetto molto piccolo. La cosa migliore è usare le implementazioni di ciascun quadro.
Anche se ovviamente, è sempre buono a rompere le cose e sapere dalle basi.
Il codice di codice può essere trovato nel mio repository GitHub. Qui lascio il link.
→ Vanilla router spa