Qu'est-ce que le routage frontal et son explication-tutoriel HTML-php.cn

Qu'est-ce que le routage frontal

Le soi-disant routage frontal a la capacité que le navigateur client peut afficher différentes pages d'affichage en fonction de différentes URL sans dépendre du serveur.

La rationalité de l'existence du routage frontal

Quand l'épée d'Ajax n'a pas encore été révélée et que le front-end est encore à ses balbutiements, le routage Le travail est confié au backend. Lors du changement de page, le navigateur envoie différentes requêtes <code>urlurl ; lorsque le serveur reçoit la requête du navigateur, il analyse les différentes <code>url <code>urlhtml pour épisser le html

ou le modèle requis, puis renvoyer le résultat au rendu du navigateur sur le côté serveur.

Le routage côté serveur est également non conventionnel et présente des avantages et des inconvénients. Son avantage est une sécurité accrue et un contrôle plus strict de l’affichage des pages. Ceci est utile dans certains scénarios, comme un processus de paiement de commande, où chaque étape ne peut être atteinte qu'après que l'étape précédente a été exécutée avec succès. Cela peut ajouter un mécanisme de vérification à chaque étape du processus côté serveur, et seule la page correcte sera renvoyée si la vérification est réussie. Le routage frontal ne peut donc pas mettre en œuvre la vérification à chaque étape ? Bien sûr que non, je crois que votre code peut être écrit de manière très rigoureuse pour garantir que le processus ne se déroulera pas mal dans des circonstances normales, mais un autre fait auquel il faut faire face est le suivant : le front-end n'a aucune sécurité. Les utilisateurs peuvent modifier le code à volonté pour entrer dans différents processus, et vous pouvez ajouter de nombreuses logiques de traitement pour cela. En comparaison, bien entendu, les droits d’accès à la page de contrôle back-end sont plus sûrs et plus simples. reloadEn revanche, le routage back-end augmente sans aucun doute la charge côté serveur et nécessite un

rechargement

page, L'expérience utilisateur n'est en fait pas bonne.

De cette façon, le routage front-end entre en jeu. Tout d’abord, son émergence réduit sans aucun doute la pression côté serveur. Surtout pour une application plus complexe, ou pour être plus précis, pour une application avec un système de routage complexe, le serveur doit exécuter un élément de logique de traitement pour chaque URL différente, ce qui est un peu insupportable dans des situations de forte concurrence. Il n'est pas nécessaire d'actualiser la page entière lors du changement de page. Il n'y a pas de retard réseau ni d'actualisation scintillante, ce qui améliore l'expérience utilisateur.

Méthode de mise en œuvre du routage front-end

Maintenant que l'objectif est atteint, quels sont les problèmes que nous devons résoudre ? On peut décomposer un peu le problème, faire d'abord un petit plan de 100 millions, puis passer à l'étape suivante après l'avoir réalisé :)
<code>url En partant du principe que la page ne s'actualise pas Implémenter
change<code>url
capture

Changement d'url

afin d'effectuer une logique de remplacement de page<code>url

Comment mettre en œuvre mise à joururl<code>urlet la page ne s'actualise pas

Comme mentionné précédemment, l'une des caractéristiques du front- le routage final par rapport au routage back-end est que la page n'est pas complètement actualisée. Changez la vue dans les circonstances. La page <code>valueurl a changé, mais elle n'a pas été rechargée ! Cela peut paraître un peu bizarre, mais ce n’est en réalité pas grave. <code>url

Imaginez la barre d'adresse du navigateur comme une zone de saisie. Ce que nous devons réaliser, c'est modifier la valeur de la zone de saisie. Mais ne déclenchez pas l'opération de requête de la page, afin que la nouvelle page ne soit pas rechargée. Si changer la valeur de la zone de saisie et envoyer la requête était une opération atomique, nous serions impuissants. Heureusement, la demande ne sera envoyée que lorsque nous appuierons sur Entrée (c'est évident). Par conséquent, cela crée des conditions nous permettant de modifier la valeur de la barre d’adresse sans déclencher une demande de rafraîchissement de la page. BOM fournit-il une méthode pour modifier la barre d'adresse du navigateur url sans déclencher une opération de requête ?

Ici, il existe deux manières de répondre aux besoins. La première consiste à utiliser le champ <code>urlhash dans hash<code>url ; la deuxième consiste à utiliser l'API d'historique

fournie par HTML5.

`hash`hash

FaçonhttpComprendre<code>urlhttp Le protocole saura que #<code>url

comporte de nombreux composants, tels que le protocole, le nom d'hôte, le chemin de ressource, la requête les champs, etc., contiennent une section appelée fragment, identifiée par

#http://www.gmail.com/text/#123. 123Par exemple : <code>urlhttp://www.gmail.com/text/#123, hash123

est le

<code>url<code>location.hash >hash<code>url partie. hashOuvrez la console et entrez <code>urllocation.hash, vous pouvez obtenir le hash La partie <code>hashlocation.hash = '123' de l'url<code>url (si le url<code>#123 n'existe pas

hash

renvoie une chaîne vide). Ensuite, entrez

location.hash = '123'

, et vous trouverez <code>historyurl a changé, et le champ <code>window.history#123 a été ajouté à la fin, et la page n'a pas été actualisée . Évidemment, cela répond à nos exigences.

API d'historiquepushStatereplaceStateHTML5 introduit un historique

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

Copier après la connexion

L'API L'objet contient un ensemble d'API pour accéder à l'historique du navigateur, accessible via

<code>window.history<code>url. <code>urlOn s'intéresse ici à ses deux méthodes API : pushState<blockquote>

et remplaceStatepushState. <code>urlreplaceStateComme indiqué ci-dessus, ils reçoivent exactement les mêmes paramètres, tous deux fonctionnent sur la pile d'historique du navigateur, poussent l'URL transmise et les données associées sur la pile et remplacent le url dans la barre d'adresse du navigateur avec l'

<code>url

et sans actualiser le page (juste ce qu'il faut !).

<code>urlAu fait, la différence est que </h3>pushState spécifiera le < code><code>urlurl est placé directement en haut de la pile d'historique, tandis que

<🎜>replaceState<🎜><🎜> doit remplacer l'enregistrement d'historique actuel Le haut de la pile est remplacé par les données entrantes. <🎜><🎜><🎜><🎜><🎜>Les deux méthodes peuvent nous aider à remplir les conditions de définition des questions. En plus des préférences subjectives, la méthode à adopter doit également être basée sur des faits objectifs : les navigateurs de versions inférieures ont une mauvaise compatibilité avec l'API d'historique. Par exemple, lorsqu'on rencontre IE8, il ne semble pas y avoir de choix. <🎜><🎜><🎜><🎜>Comment suivre les <🎜><🎜>url<🎜><🎜>modifications<🎜><🎜><🎜><🎜> dans le navigateur Côté client, les mécanismes de surveillance des événements sont généralement utilisés pour suivre les modifications des attributs du formulaire, et le suivi des modifications dans <🎜><🎜>url<🎜><🎜> n'est pas non plus conventionnel. <🎜><🎜>

对于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>

Copier après la connexion

一个简单实现

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

`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>

Copier après la connexion

`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>

Copier après la connexion

`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>

Copier après la connexion