Heim > Artikel > Web-Frontend > Director.js implementiert Anwendungsbeispiele für das Front-End-Routing

Director.js implementiert Anwendungsbeispiele für das Front-End-Routing

高洛峰Original: 2017-02-03 14:03:231459Durchsuche

Nachdem Sie die Back-End-Entwicklung durchgeführt haben, insbesondere wenn Sie Django oder Express verwendet haben, sollten Sie mit serverseitigen Routing-Funktionen vertraut sein. WordPress, ein beliebtes ausländisches Blog-System, ist auch ein sehr klassischer Routing-Implementierungsfall. Also, was ist das Routing? Lassen Sie uns kurz über WordPress sprechen.

Jeder, der die Regeln zum Umschreiben von WordPress versteht, weiß, dass der Zugriff auf jede URL tatsächlich auf index.php im WordPress-Installationsverzeichnis basiert (mit Ausnahme des Zugriffs auf Dateien, die bereits auf dem Server vorhanden sind). Dies ist offensichtlich, wenn es sich bei dem Link um eine Moduseinstellung handelt. Die URL des Artikels lautet beispielsweise index.php?p=id und die URL der Kategorieseite lautet index.php?cat=id.

Hier fungiert index.php als Router, siehe Bild unten:

Director.js implementiert Anwendungsbeispiele für das Front-End-Routing

Mit anderen Worten, egal welche Adresse Sie besuchen, alle Anfragen wird schließlich zu index.php weitergeleitet. Das Programm ermittelt anhand der Eigenschaften der aufgerufenen URL, welchen Seitentyp Sie benötigen, führt dann eine Abfrage an die Datenbank durch und gibt schließlich den HTML-Inhalt an den Browser zurück.

Oben geht es um das Web-Back-End-Routing. Was ist also das Front-End-Routing? Tatsächlich ist die Front-End-Routing-Technologie mittlerweile weit verbreitet. Es gibt viele Open-Source-JS-Bibliotheken, die Front-End-Routing unterstützen, wie etwa AngularJS, Ember.js, Director.js usw. Das Prinzip des Front-End-Routings ist das gleiche wie das des Back-End-Routings, bei dem alle Interaktionen und Anzeigen auf einer Seite ausgeführt werden, um Serveranfragen zu reduzieren und das Kundenerlebnis zu verbessern. Immer mehr Websites, insbesondere Webanwendungen, verwenden Front-End-Routing. Endrouting.

director.js ist der reinste Routenregistrierungs-/Parser. Er verwendet das „#“-Symbol, um verschiedene URL-Pfade zu organisieren, ohne die Seite zu aktualisieren, und ordnet unterschiedliche Rückrufe entsprechend verschiedenen URL-Pfaden zu. Director.js kann nicht nur auf dem Client angewendet werden, sondern kann mithilfe von node.js auch die oben erwähnte Back-End-Routing-Funktion im Hintergrund implementieren. Schauen wir uns das folgende Beispiel für die Implementierung des Front-End-Routings an.
Sie müssen eine Web-Desktop-Anwendung entwerfen, die Web-QQ ähnelt. Auf dem Desktop befinden sich viele kleine Symbole, und jedes kleine Symbol ist eine funktionale Anwendung, ähnlich einem Computer Desktop. Auf dem Desktop gibt es eine Schaltfläche „Baidu News“, um ein Fenster auf der aktuellen Seite anzuzeigen. Klicken Sie auf ein anderes Symbol, um die aktuelle Uhrzeit anzuzeigen >Von Wie aus dem obigen Code ersichtlich ist, verwendet Director.js das „#“ auf der Seite zum Routing und Weiterleiten. Das obige Beispiel ist nur ein sehr einfaches Beispiel. Director.js kann über Ajax mit serverseitigen Daten interagieren und ist ein leistungsstarkes Tool für die Entwicklung von Webanwendungen.

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

Hat Director.js irgendwelche Auswirkungen auf SEO?

Director.js des Kunden hat Auswirkungen auf die Suchmaschinenoptimierung, da sich alle Daten nur auf einer Seite befinden und die Speichermethode einiger Daten dem Crawlen durch Suchmaschinen-Spider nicht förderlich ist SEO-freundlich, Sie müssen eine Strukturierung durchführen. Es handelt sich eher um eine „Webseite“ als um eine „Webanwendung“, und Director.js wird nicht empfohlen.

Weitere Artikel zur Implementierung von Front-End-Routing-Nutzungsbeispielen durch Director.j finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie Director.js, um Anwendungsbeispiele für das Front-End-Routing zu implementierenNächster Artikel：Verwenden Sie Director.js, um Anwendungsbeispiele für das Front-End-Routing zu implementieren

In Verbindung stehende Artikel

Mehr sehen