J'ai fait du développement back-end, surtout lorsque j'ai utilisé Django ou Express, je devrais être familier avec les fonctions de routage côté serveur. WordPress, un système de blog populaire dans les pays étrangers, est également un cas de mise en œuvre de routage très classique. Alors, quelle est exactement l'itinéraire? Parlons-en brièvement par WordPress.
Ceux qui comprennent les règles de réécriture de WordPress sont tous conscients qu'en fait, tout accès URL est basé sur index.php dans le répertoire d'installation WordPress (sauf pour l'accès aux fichiers existe déjà sur le serveur). Il sera évident lorsque le lien fixe WordPress est dans le paramètre de mode. Par exemple, l'URL de l'article est index.php? P = id, et l'URL de la page de classification est index.php? Cat = id.
Ici, index.php agit comme une fonction de routeur, veuillez consulter l'image suivante:
En d'autres termes, quelle que soit l'adresse que vous visitez, toutes les demandes seront éventuellement redirigées vers index.php. Le programme déterminera le type de page dont vous avez besoin en fonction des caractéristiques de l'URL d'accès, puis effectuera une requête à la base de données, et enfin renvoyer le contenu HTML au navigateur.
Ce que nous avons mentionné ci-dessus est le routage backend Web, alors quel est le routage frontal? En fait, la technologie de routage front-end est largement utilisée maintenant, et de nombreuses bibliothèques JS open source prennent en charge le routage frontal, telles que AngularJS, Ember.js, Director.js, etc. Le principe du routage frontal est le même que le routage back-end. 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.
Director.js est l'enregistrement / analyseur de l'itinéraire le plus pur. Il utilise le symbole "#" pour organiser différents chemins URL sans rafraîchir la page et faire correspondre différentes méthodes de rappel en fonction des différents chemins d'urgence. Director.js peut non seulement être appliqué au client, mais également en arrière-plan à l'aide de node.js, mais il peut également implémenter la fonction de routage backend mentionné ci-dessus. Jetons un coup d'œil aux exemples suivants sur la mise en œuvre du routage frontal
Vous devez concevoir une application de bureau Web similaire à Web QQ. Il existe de nombreuses petites icônes sur le bureau, et chaque petite icône est une application fonctionnelle, similaire à un bureau d'ordinateur. Il y a un bouton Baidu News sur le bureau. Cliquez dessus pour faire apparaître une fenêtre sur la page actuelle. Vous pouvez voir Baidu News et une autre icône. Cliquez dessus pour afficher l'heure actuelle. Voici un exemple simple:
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <script src = "https://rawgit.com/flation/director/master/build/director.min.js"> </ script> <style> * {margin: 0; padding: 0} corps {largeur: 100%; hauteur: 100%; arrière-plan: # 3d72b8} #baidenews {width: 40px; hauteur: 40px; fond: url ("./ du.png") non-répat; affichage: bloc; margin: 50px;} #tweibo {width: 40px; height: 40px; fond: url (".. No-Repeat; Affichage: Block; margin: 50px;} </ style> </ head> <body> <a href = "# / baidews" id = "baidews"> </a> <a href = "# / time" id = "tweibo" "/ baidenews": [showframe, getBainews]} // initialiser la route var router = router (router) router.init (); // Définissez la fonction de rappel qui affiche la fonction d'heure actuelle maintenant () {var now = new Date (); var y = now.getlyear (); var m = maintenant.getMonth () + 1; var d = now.getDate (); var h = now.Gethours (); var mi = now.getMinutes (); var s = now.getSeconds (); alert ("Time actuel / n" + y + "année" + m + "mois" + d + "jour" + h + "time" + mi + "minute" + s + "secondes"); } // Définissez la fonction qui affiche la fonction de framework de navigateur showFrame () {var f = document.CreateElement ("div"); f.style.width = "985px"; f.style.height = "500px"; f.style.position = "absolu"; f.style.top = "50px"; f.style.left = "200px"; f.style.background = "blanc"; f.style.border = "2px solide #ccc"; // bouton de fermeture var close = document.CreateElement ("Span"); close.style.position = "absolu"; close.style.right = "5px"; close.style.cursor = "pointeur"; close.style.marginright = "5px"; close.onclick = function () {document.body.removechild (f); } close.innerhtml = "x"; // Chargez l'iframe en dehors du site var win = document.createElement ("iframe"); win.id = "myiframe"; win.frameBorder = 0; win.style.width = "100%"; win.style.height = "100%"; F.APPEndChild (Close); F.APPEndChild (WIN); document.body.appendChild (f); } // Définissez la fonction de fonction pour charger la page Web de Baidu News getBaidew () {document.getElementByid ("myiframe") .src = "http://news.baidu.com/"; } </ script> </ body> </html>À partir du code ci-dessus, nous pouvons voir que Director.js utilise "#" dans la page pour le routage et le transfert. L'exemple ci-dessus n'est qu'un exemple très simple. Director.js peut implémenter des fonctions plus complexes et énormes. Il peut interagir avec les données AJAX et Server et peut coexister avec d'autres bibliothèques de classe JS. Il s'agit d'un puissant outil de développement d'applications Web.
Director.js a-t-il un impact sur le référencement?
The Client's Director.js a un impact sur le référencement, car toutes les données ne sont que sur une seule page, et certaines données sont stockées d'une manière qui n'est pas propice aux araignées de moteur de recherche. Si vous devez être convivial pour le référencement, cela signifie que vous devez construire une "page Web" au lieu d'une "application Web". Director.js n'est pas recommandé.
Référence: Director.js