Director.js を使用してフロントエンドルーティングを実装する使用例-jsチュートリアル-php.cn

Director.js を使用してフロントエンドルーティングを実装する使用例

高洛峰

リリース： 2017-02-03 13:59:25

オリジナル

1375 人が閲覧しました

director.jsとは何ですか?

理解: フロントエンドルートフレームワーク、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 = {
    &#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 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>

ログイン後にコピー

Directorは一般的な記述方法をサポートします

例は次のとおりです:

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

ログイン後にコピー

初期化とルーター登録

var router = Router(routes);

ログイン後にコピー

コンストラクターで渡されるルートパラメーターはルーティングオブジェクトです。これは、キーと値のペア構造を持つオブジェクトであり、複数のレベルでネストできます。キーペアに対応する URL で渡されるパス。通常、キー値は区切り文字に従って切り取られた後の特定の部分に対応し、キー値ペアの値はトリガーする必要があるコールバック関数の名前に対応します。パスのために。コールバック関数は、ルーティングテーブルオブジェクトを使用する前に宣言する必要があります。宣言しないと、js がエラーを報告します。

また、特別な事情がない限り、コールバック関数に匿名関数を使用することは一般的に推奨されません。使用する前に、最初に宣言するようにしてください。

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

ログイン後にコピー

ここでの URL は #dog と #cat です

Router オブジェクトを宣言した後、次のような初期化のために init() メソッドを呼び出す必要があります:

router.init();

ログイン後にコピー

ルーティングされたイベント

ルーティングイベントテーブル内の固定名属性は、ルーティングメソッド router.dispatch() が呼び出されたときにルートの照合が成功したときにトリガーする必要があるコールバックメソッドを参照します (複数のコールバックメソッドを定義できます)。上記の即時登録関数の「on」メソッドはイベントです。具体的な情報は以下のとおりです:

on: ルートマッチングが成功したときに実行する必要があるメソッド

before: on メソッドがトリガーされる前に実行されるメソッド

クライアント側でのみ有効:

after: 現在の登録パスを離れるときに実行する必要があるメソッド

once: 現在の登録パスを一度だけ実行するメソッド

上記が内容全体ですこの記事が皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。

director.js を使用してフロントエンドルーティングの使用例を実装することに関するその他の記事については、PHP 中国語 Web サイトに注目してください。