director.jsでフロントエンドルーティングの使用例を実現する。

5329 ワード

director.jsは何ですか？
フロントエンドのrouteフレーム、director.jsクライアントのルーティング登録／解像器は、リフレッシュしない場合には、「〓」を利用して異なるURL経路を組織し、異なるURL経路に応じて異なる方法で呼び出される。どのような経路があれば、どのような方法があるかという意味です。
クライアントブラウザとnode.jsのサーバアプリケーション。更新不要な単一ページアプリケーションやnode.jsアプリケーションの開発に最適です。
互換性：任意のライブラリに依存しません。例えばjqueryなどです。しかし、それはまたjqueryとよく解け合うことができます。
クライアントのルート:
クライアントのルーティング（ハッシュルーティングとも呼ばれる）により、URLを使用したアプリケーション状態に関する情報を指定できます。ユーザが固定されたURLを指定すると、対応するページ表示が行われます。
簡単な例
1.単独で使う

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

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

Directorは、commonの書き方をサポートします。
例は以下の通りです

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

初期化及びルータの登録


 var router = Router(routes);

また、構造方法で導入されたroutesパラメータは、キー対構造を持つオブジェクトであり、多層の入れ子が可能です。キーは、対応するURLから入ってくる経路に対して、一般的に1つのキー値は、分割子によって切断された一部に対応します。キーの値が対応するパスのコールバック関数名が必要です。コールバック関数は、ルーティングテーブルオブジェクトが使用される前に先に宣言します。そうでなければ、jsはエラーを報告します。
また、コールバック関数は、特別な場合以外は匿名関数の使用を推奨しません。できるだけ先に声明してから使用してください。

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

ここのurlは菗dogと嚓catです。
Routerオブジェクトを宣言すると、init()メソッドを呼び出して初期化する必要があります。


router.init();

ルートのイベント
ルーティングイベントは、ルーティングレジストリの中の固定命名属性であり、ルーティング方法router.dispatch（）が呼び出されたときにルーティングマッチングが成功したときに定義されるトリガが必要なコールバック方法を意味する。上記の即時登録機能の「on」方法はイベントです。具体的な情報は以下の通りです。
on：ルートマッチングが成功したら、実行する方法が必要です。
before：「on」メソッドをトリガする前に実行する方法
クライアントのみで有効な方法:
after：現在の登録経路から離れる場合、実行する方法が必要です。
ワンス：現在の登録経路は一回だけの方法です。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

Mybatis-plusメインキーの自己増加と自動注入時間を実現するコード例

どのように一定の確率でアルファベットを選択しますか？