Ich habe Back-End-Entwicklung durchgeführt, insbesondere wenn ich Django oder Express verwendet habe, sollte ich mit den Routing-Funktionen auf der Serverseite vertraut sein. WordPress, ein beliebtes Blog -System im Ausland, ist auch ein sehr klassischer Routing -Implementierungsfall. Also, was genau ist die Route? Lassen Sie uns kurz über WordPress darüber sprechen.
Diejenigen, die die Umschreiben der Umschreiben von WordPress verstehen, sind sich alle bewusst, dass jeder URL -Zugriff auf Index.php im Verzeichnis von WordPress -Installation basiert (mit Ausnahme des bereits auf dem Server vorhandenen Zugriffs auf Dateien). Es wird offensichtlich sein, wenn sich der WordPress -Link in der Moduseinstellung befindet. Beispielsweise ist die URL des Artikels index.php? P = id und die URL der Klassifizierungsseite ist index.php? Cat = id.
Hier fungiert Index.php als Routerfunktion. Weitere Informationen finden Sie im folgenden Bild:
Mit anderen Worten, egal welche Adresse Sie besuchen, werden alle Anfragen schließlich zu Index.php umgeleitet. Das Programm bestimmt, welche Seitentyp Sie basierend auf den Eigenschaften der Zugriffs -URL benötigen, und machen Sie dann eine Abfrage in die Datenbank und geben schließlich den HTML -Inhalt an den Browser zurück.
Was wir oben erwähnt haben, ist das Routing von Web Backend. Was ist also das Front-End-Routing? Tatsächlich wird die Front-End-Routing-Technologie jetzt weit verbreitet, und viele Open Source JS-Bibliothek unterstützen Front-End-Routing wie AngularJs, Ember.js, Director.js usw. Das Prinzip des Front-End-Routings ist das gleiche wie das 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.
Director.js ist die reinste Streckeregistrierung/Parser. Es wird das Symbol "#" verwendet, um verschiedene URL -Pfade zu organisieren, ohne die Seite zu aktualisieren und verschiedene Rückrufmethoden gemäß verschiedenen URL -Pfaden abzuschließen. Director.js kann nicht nur auf den Client angewendet werden, sondern auch im Hintergrund mit node.js, sondern auch die oben erwähnte Backend -Routing -Funktion implementieren. Schauen wir uns die folgenden Beispiele zur Implementierung von Front-End-Routing an
Sie müssen eine Web -Desktop -Anwendung ähnlich wie Web QQ entwerfen. Auf dem Desktop gibt es viele kleine Symbole, und jedes kleine Symbol ist eine funktionale Anwendung, ähnlich einem Computerdesktop. Auf dem Desktop befindet sich ein Baidu -Nachrichtenknopf. Klicken Sie darauf, um ein Fenster auf der aktuellen Seite zu geben. Sie können Baidu News und ein weiteres Ikone anzeigen. Klicken Sie darauf, um die aktuelle Zeit anzuzeigen. Hier ist ein einfaches Beispiel:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <script src = "https://rawgit.com/flatiron/director/master/build/director.min {Breite: 100%; Höhe: 100%; Hintergrund: #3d72b8} #baidunews {width: 40px; Höhe: 40px; Hintergrund: url ("./ du.png") no-repeat; display: block; margin: 50px;} #tweibo {width: 40px; Höhe: 40px; No-Repeat; Anzeige: Block; Margin: 50px;} </style> </head> <body> <a href = "#/baidunews" id = "baidunews"> </a> <a href = "#/time" id = "tweibo"> </a> <Script> // "/baidunews": [showframe, getBaidunews]} // Route var Router = Router (Route) Router.init () initialisieren; // Definieren Sie die Rückruffunktion, die die aktuelle Zeitfunktion NowTime () {var nun = new Date () anzeigt; var y = now.GetingFoyear (); var m = now.getMonth ()+1; var d = now.getDate (); var h = now.gethours (); var mi = now.getMinutes (); var s = now.getSeconds (); alert ("aktuelle Zeit/n"+y+"Jahr"+m+"Monat"+D+"Tag"+H+"Zeit"+mi+"Minute"+S+"Sekunden"); } // Definieren Sie die Funktion, die die Browser -Framework -Funktion Showframe () {var f = document.createelement ("div") anzeigt; f.Style.width = "985px"; F.Style.Height = "500px"; F.Style.position = "Absolute"; f.style.top = "50px"; f.style.left = "200px"; F.Style.background = "White"; f.style.border = "2px solid #CCC"; // Taste schließen var close = document.createelement ("span"); Close.style.position = "Absolute"; Close.style.right = "5px"; Close.style.cursor = "Pointer"; Close.Style.Marginright = "5px"; close.onclick = function () {document.body.removechild (f); } close.innerhtml = "x"; // das iframe außerhalb der Site var win = document.createelement ("iframe") laden; win.id = "myiframe"; win.frameborder = 0; win.Style.width = "100%"; Win.Style.Height = "100%"; F.AppendChild (nah); F.Appendchild (Win); document.body.appendchild (f); } // Definieren Sie die Funktionsfunktion, um die Baidu -Nachrichten -Webseite getBaidunew () {document.getElementById ("myiframe") .src = "http://news.baidu.com/" zu laden. } </script> </body> </html>Aus dem obigen Code können wir sehen, dass Director.js "#" auf der Seite zum Routing und Weiterleiten verwendet. Das obige Beispiel ist nur ein sehr einfaches Beispiel. Director.js kann komplexere und enorme Funktionen implementieren. Es kann mit AJAX- und Serverdaten interagieren und mit anderen JS -Klassenbibliotheken koexistieren. Es ist ein leistungsstarkes Tool zur Entwicklung von Webanwendungen.
Hat Director.js Auswirkungen auf die SEO?
Der Director.JS des Kunden hat Auswirkungen auf die SEO, da alle Daten nur auf einer Seite sind und einige Daten auf eine Weise gespeichert werden, die Suchmaschinenspinnen nicht förderlich ist. Wenn Sie SEO -freundlich sein müssen, müssen Sie eine "Webseite" anstelle einer "Webanwendung" erstellen. Director.js wird nicht empfohlen.
Referenz: Director.js