Backbone入門ガイド(7):RouterとHistory(ルーティングコントローラ)

5628 ワード
Backbone
10.RouterとHistory(ルーティング制御)
Backbone.Routerは、一般的に1ページのアプリケーションで実行され、特定のURLまたはアンカー・ルールを指定された方法(後述するAction)にバインドできるController(コントローラ)の一部を担当しています.
単一ページアプリケーションを開発すると、このような2つの問題に遭遇することがよくあります.
私たちは同じページでユーザーの操作によってHTMLブロックを隠し、表示し、ユーザーにリフレッシュなしで完全にスムーズな体験を提供しますが、ユーザーは彼が現在同じページにいることを知らない可能性があります.そのため、ブラウザの「前進」ボタンと「後退」ボタンを通じて前の操作に戻り、前進したいと思っています.彼が本当にこのように操作すると、現在のページを離れます.これは明らかにユーザーが望んでいないことです.
もう一つの問題は、ユーザーが1ページのアプリケーションで操作し、良い文章を読んだり、気に入った商品を見たりすると、URLをコレクションしたり、自分の友达に共有したりする可能性があります.しかし、彼が次にこのリンクアドレスを再開すると、当初の文章やその商品ではなく、アプリケーションの初期化状態が見えます.
Backbone.Routerはこの2つの問題を解決する方法を提供してくれました.まず例を見てみましょう.
  
var AppRouter = Backbone.Router.extend({
    routes : {
        '' : 'main',
        'topic' : 'renderList',
        'topic/:id' : 'renderDetail',
        '*error' : 'renderError'
    },
    main : function() {
        console.log('      ');
    },
    renderList : function() {
        console.log('      ');
    },
    renderDetail : function(id) {
        console.log('      , id : ' + id);
    },
    renderError : function(error) {
        console.log('URL  ,     : ' + error);
    }
});

var router = new AppRouter();
Backbone.history.start();
 
 
例のコードをあなたのページにコピーします.あなたのページアドレスをhttp://localhost/index.htmlを選択して、次のアドレスにアクセスし、コンソールの出力結果に注意してください.
 
  • http://localhost/index.html//出力:応用入口方法
  • http://localhost/index.html#topic//出力:レンダリングリスト方法
  • http://localhost/index.html#topic/1023//出力:レンダリング詳細方法、idは:1023
  • http://localhost/index.html#about//出力:URLエラー、エラーメッセージ:about
    •  
    その後、ブラウザの「進む」、「戻る」などのボタンを使用して切り替えます.URLを切り替えると、コンソールから対応する結果が出力され、対応する方法が呼び出されていることがわかります.これらの操作を行うと、ページはリフレッシュされません.この例は私たちが最初に言った2つの問題をよく解決した.
    10.1ルーティング規則設定
    「ルータ」という言葉はよく耳にするかもしれませんが、ネットワーク接続、データ転送のナビゲーション、ピボットであるネットワークデバイスを指します.Backboneの「ルータ」機能は似ていますが、上記の例から、異なるURLアンカーを対応するActionメソッドにナビゲートできることがわかります.
    (多くのサービス側Webフレームワークでもこのようなメカニズムが提供されているが、Backbone.Routerはフロントエンドの単一ページアプリケーションのナビゲーションに重点を置いている.)
    Backboneのルーティングは、Backbone.RouterとBackbone.Historyの2つのクラスで共通しています.
    Routerクラスは、ルーティングルールを定義および解析し、URLをActionにマッピングするために使用されます.
    Historyクラスは、URLの変更を傍受し、Actionメソッドをトリガするために使用されます.
    Routerインスタンスを最初に作成すると、自動的にHistoryの単一のオブジェクトが作成されるので、Backbone.historyでこのオブジェクトにアクセスできます.
    ルーティング機能を使用するには、まず、リスニングが必要なURLルールとActionを宣言するRouterクラスを定義する必要があります.先ほどの例では、定義時にroutesプロパティを使用してリスニングが必要なURLリストを定義します.KeyはURLルールを表し、ValueはURLがルールにある場合に実行されるActionメソッドを表します.
    10.2 Hashルール
    URLルールは現在のURLのHash(アンカー)フラグメントを表し、ルールで一般的な文字列を指定できるほか、2つの特別な動的ルールに注意する必要があります.
    ルールに/(斜線)で区切られた文字列は、Routerクラス内で式([^/]+)に変換され、/(斜線)で始まる複数の文字を表します.このルールに「(コロン)を設定すると、URLの文字列がActionにパラメータとして渡されることを示します.
    たとえば、アンカーポイントが#topic/1023の場合、1023はパラメータidとしてActionに渡され、ルール内のパラメータ名(:id)は一般的にActionメソッドのパラメータ名と同じになります.Routerにはこのような制限はありませんが、同じパラメータ名を使用すると理解しやすくなります.
    ルール内の*(アスタリスク)は、上記の例で定義した*errorルールのように、Router内部で式(.*?)に変換され、0文字以上の任意の文字を表します.
    Routerの*(アスタリスク)ルールは正規表現に変換された後に非貪欲モードを使用するため、例えば*type/:idのような組み合わせルールを使用することができ、hot/1023をパラメータとしてActionメソッドに渡すことができます.
    ルールの定義方法について説明します.これらのルールは、Routerオブジェクトにある必要があるアクションメソッド名に対応します.
    Routerクラスを定義した後、Routerオブジェクトをインスタンス化し、URLのリスニングを開始するBackbone.historyオブジェクトのstart()メソッドを呼び出す必要があります.Historyオブジェクトの内部では、デフォルトではonhashchangeイベントリスニングURLのHash(アンカーポイント)の変化により、onhashchangeイベントをサポートしていないブラウザ(例えばIE 6)では、HistoryはsetInterval心拍数でリスニングされます.
    10.3 pushStateルール
    Backbone.HistoryはpushState方式のURLもサポートしており、pushStateはHTML 5が提供する新しい特性であり、現在のブラウザのURL(アンカーポイントだけを変更するのではなく)を操作しながら、ページのリフレッシュを招くことなく、単一のページアプリケーションをより完全なストリームのように使用することができます.
    pushStateプロパティを使用するには、Windows.historyオブジェクトに定義されているHTML 5で提供されるメソッドとイベントを理解する必要があります.
     
  • pushState():このメソッドは、指定したURLをブラウザ履歴に
    • の新しいhistoryエンティティに追加できます.
  • replaceState():このメソッドは、現在のhistoryエンティティを指定されたURL
    • に置き換えることができる.
     
    PushState()メソッドとreplaceState()メソッドを呼び出すと、現在のページのURLを置き換えるだけで、このURLアドレスに実際に移動することはありません(後退または前進ボタンを使用する場合、このURLにジャンプすることもありません)、onpopstateイベントを使用して、この2つのメソッドによるURLの変化を監視できます.
    pushStateプロパティを使用する場合は、サーバ側でURLルールを構成する必要があります.そうしないと、ユーザーが次のアドレスにアクセスするときに、現在のページに正しくナビゲートできない可能性があります.また、以下のバージョンのブラウザでは、Chrome 5、Firefox 4.0、IE 10、Opera 11.5、Safari 5.0はサポートされていません.
    pushStateルールについてはここでは詳しく説明しません.理解が必要な場合は、私が注釈したBackboneソースコードを参照してください.
    10.4ルーティング関連メソッド
    义齿
    ルーティング・ルールを設定した後、動的に調整する必要がある場合は、Router.route()メソッドを呼び出して、ルーティング・ルールおよびアクション・メソッドを動的に追加できます.たとえば、次のようにします.
      
    router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize){
    // todo
});
     
     
    route()メソッドを呼び出すと、与えられたルールは文字列だけでなく、正規表現であってもよい.
      
    router.route(/^topic/(.*?)/(.*?)$/, 'page', function(pageno, pagesize){
    // todo
});
     
     
    navigate()メソッド
    前の例では、URLルールは手動入力によってトリガーされます.実際のアプリケーションでは、手動でジャンプ、ナビゲーションを行う必要がある場合があります.この場合、Router.navigate()メソッドを呼び出して制御できます.たとえば、次のようになります.
      
    router.navigate('topic/1000', {
    trigger: true
});
     
     
    このコードはURLをhttp://localhost/index.html#topic/1000をクリックし、renderDetailメソッドをトリガーします.なお、URLを変更しながら対応するActionメソッドをトリガーするかどうかを示すtrigger構成が2番目のパラメータに入力されている.
    stop()メソッド
    Backbone.history.start()メソッドでルーティングリスニングを開始したことを覚えています.また、Backbone.history.stop()メソッドをいつでも呼び出してリスニングを停止することもできます.たとえば、次のようにします.
      
    router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize) {
    Backbone.history.stop();
});
     
     
    このコードを実行し、URLにアクセスします.http://localhost/index.html#topic/5/20このアクションが実行された後、傍受はもう有効ではありません.
    CLionのUbuntu 18.04-Window 10+opencv構成
    式ツリーを使用してDomainRouteのURLを構築する