Maison interface Web js tutoriel Director.js implémente des exemples d'utilisation du routage frontal

Director.js implémente des exemples d'utilisation du routage frontal

Feb 03, 2017 pm 02:03 PM

Après avoir effectué du développement back-end, surtout si vous avez utilisé Django ou Express, vous devez être familier avec les fonctions de routage côté serveur. WordPress, un système de blog étranger populaire, est également un cas d'implémentation de routage très classique. Alors, quel est le routage ? Parlons-en brièvement via WordPress.

Tous ceux qui comprennent les règles de réécriture de WordPress savent qu'en fait, l'accès à n'importe quelle URL est basé sur index.php dans le répertoire d'installation de WordPress (sauf pour l'accès aux fichiers qui existent déjà sur le serveur lorsque WordPress est corrigé). Cela sera évident si le lien est un paramètre de mode. Par exemple, l'URL de l'article est index.php?p=id et l'URL de la page de catégorie est index.php?cat=id.

Ici, index.php fait office de routeur, veuillez voir l'image ci-dessous :

Director.js implémente des exemples dutilisation du routage frontal

En d'autres termes, quelle que soit l'adresse que vous visitez, toutes les requêtes sera finalement redirigé vers index.php. Le programme déterminera le type de page dont vous avez besoin en fonction des caractéristiques de l'URL consultée, puis effectuera une requête à la base de données et enfin renverra le contenu HTML au navigateur.

Ce qui précède concerne le routage back-end Web, alors qu'est-ce que le routage front-end ? En fait, la technologie de routage frontal est désormais largement utilisée. Il existe de nombreuses bibliothèques js open source qui prennent en charge le routage frontal, telles que angulaireJS, ember.js, directeur.js, etc. Le principe du routage front-end est le même que celui du routage back-end, qui consiste à exécuter toutes les interactions et affichages sur une seule page pour réduire les requêtes du serveur et améliorer l'expérience client. De plus en plus de sites Web, notamment d'applications Web, utilisent le front-end. terminer le routage.

director.js est l'enregistrement/analyseur d'itinéraire le plus pur. Il utilise le symbole "#" pour organiser différents chemins d'URL sans actualiser la page et fait correspondre différents rappels selon différentes méthodes de chemins d'URL. Director.js peut non seulement être appliqué sur le client, mais peut également réaliser la fonction de routage back-end mentionnée précédemment en arrière-plan à l'aide de node.js. Regardons l'exemple suivant d'implémentation de routage frontal
Vous devez concevoir une application de bureau Web similaire à Web QQ. Il y a de nombreuses petites icônes sur le bureau, et chaque petite icône est une application fonctionnelle, similaire à un ordinateur. bureau. Il y a un bouton Baidu News sur le bureau. Cliquez dessus pour ouvrir une fenêtre sur la page actuelle pour afficher Baidu News. Cliquez sur une autre icône pour afficher l'heure actuelle :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="https://rawgit.com/flatiron/director/master/build/director.min.js"></script>
<style>
 * {margin:0;padding:0}
 body {width:100%;height:100%;background:#3d72b8}
 #baidunews {width:40px;height:40px;background:url("./du.png") no-repeat;display:block;margin:50px;}
 #tweibo {width:40px;height:40px;background:url("./du.png") no-repeat;display:block;margin:50px;}
</style>
</head>
<body>
 <a href="#/baidunews" id="baidunews" title="百度新闻"></a>
 <a href="#/time" id="tweibo" title="当前时间"></a>
<script>
 //定义路由
 var route = {
 "/time":nowtime,
 "/baidunews":[showframe,getbaidunew]
 }
  
 //初始化路由
 var router = Router(route)
 router.init();
 //定义显示当前时间的回调函数
 function nowtime(){
 var now=new Date();
 var y=now.getFullYear();
 var m=now.getMonth()+1;
 var d=now.getDate();
 var h=now.getHours();
 var mi=now.getMinutes();
 var s=now.getSeconds();
 alert("现在时间\n"+y+"年"+m+"月"+d+"日 "+h+"时"+mi+"分"+s+"秒");
  
 }
 //定义显示浏览器框架的函数
 function showframe(){
 var f=document.createElement("div");
 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";
 //关闭按钮
 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";
 //加载站外的iframe
 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);
 }
 //定义加载百度新闻网页的函数
 function getbaidunew(){
 document.getElementById("myiframe").src="http://news.baidu.com/";
 }
</script>
</body>
</html>
Copier après la connexion
De Comme le montre le code ci-dessus, Director.js utilise le "#" dans la page pour le routage et le transfert. L'exemple ci-dessus est très simple. Director.js peut implémenter des fonctions plus complexes et plus volumineuses. Il peut interagir avec les données côté serveur via ajax et peut coexister avec d'autres bibliothèques js.

Director.js a-t-il un impact sur le référencement ?

Le Director.js du client a un impact sur le référencement, car toutes les données ne sont que sur une seule page et la méthode de stockage de certaines données n'est pas propice à l'exploration des robots des moteurs de recherche si vous en avez besoin. Optimisé pour le référencement, cela signifie que vous devez structurer. Il s'agit d'une « page Web » plutôt que d'une « application Web », et Director.js n'est pas recommandé.

Pour plus d'articles liés à l'implémentation par Director.js d'exemples d'utilisation du routage frontal, veuillez faire attention au site Web PHP chinois !

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Explication détaillée de la méthode de remplacement de la chaîne JavaScript et de la FAQ Cet article explorera deux façons de remplacer les caractères de chaîne dans JavaScript: le code JavaScript interne et le HTML interne pour les pages Web. Remplacer la chaîne dans le code JavaScript Le moyen le plus direct consiste à utiliser la méthode Remplace (): str = str.replace ("trouver", "remplacer"); Cette méthode remplace uniquement la première correspondance. Pour remplacer toutes les correspondances, utilisez une expression régulière et ajoutez le drapeau global G: str = str.replace (/ fi

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Ce tutoriel vous montre comment intégrer une API de recherche Google personnalisée dans votre blog ou site Web, offrant une expérience de recherche plus raffinée que les fonctions de recherche de thème WordPress standard. C'est étonnamment facile! Vous pourrez restreindre les recherches à Y

Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

Cette série d'articles a été réécrite à la mi-2017 avec des informations à jour et de nouveaux exemples. Dans cet exemple JSON, nous examinerons comment nous pouvons stocker des valeurs simples dans un fichier à l'aide du format JSON. En utilisant la notation de paire de valeurs clés, nous pouvons stocker n'importe quel type

Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

Vous voici donc, prêt à tout savoir sur cette chose appelée Ajax. Mais qu'est-ce que c'est exactement? Le terme Ajax fait référence à un regroupement lâche de technologies utilisées pour créer un contenu Web interactif dynamique. Le terme Ajax, inventé à l'origine par Jesse J

10 Highlighters de syntaxe jQuery 10 Highlighters de syntaxe jQuery Mar 02, 2025 am 12:32 AM

Améliorez votre présentation de code: 10 surligneurs de syntaxe pour les développeurs Partager des extraits de code sur votre site Web ou votre blog est une pratique courante pour les développeurs. Le choix du bon surligneur de syntaxe peut améliorer considérablement la lisibilité et l'attrait visuel. T

8 Superbes plugins de mise en page JQuery Page 8 Superbes plugins de mise en page JQuery Page Mar 06, 2025 am 12:48 AM

Tirez parti de jQuery pour les dispositions de page Web sans effort: 8 plugins essentiels JQuery simplifie considérablement la mise en page de la page Web. Cet article met en évidence huit puissants plugins jQuery qui rationalisent le processus, particulièrement utile pour la création de sites Web manuels

Qu'est-ce que & # x27; ceci & # x27; en javascript? Qu'est-ce que & # x27; ceci & # x27; en javascript? Mar 04, 2025 am 01:15 AM

Points de base Ceci dans JavaScript fait généralement référence à un objet qui "possède" la méthode, mais cela dépend de la façon dont la fonction est appelée. Lorsqu'il n'y a pas d'objet actuel, cela fait référence à l'objet global. Dans un navigateur Web, il est représenté par Window. Lorsque vous appelez une fonction, cela maintient l'objet global; mais lors de l'appel d'un constructeur d'objets ou de l'une de ses méthodes, cela fait référence à une instance de l'objet. Vous pouvez modifier le contexte de ceci en utilisant des méthodes telles que Call (), Appliquer () et Bind (). Ces méthodes appellent la fonction en utilisant la valeur et les paramètres donnés. JavaScript est un excellent langage de programmation. Il y a quelques années, cette phrase était

10 tutoriels JavaScript & jQuery MVC 10 tutoriels JavaScript & jQuery MVC Mar 02, 2025 am 01:16 AM

Cet article présente une sélection organisée de plus de 10 didacticiels sur les cadres JavaScript et JQuery Model-View-Controller (MVC), parfait pour augmenter vos compétences en développement Web au cours de la nouvelle année. Ces tutoriels couvrent une gamme de sujets, de Foundatio

See all articles