ホームページ >ウェブフロントエンド >jsチュートリアル >Director.js を使用してフロントエンド ルーティングを実装する使用例
Director.js を使用してフロントエンド ルーティングを実装する使用例
- 高洛峰オリジナル
- 2017-02-03 13:59:251439ブラウズ
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 = {
'/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は一般的な記述方法をサポートします
例は次のとおりです:
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);
コンストラクターで渡されるルート パラメーターはルーティング オブジェクトです。これは、キーと値のペア構造を持つオブジェクトであり、複数のレベルでネストできます。キー ペアに対応する URL で渡されるパス。通常、キー値は区切り文字に従って切り取られた後の特定の部分に対応し、キー値ペアの値はトリガーする必要があるコールバック関数の名前に対応します。パスのために。コールバック関数は、ルーティング テーブル オブジェクトを使用する前に宣言する必要があります。宣言しないと、js がエラーを報告します。
また、特別な事情がない限り、コールバック関数に匿名関数を使用することは一般的に推奨されません。使用する前に、最初に宣言するようにしてください。
var routes = {
'/dog': bark,
'/cat': [meow, scratch]
};
ここでの URL は #dog と #cat です
Router オブジェクトを宣言した後、次のような初期化のために init() メソッドを呼び出す必要があります:
router.init();
ルーティングされたイベント
ルーティングイベントテーブル内の固定名属性は、ルーティング メソッド router.dispatch() が呼び出されたときにルートの照合が成功したときにトリガーする必要があるコールバック メソッドを参照します (複数のコールバック メソッドを定義できます)。上記の即時登録関数の「on」メソッドはイベントです。具体的な情報は以下のとおりです:
on: ルートマッチングが成功したときに実行する必要があるメソッド
before: on メソッドがトリガーされる前に実行されるメソッド
クライアント側でのみ有効:
after: 現在の登録パスを離れるときに実行する必要があるメソッド
once: 現在の登録パスを一度だけ実行するメソッド
上記が内容全体ですこの記事が皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。
director.js を使用してフロントエンド ルーティングの使用例を実装することに関するその他の記事については、PHP 中国語 Web サイトに注目してください。