web-dev-qa-db-ja.com

優先クライアント側ルーティングソリューション?

1ページのブラウザーベースのWebアプリケーションを設計しています。

JQueryは私のアプリケーションで既に使用されています。現在、データバインディングとUI管理にKnockoutJSを使用する予定です。ただし、過去にBackbone.jsを使用したことがあり、コントローラーレイヤーによって提供されるルーティング機能には非常に感銘を受けました。

また、クライアント側ルーティングのための pathjs のようなJQueryベースのソリューションも検討しました。

誰かが適切なルーティングシステムを選択するための提案やガイドラインを提供できれば素晴らしいと思います。

KnockoutJSの優れたデータバインディング機能のため、KnockoutJSの代わりにBackbone.jsを使用するつもりはありません。

50
lorefnon

少し調査した後、解決策を見つけました。 @Eisenhauer Backboneのルーティング機能は素晴らしいですが、Backboneを使用していない場合はどうでしょう。私の質問で概説したように、クライアント側のMVVMモデルを提供するKnockoutJSを既に使用しているため、同じページに追加のMVC実装を配置することはあまり良い考えではありません。

スタンドアロンルーティングソリューションを探している人にとって、pathjsはシンプルでエレガントなソリューションです。

より柔軟で強力なスタンドアロンルーティングソリューションは、Crossroads.jsで http://millermedeiros.github.com/crossroads.js/ から入手できます。それは非常にきちんと文書化されており、本当に強力なので、あらゆる要件に適合させることができます。

34
lorefnon

Hashbangアプローチではなく、History APIを使用できますか?

  • ユーザーに表示されるURLを操作できます。
  • それは賢明に戻る/進むことを意味します。
  • ページのブックマークは賢明に機能します。
  • ユーザーがページを更新する(または外部ソースからページへのリンクを押す)と、空のページをロードしてからAJAXを介して正しいコンテンツを取得するのではなく、正しいコンテンツが最初にロードされるため、パフォーマンスの点で優れています。

欠点は、古いブラウザではサポートされないことです。ハッシュバンアプローチに頼ることができます(本当に必要な場合)。しかし、これを行う既存のフレームワークは知りません。コンテンツを動的にロードしない(つまり、ユーザーがリンクをクリックするとページ全体がリロードされる)ことを推奨します。履歴APIはますます広くサポートされるようになるため、この「問題」は時間の経過とともに減少します。

実施例 といくつかのドキュメントがあります。アドレスバーからは、ページが「古い学校」(ページ全体の更新)を読み込んでいるように見えますが、コンソール(Firebug、Chrome dev tools)を見ると、コンテンツはAJAXリクエストを介して取得されています。

Mozillaには、いくつかの docs があります。

14
Spycho

また、優れた Director があります

12
Shekhar

Crossroads.js は最高の環境の1つと思われます。主な利点の1つは、ルーティングのためにwindow.locationに依存しないことです。ルーティングとルーティングのみを行うことに固執しているため、軽量です。

あなたが試してみたい他の人: finch.jsdavisjs (psStateに基づき、JSが失敗した場合に既存のリンクをフォールバックとして使用できます)

更新の追加:2015年3月30日-昨年後半にAngularJSに移行しました。 JQから最高のスイッチを手に入れ、ルーティングなどの多くのモジュールが組み込まれています。

4
Deepak Thomas