ホームページ > ウェブフロントエンド > jsチュートリアル > Director.js によるフロントエンド ルーティングの使用例の実装

Director.js によるフロントエンド ルーティングの使用例の実装

高洛峰
リリース: 2017-02-03 14:03:23
オリジナル
1509 人が閲覧しました

バックエンド開発を行ったことがある場合、特に Django や Express を使用したことがある場合は、海外の人気ブログ システムである WordPress も非常に古典的なルーティング実装ケースであるサーバー側のルーティング機能に精通しているはずです。では、WordPress を介したルーティングについて簡単に説明しましょう。

WordPress の書き換えルールを理解している人なら誰でも、実際には、あらゆる URL へのアクセスは WordPress インストール ディレクトリ内の Index.php に基づいていることを知っています (WordPress の固定リンクがモード設定である場合を除く)。例えば記事のURLはindex.php?p=id、カテゴリーページのURLはindex.php?cat=idであることが分かります。

ここで、index.php はルーターとして機能します。以下の図を参照してください:

Director.js によるフロントエンド ルーティングの使用例の実装

言い換えると、どのアドレスにアクセスしても、すべてのリクエストは最終的にはindex.phpにリダイレクトされ、プログラムがどのアドレスにリダイレクトするかを決定します。アクセスした URL の特性に基づいて必要なページのタイプを決定し、データベースにクエリを実行し、最後に HTML コンテンツをブラウザに返します。

上記は Web バックエンド ルーティングに関するものですが、フロントエンド ルーティングとは何でしょうか?実際、フロントエンド ルーティング テクノロジは現在広く使用されており、angularJS、ember.js、director.js など、フロントエンド ルーティングをサポートするオープン ソースの JS ライブラリが多数あります。フロントエンド ルーティングの原理はバックエンド ルーティングの原理と同じで、すべてのインタラクションと表示を 1 つのページ上で実行してサーバー リクエストを削減し、顧客エクスペリエンスを向上させるというものです。フロントエンド ルーティングを使用する Web サイト、特に Web アプリケーションがますます増えています。ルーティングを終了します。

director.js は、最も純粋なルート登録/パーサーであり、「#」記号を使用して、ページを更新せずにさまざまな URL パスを整理し、さまざまな URL パスに応じてさまざまなコールバック メソッドを照合します。 Director.jsはクライアントに適用するだけでなく、node.jsを利用してバックグラウンドで上記のバックエンドルーティング機能を実現することもできます。次のフロントエンド ルーティングの実装例を見てください。Web QQ に似た Web デスクトップ アプリケーションを設計する必要があります。デスクトップには多数の小さなアイコンがあり、それぞれの小さなアイコンはコンピューターのデスクトップに似た機能的なアプリケーションです。 。デスクトップに Baidu News ボタンがあります。これをクリックすると、現在のページにウィンドウが表示され、別のアイコンをクリックすると現在の時刻が表示されます。上記のコードでは、director.js はページ内でルーティングと転送に「#」を使用します。上記の例は非常に単純なものですが、Director.js はより複雑で巨大な機能を実装でき、ajax を介してサーバー側のデータを操作でき、他の JS ライブラリと共存できます。

director.js は SEO に影響を与えますか?クライアント側の

Director.js は、すべてのデータが 1 ページにのみ存在し、一部のデータの保存方法が検索エンジン スパイダーによるクロールに適していないため、SEO に影響します。これは、「Web アプリケーション」ではなく Web ページを構築する必要があることを意味します。director.js は非推奨です。

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート