web-dev-qa-db-ja.com

オールインワンの場所/ハッシュ変更履歴管理ライブラリ

まず、location.pushState/popStateのポリフィルを提供するライブラリがあることを知っています（ History.js 、 Hash.js 、 jQuery hashchange ）なので、これらにリンクしないでください。

RIAで以下を実現するには、より強力なライブラリが必要です。

  1. ユーザーがリンクをクリックする
  2. ライブラリは通知され、Ajaxを介してコンテキストをロードします（完全なリロードはありません！）
  3. すべての<a>要素は、クリックハンドラーで活用されます
    • 2.（preventDefault）でのページのリロードを防止し、
    • 代わりにlocation.pushStateを呼び出します/古いブラウザでは location.hash を設定します
  4. ロードされたコンテンツがページに挿入され、現在のコンテンツを置き換えます
  5. 1に進みます。

また、ユーザーが戻ったときに、以前に読み込まれたコンテンツを復元する必要があります。

例として、Internet Explorer <10およびその他のブラウザで Google + をクリックします。

もっと近くに来るものはありますか？ IE8、FF10、Safari 5およびChrome 18のサポートが必要です。また、MITまたはApacheのような寛容なライセンスが必要です。

cross-browserjavascriptbrowser-history
42
user123444555621

Sammy.js（ http://sammyjs.org ）（MITライセンス）は、やりたいことに最も重点を置いていると私は信じています。

  1. ルート
  2. イベント

私はドキュメントから引用することができますが、それはかなり簡単です：

  • 実行するものに関連するクライアント側のルートを設定します。

  • イベントを呼び出しルートにリンクします。たとえば、リンクをクリックしたときに上のルートを呼び出します。 （これは本当にアプリの決定なので、e.preventDefaultが定義されたイベントで呼び出されることを確認する必要があります。そのため、imhoを使用するライブラリによって抽象化することはできません。）

いくつかの関連ドキュメント

ルートの例：（from http://sammyjs.org/docs/tutorials/json_store_1 ）

 this.get('#/', function(context) {
    $.ajax({
      url: 'data/items.json',
      dataType: 'json',
      success: function(items) {
        $.each(items, function(i, item) {
          context.log(item.title, '-', item.artist);
        });
      }
    });
  });

または何かのような

 this.get('#/', function(context) {
     context.app.swap(''); ///the 'swap' here indicates a cleaning of the view
                              //before partials are loaded, effectively rerendering the entire screen. NOt doing the swap enables you to do infinite-scrolling / appending style, etc. 
     // ...
   });

もちろん、他のクライアントサイドMVCフレームワークもオプションになる可能性があります。これにより、より多くの配管が不要になりますが、この状況ではやり過ぎになる可能性があります。

かなり良い（そしてかなり最近の）比較：

http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/ （私はSpine.jsを自分で使用しています）。

最後に、私が少し前に書いた回答を、クライアント側の更新などで（私が見る限り）全体のベストプラクティスにまで詳しく説明することを含めると便利だと思いました。

アクセシビリティとこれらすべてのJavaScriptフレームワーク

21
Geert-Jan

現在、アプリケーションの1つで PathJS を使用しています。それは私がした最高の決定でした。特定のユースケースについては、 HTML5の例 をご覧ください。

（ソースからの）例を機能させるコードの一部：

<script type="text/javascript">
        // This example makes use of the jQuery library.

        // You can use any methods as actions in PathJS.  You can define them as I do below,
        // assign them to variables, or use anonymous functions.  The choice is yours.
        function notFound(){
            $("#output .content").html("404 Not Found");
            $("#output .content").addClass("error");
        }

        function setPageBackground(){
            $("#output .content").removeClass("error");
        }        

        // Here we define our routes.  You'll notice that I only define three routes, even
        // though there are four links.  Each route has an action assigned to it (via the 
        // `to` method, as well as an `enter` method.  The `enter` method is called before
        // the route is performed, which allows you to do any setup you need (changes classes,
        // performing AJAX calls, adding animations, etc.
        Path.map("/users").to(function(){
            $("#output .content").html("Users");
        }).enter(setPageBackground);

       Path.map("/about").to(function(){
            $("#output .content").html("About");
        }).enter(setPageBackground);

       Path.map("/contact").to(function(){
            $("#output .content").html("Contact");
        }).enter(setPageBackground);

        // The `Path.rescue()` method takes a function as an argument, and will be called when
        // a route is activated that you have not yet defined an action for.  On this example
        // page, you'll notice there is no defined route for the "Unicorns!?" link.  Since no
        // route is defined, it calls this method instead.
        Path.rescue(notFound);

        $(document).ready(function(){
            // This line is used to start the HTML5 PathJS listener.  This will modify the
            // `window.onpopstate` method accordingly, check that HTML5 is supported, and
            // fall back to hashtags if you tell it to.  Calling it with no arguments will
            // cause it to do nothing if HTML5 is not supported
            Path.history.listen();

            // If you would like it to gracefully fallback to Hashtags in the event that HTML5
            // isn't supported, just pass `true` into the method.

            // Path.history.listen(true);

            $("a").click(function(event){
                event.preventDefault();

                // To make use of the HTML5 History API, you need to tell your click events to
                // add to the history stack by calling the `Path.history.pushState` method. This
                // method is analogous to the regular `window.history.pushState` method, but
                // wraps calls to it around the PathJS dispatched.  Conveniently, you'll still have
                // access to any state data you assign to it as if you had manually set it via
                // the standard methods.
                Path.history.pushState({}, "", $(this).attr("href"));
            });
        });
    </script>

PathJSには、ルーティングライブラリの最も望ましい機能がいくつかあります。

  • 軽量
  • HTML5 History API、「onhashchange」メソッド、および優雅なデグレデーションをサポート
  • ルートルート、レスキューメソッド、パラメーター化されたルート、オプションのルートコンポーネント（動的ルート）、アスペクト指向プログラミングをサポート
  • 十分にテスト済み（./testsディレクトリで利用可能なテスト）
  • すべての主要ブラウザと互換性があります（Firefox 3.6、Firefox 4.0、Firefox 5.0でテスト済み、Chrome 9、Opera 11、IE7、IE8、IE9））
  • すべてのサードパーティライブラリから独立しているが、すべてのライブラリでナイス

最後のポイントも最も魅力的だと思いました。あなたはそれらを見つけることができます ここ

これがお役に立てば幸いです。

9
Sujay

私はの組み合わせを提案したいと思います

ルーターとしてのcrossroads.js http://millermedeiros.github.com/crossroads.js/

ブラウザーの履歴とハッシュURLを処理するためのハッシュ（多くのフォールバックソリューションあり）： https://github.com/millermedeiros/hasher/ （ http：// millermedeirosに基づいています。 github.com/js-signals/ ）

これには、数行のコード（ajaxコンテンツをロードするためなど）が必要ですが、ルートを処理するときに他の可能性のロードとロードを提供します。

JQueryを使用した例を次に示します（上記のどのライブラリもjQueryを必要としません、私はただ怠惰です...）

http://fiddle.jshell.net/Fe5Kz/2/show/light

[〜＃〜] html [〜＃〜]

<ul id="menu">
    <li>
        <a href="foo">foo</a>            
    </li>
    <li>
        <a href="bar/baz">bar/baz</a>
    </li>
</ul>

<div id="content"></div>

[〜＃〜] js [〜＃〜]

//register routes
crossroads.addRoute('foo', function() {
    $('#content').html('this could be ajax loaded content or whatever');
});

crossroads.addRoute('bar/{baz}', function(baz) {

    //maybe do something with the parameter ...
    //$('#content').load('ajax_url?baz='+baz, function(){
    //    $('#content').html('bar route called with parameter ' + baz);
    //});

    $('#content').html('bar route called with parameter ' + baz);
});


//setup hash handling
function parseHash(newHash, oldHash) {
    crossroads.parse(newHash);
}
hasher.initialized.add(parseHash);
hasher.changed.add(parseHash);
hasher.init();


//add click listener to menu items
$('#menu li a').on('click', function(e) {
    e.preventDefault();
    $('#menu a').removeClass('active');
    $(this).addClass('active');

    hasher.setHash($(this).attr('href'));
});​
8
Max Girkens

Microsoftの BigShelfサンプルSPA（単一ページアプリケーション） を見ましたか？それはあなたが求めていることのほとんどを達成する方法をカバーしているように聞こえます。

カスタムラッパーオブジェクトであるHistory.jsを利用して、NavHistoryと呼ばれるナビゲーションを簡単に制御し、クリック処理のために Knockout.js を使用します。

これがどのように機能するかを非常に簡略化したワークフローを次に示します。最初に、history.jsをラップし、Push状態またはハッシュの変更があるときに実行されるコールバックを登録するNavHistoryオブジェクトを初期化する必要があります。

var nav = new NavHistory({
    params: { page: 1, filter: "all", ... etc ... },
    onNavigate: function (navEntry) {
        // Respond to the incoming sort/page/filter parameters
        // by updating booksDataSource and re-querying the server
    }
});

次に、リンクボタンなどにバインドできるコマンドを使用して、1つ以上のKnockout.jsビューモデルを定義します。

var ViewModel = function (nav) {
  this.search = function () {
    nav.navigate({ page: 2, filter: '', ... }); // JSON object matching the NavHistory params
  };
}

最後に、マークアップで、Knockout.jsを使用してコマンドをさまざまな要素にバインドします。

<a data-bind="click: search">...</a>

リンクされたリソースは、これらすべてがどのように機能するかを説明する上で、はるかに詳細です。残念ながら、それはあなたが求めているような単一のフレームワークではありませんが、これを機能させることがいかに簡単であるかに驚くでしょう。

もう1つ、BigShelfの例に従って、私が構築しているサイトは、ブラウザ間で完全に互換性があり、IE6 +、Firefox、Safari（モバイルおよびデスクトップ）およびChrome（モバイルおよびデスクトップ）

5
sellmeadog

_AjaxTCR Library_ はすべてのベースをカバーしているようで、私がこれまでに見たことのない堅牢なメソッドを含んでいます。 BSDライセンスの下でリリースされています（Open Source Initiative）。

たとえば、以下に5つのAjaxTCR.history();メソッドを示します。

init（onStateChangeCallback、initState）;

addToHistory（id、data、title、url、options）;

すべて取得（）;

getPosition（）;

enableBackGuard（メッセージ、即時）;

上記のaddToHistory();には、Webサイトでのディープハッシュリンクを可能にするのに十分なパラメーターがあります。

。com.cookie（）、。storage（）、および。template（）のより多くの魅力は、処理するのに十分以上のメソッドを提供しますセッションデータ要件。

十分に文書化された AjaxTCR API Webページ には、ダウンロード可能なドキュメントが起動するための豊富な情報があります。

ステータスの更新：
このWebサイトには Examples Webpage Section ダウンロード可能なものも含まれています。Zipファイルすぐに使えるフロントエンド（Client）およびBack End（Server）プロジェクトファイル。

特に以下はready-to-useの例です：
一方向Cookie
HttpOnly Cookies
履歴の盗難
履歴エクスプローラー

APIメソッドの多くを使用するプロセスを完成させ、小さな学習曲線をより速く完了するためのかなり他の例があります。

3
arttronics

いくつかの提案

注：ExtJsの履歴が add()への重複（冗長）呼び出しを最適化するために拡張されました） 。

3
Eliran Malka

PJAXは、あなたが説明しているプロセスです。

より高度なpjax手法では、ユーザーがリンクの上にカーソルを置くと、コンテンツのプリロードが開始されます。

これは良いpjaxライブラリです。 https://github.com/MoOx/pjax

後続のリクエストで更新する必要があるコンテナをマークします。

new Pjax({ selectors: ["title", ".my-Header", ".my-Content", ".my-Sidebar"] })

したがって、上記では、title、.my-header、.my-content、.my-sidebarは、ajax呼び出しからのコンテンツに置き換えられます。

気をつけるべきこと

JSがどのように読み込まれ、ページの準備ができたかを検出する方法に注意してください。 JavaScriptは新しいページでリロードされません。同じ理由で、分析呼び出しが呼び出されるタイミングにも注意してください。

0
LessQuesar