Un système de routage en JavaScript pour les applications à page unique

? Création d'un système de routage simple dans Vanilla JavaScript pour les SPA

Dans le monde des applications à page unique (SPA), gérer les itinéraires sans framework peut sembler intimidant. Mais avec Vanilla JavaScript, vous pouvez créer un système de routage simple mais puissant ! ?

Voici un guide rapide pour vous aider à démarrer :

1️⃣ Comprendre les bases du routage

Le routage dans un SPA implique le mappage d'une URL vers une vue ou un contenu spécifique. Au lieu de recharger la page, l'application met à jour dynamiquement le contenu en fonction de l'URL.

2️⃣ Concepts de base

• Routage basé sur le hachage : utilise window.location.hash (par exemple, /#/home). C'est simple et ne nécessite pas de configuration de serveur.
• API d'historique : exploite pushState et popstate pour des URL plus propres (par exemple, /home).

3️⃣ Étapes de construction

Étape 1 : Configurez votre structure HTML

<div>



<h3>
  
  
  <strong>Step 2: Create the Router</strong>
</h3>



<pre class="brush:php;toolbar:false">class Router {
  constructor(routes) {
    this.routes = routes;
    this.init();
  }

  init() {
    window.addEventListener("hashchange", () => this.handleRouteChange());
    this.handleRouteChange();
  }

  handleRouteChange() {
    const currentPath = window.location.hash.slice(1);
    const route = this.routes[currentPath];
    if (route) {
      route();
    } else {
      this.routes["/404"]();
    }
  }
}

// Usage
const router = new Router({
  "/": () => (document.getElementById("root").innerHTML = "Home Page"),
  "/about": () => (document.getElementById("root").innerHTML = "About Page"),
  "/404": () => (document.getElementById("root").innerHTML = "404 Page"),
});

4️⃣ Améliorations

• Utilisez l'API d'historique pour des URL plus propres.
• Chargement différé du contenu ou des modèles pour de meilleures performances.
• Ajoutez des routes 404 et de secours pour une expérience utilisateur améliorée.

Pourquoi construire cela vous-même ?

• Compréhension approfondie : découvrez les mécanismes derrière le routage.
• Flexibilité : Personnalisez-le selon vos besoins sans les contraintes d'une bibliothèque.
• Performance : évitez la surcharge des dépendances externes.

? Conseil de pro : Si vous créez une application plus grande, envisagez de modulariser votre code et de gérer les cas extrêmes tels que les paramètres de requête ou les routes imbriquées.

Avez-vous déjà construit votre propre système de routage ? Partagez votre expérience dans les commentaires ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!