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 = {
'/author': author,
'/books': [books, function() {
console.log("An inline route handler.");
}],
'/books/view/:bookId': 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>Nach dem Login kopieren
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>
$('document').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 = $('section');
var section;
section = sections.filter('[data-route=' + route + ']');
if (section.length) {
sections.hide(250);
section.show(250);
}
};
//
// define the routing table.
//
var routes = {
'/author': showAuthorInfo,
'/books': 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>Nach dem Login kopieren
Direktorunterstützung Die Schreibmethode von commond
lautet wie folgt:
var director = require('director');
var router = new director.cli.Router();
router.on('create', function () {
console.log('create something');
});
router.on(/destroy/, function () {
console.log('destroy something');
});
// You will need to dispatch the cli arguments yourself
router.dispatch('on', process.argv.slice(2).join(' '));Nach dem Login kopieren
Initialisierung und Router-Registrierung
var router = Router(routes);
Nach dem Login kopieren
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 = {
'/dog': bark,
'/cat': [meow, scratch]
};Nach dem Login kopieren
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();
Nach dem Login kopieren
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!
