🚚 Logic para o Router de um SPA
A lógica por trás de um roteador contém os seguintes passos.
- Carregue a rota. Identifique onde estamos no site. É feito através de uma carga inicial da rota.
- Compare o URL com uma das nossas rotas. O URL que queremos se mover, deve ser comparado com as rotas que temos desde que a rota solicitada deve estar entre nossas rotas definidas para serem carregadas.
- Atualize a rota na barra de navegação. Para isso, podemos usar um método HTML conhecido como
pushState. Este método faz parte do objeto da janela do nosso navegadorwindows.history.pushState. Este método nos adiciona um estado ao nosso histórico de navegação e ao adicionar um novo estado é refletido na barra de navegação. - Atualize o Sunder com o novo. O novo conteúdo pode ser enviado através de
innerHTML.
🏗 Arquitetura do nosso aplicativo
Architecture para esta aplicação Contemplar um HTML Arquivo onde você viverá nossa template que receberá o conteúdo que estará mudando no domingo.
Por outro lado A lógica do aplicativo será em nossos arquivos .js O que será três como mostrado no diagrama a seguir.
estrutura de pastas com as quais vamos trabalhar.
|- root|-- /js|--- index.js|--- router.js|--- routes.js|-- index.html|-- style.css🧭 Por Spa?
o spa como o seu nome indica é um único páginas páginas de internet e navegação dentro dele ocorre sem a necessidade de recarregar o navegador.
💡 O objetivo de executar o roteamento com JavaScript Baunilla é entender a operação das bibliotecas de roteamento das estruturas.
Para trabalhar com o URL, usaremos a API de histórico, que não é uma característica de JavaScript, se não o navegador. Esta API traz um método chamado pushState que nos ajuda a trazer os dados da pilha da navegação.
🖥 Nós vamos para o código
Nós começamos Dando estrutura ao nosso modelo HTML. Lembre-se que a funcionalidade deste pouco de prática é fazer um roteador com JavaScript de baunilha por isso o nosso modelo vai ser tão simples quanto possível.
<!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>com o nosso modelo HTML realizado o próximo passo será definir nosso dicionário rota, aqui será uma lista de todas as rotas disponíveis dentro de nosso spa eo conteúdo de cada um 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 arquivo para funcionar será aquele que contém toda a lógica para operar nossas rotas, se agora trabalharemos no router.js Em que definiremos uma classe chamada Router, esta classe é aquela que iremos inicializar em nosso index.js, mas isso vai ver mais tarde.
class Router {O primeiro será o de definir um construtor para a nossa classe. As funções desta construtor será carregado nossa rota listagem e inicializar o roteador.
Com a nossa criado construtor nós vai escrever a lógica para iniciar o router. Esta função é responsável por identificar a rota em que o nosso navegador está localizado.
initRouter() { const { location: { pathname = "/" } } = window; const URL = pathname === "/" ? "home" : pathname.replace("/", ""); this.load(URL); } com a rota identificada, Nós Pode começar a trabalhar na função que será responsável por carregar as páginas que você deseja visualizar o usuário. Esta será a função load que você recebe por padrão o parâmetro home Como queremos que o conteúdo seja o conteúdo principal do nosso 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, com toda a lógica do nosso router construído, só resta para inicializar a classe no index.js.
const ROUTER = new Router(PATHS);agora, para tentar corretamente o nosso pequeno spa é necessário ter um servidor local. Isso pode ser implementado de muitas maneiras, mas eu recomendo que se você estiver usando VScode, instale o Vivo servidor que irá tornar sua vida mais fácil.
→ LiveServer
✅ Conclusões
Isso seria de uma maneira muito básica da maneira como os roteadores de algumas estruturas de JavaScript funcionam como angulares ou vusas. Pessoalmente, eu não recomendo “à mão” o roteador, a menos que seja um projeto muito minúsculo. A melhor coisa é usar as implementações de cada estrutura.
Embora, é claro, é sempre bom quebrar as coisas e saber das bases.
O código do código pode ser encontrado no repositório My Github. Aqui deixo o link.
→ spa do roteador de baunilha