Heim > Artikel > Web-Frontend > Verwenden Sie Director.js, um Anwendungsbeispiele für das Front-End-Routing zu implementieren

Verwenden Sie Director.js, um Anwendungsbeispiele für das Front-End-Routing zu implementieren

高洛峰Original: 2017-02-03 13:59:251416Durchsuche

Was ist Director.js?

Verstehen: Das Front-End-Routen-Framework, die Routenregistrierung/Parser des Director.js-Clients, verwendet das „#“-Zeichen, um verschiedene URL-Pfade ohne Aktualisierung und entsprechend unterschiedlicher URL-Pfade zu organisieren um verschiedene Methodenaufrufe durchzuführen. Das bedeutet, dass es für jeden Pfad eine Methode gibt.

Gelegenheit: Client-Browser und node.js-Serveranwendung. Es eignet sich sehr gut für die Entwicklung von Single-Page-Anwendungen und Node.js-Anwendungen, die nicht aktualisiert werden müssen.

Kompatibilität: Hängt nicht von einer Bibliothek ab. Zum Beispiel JQuery usw. Aber es lässt sich gut in jquery integrieren.

Clientseitiges Routing:

Mit dem clientseitigen Routing (auch Hash-Routing genannt) können Sie einige Informationen zur Verwendung angeben URL-Anwendungsstatus: Wenn der Benutzer eine feste URL angibt, wird die entsprechende Seite angezeigt.

Einfaches Beispiel

1. Allein verwenden

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>A Gentle Introduction</title>
  <script
   src="https://rawgit.com/flatiron/director/master/build/director.min.js">
  </script>
  <script>
   var author = function () { console.log("author"); };
   var books = function () { console.log("books"); };
   var viewBook = function (bookId) {
    console.log("viewBook: bookId is populated: " + bookId);
   };
   var routes = {
    &#39;/author&#39;: author,
    &#39;/books&#39;: [books, function() {
     console.log("An inline route handler.");
    }],
    &#39;/books/view/:bookId&#39;: viewBook
   };
   var router = Router(routes);
   router.init();
  </script>
 </head>
 <body>
  <ul>
   <li><a href="#/author">#/author</a></li>
   <li><a href="#/books">#/books</a></li>
   <li><a href="#/books/view/1">#/books/view/1</a></li>
  </ul>
 </body>
</html>

2 In Kombination mit jquery

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>A Gentle Introduction 2</title>
  <script
   src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
  </script>
  <script
   src="https://rawgit.com/flatiron/director/master/build/director.min.js">
  </script>
  <script>
  $(&#39;document&#39;).ready(function() {
   //
   // create some functions to be executed when
   // the correct route is issued by the user.
   //
   var showAuthorInfo = function () { console.log("showAuthorInfo"); };
   var listBooks = function () { console.log("listBooks"); };
   var allroutes = function() {
    var route = window.location.hash.slice(2);
    var sections = $(&#39;section&#39;);
    var section;
    section = sections.filter(&#39;[data-route=&#39; + route + &#39;]&#39;);
    if (section.length) {
     sections.hide(250);
     section.show(250);
    }
   };
   //
   // define the routing table.
   //
   var routes = {
    &#39;/author&#39;: showAuthorInfo,
    &#39;/books&#39;: listBooks
   };
   //
   // instantiate the router.
   //
   var router = Router(routes);
   //
   // a global configuration setting.
   //
   router.configure({
    on: allroutes
   });
   router.init();
  });
  </script>
 </head>
 <body>
  <section data-route="author">Author Name</section>
  <section data-route="books">Book1, Book2, Book3</section>
  <ul>
   <li><a href="#/author">#/author</a></li>
   <li><a href="#/books">#/books</a></li>
  </ul>
 </body>
</html>

Direktorunterstützung Die Schreibmethode von commond

lautet wie folgt:

var director = require(&#39;director&#39;);
var router = new director.cli.Router();
router.on(&#39;create&#39;, function () {
 console.log(&#39;create something&#39;);
});
router.on(/destroy/, function () {
 console.log(&#39;destroy something&#39;);
});
// You will need to dispatch the cli arguments yourself
router.dispatch(&#39;on&#39;, process.argv.slice(2).join(&#39; &#39;));

Initialisierung und Router-Registrierung

var router = Router(routes);

Außerdem in der Konstruktionsmethode Der übergebene Routenparameter ist ein Routing-Objekt, bei dem es sich um ein Objekt mit einer Schlüssel-Wert-Paarstruktur handelt, das in mehreren Ebenen verschachtelt werden kann. Der in der URL übergebene Pfad entspricht dem Schlüsselpaar. Im Allgemeinen entspricht ein Schlüsselwert einem bestimmten Teil, nachdem er gemäß dem Trennzeichen geschnitten wurde, und der Wert des Schlüsselwertpaars entspricht dem Namen der Rückruffunktion, die ausgelöst werden muss für den Weg. Die Rückruffunktion muss vor der Verwendung des Routing-Tabellenobjekts deklariert werden, andernfalls meldet js einen Fehler.

Außerdem wird im Allgemeinen nicht empfohlen, anonyme Funktionen für Rückruffunktionen zu verwenden, es sei denn, es liegen besondere Umstände vor. Bitte versuchen Sie, sie zuerst zu deklarieren, bevor Sie sie verwenden.

　 var routes = {
 &#39;/dog&#39;: bark, 
 &#39;/cat&#39;: [meow, scratch]
};

Die URLs hier sind #dog und #cat

Nach der Deklaration des Router-Objekts müssen Sie die init()-Methode zur Initialisierung aufrufen , wie zum Beispiel:

router.init();

Routing-Ereignisse

Routing-Ereignisse sind ein fest benanntes Attribut in der Routing-Registrierung, das sich auf die Routing-Methode bezieht router.dispatch( ) wird aufgerufen, die definierte Rückrufmethode, die ausgelöst werden muss, wenn die Route erfolgreich übereinstimmt (es können mehrere Rückrufmethoden definiert werden). Die „on“-Methode in der oben genannten Sofortregistrierungsfunktion ist ein Ereignis. Die spezifischen Informationen lauten wie folgt:

on: die Methode, die ausgeführt werden muss, wenn die Route erfolgreich abgeglichen wurde

before: die Methode, die vor dem „ ausgeführt werden muss on“-Methode wird ausgelöst

Methoden, die nur auf der Clientseite gültig sind:

after: Methoden, die beim Verlassen des aktuellen Registrierungspfads ausgeführt werden müssen

einmal: Der aktuelle Registrierungspfad ist nur Methode zur einmaligen Ausführung

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich sein wird, und ich hoffe auch, dass jeder wird die chinesische PHP-Website abonnieren.

Weitere Artikel zur Verwendung von Director.js zur Implementierung des Front-End-Routings 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：Wichtige Unterschiede zwischen benannten und anonymen Pfeilfunktionen in Javascript (empfohlen)Nächster Artikel：Wichtige Unterschiede zwischen benannten und anonymen Pfeilfunktionen in Javascript (empfohlen)

In Verbindung stehende Artikel

Mehr sehen