Préface
Le routage frontal est pris en charge dans de nombreux frameworks de bibliothèque JS open source, tels que AngularJS, Backbone, ReactJS, etc. Le principe du routage frontal est le même que le routage arrière. Il permet à toutes les interactions et les affiche sur une page d'exécuter pour réduire les demandes du serveur et améliorer l'expérience client. De plus en plus de sites Web, en particulier des applications Web, utilisent le routage frontal.
Html
Il y a un menu de navigation UL sur la page, et un résultat div # est utilisé pour afficher les résultats. Lorsque vous cliquez sur le menu de navigation, différents contenus de résultats seront affichés dans le #Result.
<ul> <li> <a href = "# /"> home </a> </li> <li> <a href = "# / produit"> Product </a> </li> <li> <a href = "# / server"> Service </a> </li> </ul> <div id = "Result"> </v>
Javascrip
Parlons du bref principe de la mise en œuvre du routage frontal. Prendre le formulaire de hachage (peut également être géré à l'aide de l'historique API) à titre d'exemple, lorsque le hachage de l'URL change, le rappel enregistré HashCange est déclenché et que différentes opérations sont effectuées dans le rappel et différents contenus sont affichés.
fonction router () {this.Routes = {}; this.cururl = ''; this.Route = function (path, callback) {this.routes [path] = callback || fonction(){}; }; this.refresh = function () {this.cururl = location.hash.slice (1) || '/'; this.Routes [this.cururl] (); }; this.init = function () {window.adDeventListener ('Load', this.refresh.bind (this), false); window.addeventListener ('hashchange', this.refresh.bind (this), false); }}Dans le code ci-dessus, l'implémentation d'objet du routeur du système de routage fournit principalement trois méthodes:
INIT écoute l'événement de mise à jour de la hachage URL du navigateur.
Route stocke les rappels lors des mises à jour de l'itinéraire vers les itinéraires du tableau de rappel, et la fonction de rappel sera responsable de la mise à jour de la page.
Refresh exécute la fonction de rappel correspondant à l'URL actuelle et met à jour la page.
La méthode d'appel du routeur est la suivante:
Cliquez pour déclencher la modification de hachage de l'URL et mettez à jour le contenu en conséquence. Après l'exécution, vous constaterez que chaque fois que vous cliquez sur le menu, la couleur d'arrière-plan et le contenu seront modifiés dans #Result.
var r = new router (); r.Init (); var res = document.getElementById ('result'); R.Route ('/', function () {res.style.background = 'bleu'; res.innerhtml = 'Ceci est la page d'accueil';}); R.Route ('/ Product', function () {res.style.background = 'orange'; res.innerhtml = 'Ceci est la page du produit';}); R.Route ('/ Server', fonction () {res.style.background = 'noir'; res.innerhtml = 'Ceci est la page de service';});Résumer
Ce qui précède est une simple implémentation du routage frontal. Dans les applications réelles, le hachage doit être traité régulièrement pour répondre à l'application d'un grand nombre d'URL, et en même temps, les fonctions du contenu de la page de demande asynchrones Ajax sont ajoutées. Bien que cet exemple soit très simple, en fait, le fondement de nombreux systèmes de routage est basé sur cela, et d'autres systèmes de routage fournissent principalement le support et l'optimisation des mécanismes de cadre qu'ils utilisent. D'accord, le contenu de cet article est ici. J'espère que cela vous aidera à étudier ou à travailler. Si vous avez des questions, vous pouvez laisser un message pour communiquer.