🚚 lóxica para o enrutador dun spa
A lóxica detrás dun enrutador contén os seguintes pasos.
- Cargar a ruta. Identificar onde estamos no sitio. Faise a través dunha carga inicial da ruta.
- Comparar a URL cunha das nosas rutas. O URL que queremos mover, debe ser comparado coas rutas que temos xa que a ruta solicitada debe estar entre as nosas rutas definidas para ser cargadas.
- Actualizar a ruta na barra de navegación. Para iso, podemos usar un método HTML coñecido como
pushState. Este método forma parte do obxecto da xanela do noso navegadorwindows.history.pushState. Este método engádenos un estado ao noso historial de navegación e ao engadir un novo estado reflíctese na barra de navegación. - Actualice o sano co novo. O novo contido pode ser enviado a través de
innerHTML.
🏗 Arquitectura da nosa aplicación
Arquitectura para esta aplicación contempla un HTML Ficheiro onde vai vivir o noso TEMLATE que recibirá o contido que cambiará o domingo.
Por outra banda, a lóxica da aplicación estará nos nosos ficheiros .js que serán tres como se mostra no seguinte diagrama.
IV id = “Arquitectura da aplicación
Estrutura do cartafol con que imos traballar.
|- root|-- /js|--- index.js|--- router.js|--- routes.js|-- index.html|-- style.css🧭 Por que SPA?
O SPA Como o seu nome indica que son unha páxina única páxina web e a navegación dentro de que ocorre sen necesidade de recargar o navegador.
💡 O obxectivo de realizar o enrutamento con JavaScript Vanilla é comprender o funcionamento das bibliotecas de enrutamento dos marcos.
Para traballar coa URL usaremos a API de Historial, que non é unha característica de JavaScript, se non o navegador. Esta API trae un método chamado pushState que nos axuda a levar os datos da pila da navegación.
🖥 Imos ao código
Comezamos Dar estrutura ao noso modelo HTML. Lembre que a funcionalidade desta pequena práctica é facer un enrutador con vainilla de JavaScript para que o noso modelo sexa o máis sinxelo posible.
<!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>Co noso modelo HTML realizado o seguinte paso será definir o noso dicionario de ruta, aquí será unha lista de todas as rutas dispoñibles dentro do noso spa e o contido de cada un deles.
const PATHS = { home: { path: "/", template: `<h1>🏠 Home</h1>`, }, about: { path: "/about", template: `<h1>👩🏻💻 Sobre mi</h1>`, }, contact: { path: "/contact", template: `<h1>📱 Contacto</h1>`, }} O seguinte ficheiro para traballar será o que contén toda a lóxica para operar as nosas rutas, se agora traballamos no
En que definiremos unha clase chamada , esta clase é a que inicializaremos no noso index.js, pero iso verá máis tarde. r /
class Router {O primeiro será definir un constructor para a nosa clase. As funcións deste constructor cargaranse a lista de rutas e inicializan o enrutador.
co noso creador creado Nós Escribirá a lóxica para iniciar o enrutador. Esta función é responsable de identificar a ruta na que se atopa o noso navegador.
initRouter() { const { location: { pathname = "/" } } = window; const URL = pathname === "/" ? "home" : pathname.replace("/", ""); this.load(URL); } coa ruta identificada, nós Pode comezar a traballar na función que será a encargada de cargar as páxinas que desexa visualizar ao usuario. Esta será a función load que recibe por defecto o parámetro de home como queremos que o contido sexa o contido principal do noso 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); }}Agora con toda a lóxica do noso enrutador construído, só queda inicializar a clase no
.
const ROUTER = new Router(PATHS);agora para probar correctamente o noso pequeno spa que é necesario ter un servidor local. Isto pódese implementar de moitas maneiras, pero recomendo que se está a usar VSCode, instale o servidor en directo que facilitará a súa vida.
→ Liveserver
✅ Conclusións
Esta sería de forma moi básica a forma en que os enrutadores dalgúns marcos de JavaScript funcionan como angulares ou vidas. Personalmente non recomendo “a man” o enrutador a menos que sexa un proxecto moi pequeno. O mellor é usar as implementacións de cada marco.
Aínda que por suposto, sempre é bo romper as cousas e coñecer a partir das bases.
Pódese atopar o código de código no meu repositorio GitHub. Aquí deixo a ligazón.
→ Vanilla Router Spa