Vorwort
Front-End-Routing wird in vielen Open-Source-JS-Bibliotheks-Frameworks wie AngularJs, Backbone, ReactJs usw. unterstützt. Das Prinzip des Front-End-Routings ist das gleiche wie Back-End-Routing. Es ermöglicht alle Interaktionen und zeigt sie auf einer Seite an, um die Serveranfragen zu reduzieren und die Kundenerfahrung zu verbessern. Immer mehr Websites, insbesondere Webanwendungen, verwenden Front-End-Routing.
Html
Auf der Seite befindet sich ein Navigationsmenü, und ein DIV -# -Ergebnis wird verwendet, um die Ergebnisse anzuzeigen. Beim Klicken auf das Navigationsmenü werden im #Result unterschiedliche Ergebnisinhalte angezeigt.
<ul> <li> <a href = "#/"> home </a> </li> <li> <a href = "#/product"> Produkt </a> </li> <li> <a href = "#/server"> Service </a> </li> </ul> <div id = "result"> </div>
JavaScript
Lassen Sie uns über das kurze Prinzip der Umsetzung von Front-End-Routing sprechen. Wenn das Hash -Formular (kann auch mithilfe der History -API behandelt werden) als Beispiel, wenn sich der Hash der URL ändert, wird der registrierte Rückruf von Hashchange ausgelöst und im Rückruf unterschiedliche Vorgänge ausgeführt und unterschiedliche Inhalte werden angezeigt.
Funktion Router () {this.routes = {}; this.cururl = ''; this.route = function (path, callback) {this.routes [path] = callback || Funktion(){}; }; 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); }}Im obigen Code liefert die Implementierung von Routing System Router Object hauptsächlich drei Methoden:
Init hört auf das Browser -URL -Hash -Update -Ereignis.
Die Route speichert die Rückrufe während der Routenaktualisierungen in den Callback -Array -Routen, und die Rückruffunktion ist für die Aktualisierung der Seite verantwortlich.
Refresh führt die Rückruffunktion aus, die der aktuellen URL entspricht, und aktualisiert die Seite.
Die Router -Aufrufmethode lautet wie folgt:
Klicken Sie hier, um die Hash -Änderung der URL auszulösen und den Inhalt entsprechend zu aktualisieren. Nach dem Laufen werden Sie feststellen, dass jedes Mal, wenn Sie auf das Menü klicken, die Hintergrundfarbe und der Inhalt in #Result geändert werden.
var r = new Router (); R.Init (); var res = document.getElementById ('Ergebnis'); R.Route ('/', function () {res.style.background = 'Blue'; res.innerhtml = 'Dies ist die Homepage';}); R.Route ('/product', function () {res.style.background = 'orange'; res.innerhtml = 'Dies ist die Produktseite';}); R.Route ('/server', function () {res.style.background = 'schwarz'; res.innerhtml = 'Dies ist die Dienstseite';});Zusammenfassen
Das obige ist eine einfache Implementierung des Front-End-Routings. In den tatsächlichen Anwendungen sollte der Hash regelmäßig verarbeitet werden, um die Anwendung einer großen Anzahl von URLs zu erfüllen, und gleichzeitig werden die Funktionen von AJAX -Asynchrone Anforderungsseiteninhalt hinzugefügt. Obwohl dieses Beispiel sehr einfach ist, basiert die Grundlage vieler Routing -Systeme darauf, und andere Routing -Systeme bieten hauptsächlich Unterstützung und Optimierung der von ihnen verwendeten Rahmenmechanismen. Okay, der Inhalt dieses Artikels ist hier. Ich hoffe, es wird Ihnen helfen, zu studieren oder zu arbeiten. Wenn Sie Fragen haben, können Sie eine Nachricht zur Kommunikation überlassen.