Was ist Front-End-Routing und seine Erklärung?-HTML-Tutorial-php.cn

Was ist Front-End-Routing?

Das sogenannte Front-End-Routing bietet die Möglichkeit, dass der Client-Browser verschiedene Ansichtsseiten basierend auf unterschiedlichen URLs rendern kann, ohne auf den Server angewiesen zu sein.

Die Rationalität der Existenz von Front-End-Routing

Wenn das Schwert von Ajax noch nicht enthüllt wurde, das Front-End jedoch schon Noch in den Kinderschuhen steckt das Routing. Die Arbeit wird an das Backend übergeben. Beim Seitenwechsel sendet der Browser verschiedene <code>urlURL-Anfragen. Wenn der Server die Anfrage des Browsers empfängt, analysiert er die verschiedenen <code>url <code>urlhtml, um das erforderliche HTML

oder die Vorlage zu verbinden und das Ergebnis dann an das Browser-Rendering auf dem zurückzugeben serverseitig.

Serverseitiges Routing ist ebenfalls unkonventionell und hat Vor- und Nachteile. Sein Vorteil ist eine höhere Sicherheit und eine strengere Kontrolle über die Seitenanzeige. Dies ist in bestimmten Szenarien nützlich, beispielsweise bei einem Bestellzahlungsprozess, bei dem jeder Schritt erst erreicht werden kann, nachdem der vorherige Schritt erfolgreich ausgeführt wurde. Dadurch kann jedem Schritt des Prozesses auf der Serverseite ein Überprüfungsmechanismus hinzugefügt werden, und nur die richtige Seite wird zurückgegeben, wenn die Überprüfung bestanden wird. Das Front-End-Routing kann also nicht bei jedem Schritt eine Überprüfung durchführen? Natürlich nicht, ich glaube, dass Ihr Code sehr streng geschrieben werden kann, um sicherzustellen, dass der Prozess unter normalen Umständen nicht schief geht, aber eine weitere Tatsache, der man sich stellen muss, ist: Das Frontend verfügt überhaupt über keine Sicherheit. Benutzer können den Code nach Belieben ändern, um verschiedene Prozesse einzugeben, und Sie können hierfür viel Verarbeitungslogik hinzufügen. Im Vergleich dazu sind die Zugriffsberechtigungen auf die Back-End-Kontrollseite natürlich sicherer und einfacher. reloadAndererseits erhöht Back-End-Routing zweifellos die Belastung auf der Serverseite und erfordert ein

Neuladen

Seite, Die Benutzererfahrung ist eigentlich nicht gut.

Auf diese Weise kommt das Front-End-Routing ins Spiel. Erstens verringert sein Aufkommen zweifellos den Druck auf der Serverseite. Insbesondere bei einer komplexeren Anwendung, oder genauer gesagt bei einer Anwendung mit einem komplexen Routing-System, muss der Server für jede unterschiedliche URL einen Teil der Verarbeitungslogik ausführen, was in Situationen mit hoher Parallelität etwas unerträglich ist Beim Seitenwechsel muss nicht die gesamte Seite aktualisiert werden. Es gibt keine Netzwerkverzögerung und keine flackernde Aktualisierung, was das Benutzererlebnis verbessert.

Front-End-Routing-Implementierungsmethode

Nachdem das Ziel erreicht ist, welche Probleme müssen wir lösen? Wir können das Problem ein wenig aufschlüsseln, zuerst einen kleinen Plan von 100 Millionen erstellen und dann mit dem nächsten Schritt fortfahren, nachdem wir es erkannt haben:)
<code>url Unter der Voraussetzung, dass die Seite nicht aktualisiert wird, implementieren Sie
Änderung<code>url
Erfassung

Änderung der URL

, um die Seitenersetzungslogik durchzuführen<code>url

Wie man es implementiert aktualisierenURL<code>urlund die Seite wird nicht aktualisiert

Wie bereits erwähnt, ist eines der Merkmale von Front- Das End-Routing im Vergleich zum Back-End-Routing besteht darin, dass die Seite nicht vollständig aktualisiert wird. Wechseln Sie die Ansicht unter den gegebenen Umständen. Die Seite <code>valueURL hat sich geändert, wurde aber nicht neu geladen! Es mag etwas seltsam erscheinen, aber eigentlich ist es keine große Sache. <code>url

Stellen Sie sich die Adressleiste des Browsers als Eingabefeld vor. Was wir erreichen müssen, ist, den Wert des Eingabefelds zu ändern Lösen Sie jedoch nicht den Vorgang zum Anfordern der Seite aus, damit die neue Seite nicht neu geladen wird. Wenn das Ändern des Werts des Eingabefelds und das Senden der Anfrage eine atomare Operation wären, wären wir hilflos. Glücklicherweise wird die Anfrage erst gesendet, wenn wir die Eingabetaste drücken (das ist offensichtlich). Daher werden dadurch Bedingungen geschaffen, die es uns ermöglichen, den Wert der Adressleiste zu ändern, ohne eine Seitenaktualisierungsanforderung auszulösen. Bietet BOM eine Methode zum Ändern der Browser-Adressleiste URL, ohne einen Anforderungsvorgang auszulösen?

Hier gibt es zwei Möglichkeiten, den Bedarf zu decken. Die erste besteht darin, das Feld <code>urlHash in der hashURL zu verwenden Zweitens ist die von HTML5 bereitgestellte History API

zu verwenden.

`hash`Hash

WeghttpVerstehen<code>urlhttp Das Protokoll erkennt, dass #URL

viele Komponenten enthält, wie z. B. Protokoll, Hostname, Ressourcenpfad, Abfrage Felder usw. enthalten einen Abschnitt, der als Fragment bezeichnet wird und durch

#http://www.gmail.com/text/#123 gekennzeichnet ist. 123Zum Beispiel: <code>urlhttp://www.gmail.com/text/#123, hash123

ist der

<code>URL<code>location.hash >hash<code>url Teil. hashÖffnen Sie die Konsole und geben Sie <code>urllocation.hash ein, Sie können den aktuellen hash Der <code>Hashlocation.hash = '123'-Teil der URL<code>url (wenn der aktuelle <code>#123url existiert nicht

<h3>Hash<span style="font-size: 14px;"></span>
</h3>

gibt einen leeren String zurück). Geben Sie als Nächstes location.hash = '123' ein. Sie finden historyURL hat sich geändert und das Feld window.history<code>#123 wurde am Ende hinzugefügt und die Seite wurde nicht aktualisiert. Offensichtlich entspricht dies unseren Anforderungen.

pushStateVerlaufs-APIreplaceStateHTML5 führt einen

Verlauf

<span style="font-size: 14px;">history.replaceState(dataObj, title, url);<br/>history.pushState(dataObj, title, url);<br/></span>

Nach dem Login kopieren

ein Das Objekt enthält eine Reihe von APIs für den Zugriff auf den Browserverlauf, auf die über window.history<code>url zugegriffen werden kann. <code>urlHier interessieren uns die beiden API-Methoden:

<blockquote>pushState und pushStatereplaceState. <code>urlreplaceStateWie oben gezeigt, erhalten sie genau die gleichen Parameter, beide bearbeiten den Verlaufsstapel des Browsers, verschieben die übergebene URL und die zugehörigen Daten auf den Stapel und ersetzen das url</blockquote>

in der Browser-Adressleiste mit der eingehenden url

Und ohne die zu aktualisieren Seite (genau richtig!). <code>urlDer Unterschied besteht übrigens darin, dass

pushState das <code>url< angibt code>url

wird direkt an die Spitze des Verlaufsstapels verschoben, während <🎜><🎜>replaceState<🎜><🎜> dazu dient Ersetzen Sie den aktuellen Verlaufsdatensatz. Der obere Teil des Stapels wird durch die eingehenden Daten ersetzt. <🎜><🎜><🎜><🎜><🎜>Beide Methoden können uns helfen, die Bedingungen für die Fragestellung zu erfüllen. Neben der subjektiven Präferenz muss die zu verwendende Methode auch auf objektiven Fakten basieren: Browser niedrigerer Versionen sind schlecht mit der Verlaufs-API kompatibel. Wenn Sie beispielsweise auf IE8 stoßen, scheint es auf dem weiteren Weg keine Wahl zu geben. <🎜><🎜><🎜><🎜>So verfolgen Sie <🎜><🎜>URL<🎜><🎜>Änderungen<🎜><🎜><🎜><🎜> im Browser Auf der Clientseite werden im Allgemeinen Ereignisüberwachungsmechanismen verwendet, um Änderungen in Formularattributen zu verfolgen, und die Verfolgung von Änderungen in <🎜><🎜>URL<🎜><🎜> ist ebenfalls unkonventionell. <🎜><🎜>

对于hash方式的前端路由，通常可以监听 hashchange 事件，在事件回调中处理相应的页面视图展示等逻辑。

此外，HTML5提供的 popstate 事件也会在<code>url的hash发生改变时触发。也就是说如果可以忽略低版本浏览器，我们使用hash方式路由时也可以采用监听这个事件进行回调处理。

那么，如果是采用history API的形式呢？根据MDN的描述：

调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。popstate 事件只会在浏览器某些行为下触发, 比如点击后退按钮（或者在JavaScript中调用 history.back() 方法）。

这也就是说，我们在使用history API改变浏览器的<code>url时，仍需要额外的步骤去触发 popstate 事件，例如调用 history.back() 会 history.forward() 等方法。

从兼容性上来讲，前面有提及hash的方式兼容性更好。然而，对于低版本的浏览器，例如IE6等等，不支持 hashchange 事件。这个时候我们只能通过 setInterval 设置心跳的方式去模拟 hashchange。

<span style="font-size: 14px;">var oldHash = location.hash;var oldURL = location.href;<br/><br/>setInterval(function() {    var newHash = location.hash;    var newURL = location.href;    if (newHash !== oldHash && typeof window.onhashchange === &#39;function&#39;) {        // 执行onhashchange回调<br/>        window.onhashchange({            &#39;type&#39;: &#39;hashchange&#39;,            &#39;oldURL&#39;: oldURL,            &#39;newURL&#39;: newURL<br/>        });<br/><br/>        oldHash = newHash;<br/>        oldURL = newURL;<br/>    }<br/>}, 100);<br/></span>

Nach dem Login kopieren

一个简单实现

这里，给出一个很简单的实现：

`router.js`

<span style="font-size: 14px;">function FrontRouter() {    this.routes = {};<br/>    window.addEventListener(&#39;load&#39;, this.resolve.bind(this), false);<br/>    window.addEventListener(&#39;hashchange&#39;, this.resolve.bind(this), false);<br/>}<br/><br/>FrontRouter.prototype.route = function(path, callback) {    this.routes[path] = callback || function() {};<br/>};<br/><br/>FrontRouter.prototype.resolve = function() {    this.curHash = location.hash.slice(1) || &#39;/&#39;;    typeof this.routes[this.curHash] === &#39;function&#39; && this.routes[this.curHash]();<br/>};<br/></span>

Nach dem Login kopieren

`index.html`

<span style="font-size: 14px;"><ul>    <li><a href=&#39;#blue&#39;></a></li>    <li><a href=&#39;#yellow&#39;></a></li>    <li><a href=&#39;#red&#39;></a></li></ul><br/></span>

Nach dem Login kopieren

`index.js`

<span style="font-size: 14px;">var router = new FrontRouter();<br/><br/>router.route(&#39;blue&#39;, function() {<br/>    document.body.style.backgroundColor = &#39;blue&#39;;<br/>});<br/><br/>router.route(&#39;yellow&#39;, function() {<br/>    document.body.style.backgroundColor = &#39;yellow&#39;;<br/>});<br/><br/>router.route(&#39;red&#39;, function() {<br/>    document.body.style.backgroundColor = &#39;red&#39;;<br/>});<br/></span>

Nach dem Login kopieren