recherche

Maison  >  Article  >  interface Web  >  Utilisez Director.js pour implémenter des exemples d'utilisation de routage frontal

Utilisez Director.js pour implémenter des exemples d'utilisation de routage frontal

高洛峰
高洛峰original
2017-02-03 13:59:251428parcourir

Qu'est-ce que directeur.js ?

Compréhension : Le framework de routage front-end, l'enregistrement/analyseur de routage du client Director.js, utilisez le signe "#" pour organiser différents chemins d'URL sans rafraîchir, et en fonction des différents chemins d'URL pour effectuer différents appels de méthode. Cela signifie qu’il existe une méthode pour n’importe quel chemin.

Occasion : navigateur client et application serveur node.js. Il est très approprié pour développer des applications monopage et des applications node.js qui ne nécessitent pas d'actualisation.

Compatibilité : Ne dépend d'aucune bibliothèque. Par exemple jquery etc. Mais il s'intègre bien avec jquery ;

Routage côté client :

Le routage côté client (également appelé routage de hachage) vous permet de spécifier certaines informations sur l'utilisation. Statut de l'application URL, lorsque l'utilisateur spécifie une URL fixe, la page correspondante s'affiche.

Exemple simple

1. Utiliser seul

<!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 Lorsqu'il est combiné avec 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>

Support du directeur Le La méthode d'écriture de commond

est la suivante : 

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;));

Initialisation et enregistrement du routeur

var router = Router(routes);

De plus, dans le méthode de construction Le paramètre routes transmis est un objet de routage, qui est un objet avec une structure de paire clé-valeur et peut être imbriqué dans plusieurs niveaux. Le chemin passé dans l'URL correspondant à la paire de clés, généralement une valeur de clé correspond à une certaine partie après avoir été coupée selon le séparateur et la valeur de la paire clé-valeur correspond au nom de la fonction de rappel qui doit être déclenchée ; pour le chemin. La fonction de rappel doit être déclarée avant que l'objet de table de routage ne soit utilisé, sinon js signalera une erreur.

De plus, sauf circonstances particulières, il n'est généralement pas recommandé d'utiliser des fonctions anonymes pour les fonctions de rappel. Veuillez essayer de les déclarer avant de les utiliser. 

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

Les URL ici sont #dog et #cat

Après avoir déclaré l'objet Router, vous devez appeler la méthode init() pour l'initialisation , tels que : 

router.init();

Événements routés

Les événements de routage sont un attribut de nom fixe dans le registre de routage, qui fait référence au moment où la méthode de routage router.dispatch() est appelé, la méthode de rappel définie qui doit être déclenchée lorsque la route correspond avec succès (plusieurs méthodes de rappel peuvent être définies). La méthode « on » dans la fonction d'enregistrement instantané ci-dessus est un événement. Les informations spécifiques sont les suivantes :

on : la méthode qui doit être exécutée lorsque la route correspond avec succès

avant : la méthode qui est exécutée avant le " on" est déclenchée

Méthodes qui ne sont valables que côté client :

après : méthodes qui doivent être exécutées en quittant le chemin d'enregistrement actuel

une fois : le chemin d'inscription actuel n'est qu'une méthode d'exécution une fois

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, et j'espère également que tout le monde. s'abonnera au site Web PHP chinois.

Pour plus d'articles sur l'utilisation de Director.js pour implémenter le routage front-end, veuillez faire attention au site Web PHP chinois !

Déclaration：
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
Article précédent：Différences importantes entre les fonctions de flèches nommées et anonymes en Javascript (recommandé)Article suivant：Différences importantes entre les fonctions de flèches nommées et anonymes en Javascript (recommandé)

Articles Liés

Voir plus