Création d’un routeur avec vanille JavaScript

🚚 Logique pour le routeur d’un spa

La logique derrière un routeur contient les étapes suivantes.

1. Chargez l’itinéraire. Identifier où nous sommes sur le site. Cela se fait par une charge initiale de la route.
2. Comparez l’URL avec l’une de nos itinéraires. L’URL que nous voulons bouger, devrait être comparée aux itinéraires que nous avons depuis que l’itinéraire demandé doit être entre nos itinéraires définis pour être chargé.
3. Mettez à jour la route dans la barre de navigation. Pour cela, nous pouvons utiliser une méthode HTML appelée pushState. Cette méthode fait partie de l’objet Window de notre navigateur windows.history.pushState. Cette méthode nous ajoute un état à notre historique de navigation et lorsque l’ajout d’un nouvel état est reflété dans la barre de navigation.
4. Mettez à jour le Sunder avec le nouveau. Le nouveau contenu peut être envoyé via innerHTML.

🏗 architecture de notre application

architecture de cette application contemple un HTML Fichier où vous vivrez notre template qui recevra le contenu qui changera au dimanche.

D’autre part, la logique de l’application sera dans nos fichiers .js qui sera trois comme indiqué dans le diagramme suivant.

Structure de dossier avec lequel nous allons travailler.

🧭 Pourquoi spa?

Le spa Comme votre nom indique sont une page Web de page unique et la navigation à l’intérieur se produit sans la nécessité de recharger le navigateur.

💡 Le but de l’exécution de routage avec la vanille JavaScript est de comprendre le fonctionnement des bibliothèques de routage des cadres.

Pour travailler avec l’URL, nous utiliserons l’API d’historique, ce qui n’est pas une caractéristique de JavaScript sinon le navigateur. Cette API apporte une méthode appelée pushState qui nous aide à apporter les données de pile de la navigation.

Nous allons au code

Nous avons commencé Donner une structure à notre modèle HTML. Rappelons que la fonctionnalité de cette petite pratique consiste à créer un routeur avec vanille JavaScript afin que notre modèle soit aussi simple que possible possible.

Avec notre modèle HTML effectué la prochaine étape consistera à définir notre dictionnaire de route, voici une liste de tous les itinéraires disponibles dans notre spa et le contenu de chacun d’entre eux.

const PATHS = { home: { path: "/", template: `<h1>🏠 Home</h1>`, }, about: { path: "/about", template: `<h1>👩🏻‍💻 Sobre mi</h1>`, }, contact: { path: "/contact", template: `<h1>📱 Contacto</h1>`, }}

Le fichier suivant pour fonctionner sera celui qui contient toute la logique pour faire fonctionner nos itinéraires, si nous allons maintenant travailler dans router.js Dans lequel nous définirons une classe appelée Router, cette classe est celle que nous allions initialiser dans notre index.js, mais cela le verra Plus tard.

class Router {

Le premier sera de définir un constructeur pour notre classe. Les fonctions de ce constructeur seront téléchargées notre liste d’itinéraire et initialiser le routeur.

avec notre constructeur créé nous va écrire la logique pour démarrer le routeur. Cette fonction est responsable de l’identification de l’itinéraire dans lequel notre navigateur est situé.