JavaScript の Backbone.js フレームワークにおけるルーター ルーティングの包括的な分析

バックボーンのルーターはルートとして機能し、URL で # タグが使用されている場合に有効になります。
Router を定義するには、少なくとも 1 つの Router と、特定の URL をマップする関数が必要です。Backbone では、# タグの後の文字は Router によって受信され、解釈されることを覚えておく必要があります。
ルーターを定義しましょう:

<script>
 var AppRouter = Backbone.Router.extend({
  routes: {
   "*actions": "defaultRoute" // 匹配 http://example.com/#anything-here
  }
 });
 // 实例化 Router
 var app_router = new AppRouter;
 
 app_router.on(&#39;route:defaultRoute&#39;, function(actions) {
  alert(actions);
 })
 
 // 打开 Backbone 的历史记录
 Backbone.history.start();
</script>

さて、ルーターを定義しましたが、この時点ではルーターは特定の URL に一致しません。 次に、ルーターがどのように機能するかを詳しく説明します。

動的ルーティング
バックボーンを使用すると、特定のパラメーターを使用してルーターを定義できます。たとえば、URL「http://example.com/#/posts/12」のような特定の ID を持つ投稿を受信したい場合は、ルーターがアクティブ化されると、その ID を持つ投稿を取得できます。 12.ポスト。次に、このルーターを定義しましょう:

<script>
 var AppRouter = Backbone.Router.extend({
  routes: {
   "posts/:id": "getPost",
   "*actions": "defaultRoute" //Backbone 会根据顺序匹配路由
  }
 });
 // 实例化 Router
 var app_router = new AppRouter;
 app_router.on(&#39;route:getPost&#39;, function (id) {
  // 注意，参数通过这里进行传递
  alert( "Get post number " + id ); 
 });
 app_router.on(&#39;route:defaultRoute&#39;, function (actions) {
  alert( actions ); 
 });
 // 打开 Backbone 的历史记录
 Backbone.history.start();
</script>

マッチング ルール
バックボーンは、2 つの形式の変数を使用してルーターのマッチング ルールを設定します。 1 つ目は : で、URL 内のスラッシュ間の任意のパラメータに一致します。もう 1 つは * で、スラッシュ以降のすべてに一致します。 2 番目の形式は最初の形式よりあいまいであるため、一致優先度が最も低いことに注意してください。
あらゆる形式のマッチングの結果は、パラメーターの形式で関連する関数に渡されます。最初のルールは 1 つ以上のパラメーターを返し、2 番目のルールはマッチング結果全体を 1 つのパラメーターとして返します。
次に、例で説明します:

routes:{
 
 "posts/:id": "getPost",
 // <a href="http://example.com/#/posts/121">Example</a>
 
 "download/*path": "downloadFile",
 // <a href="http://example.com/#/download/user/images/hey.gif">Download</a>
 
 ":route/:action": "loadView",
 // <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a>
 
},
 
app_router.on(&#39;route:getPost&#39;, function( id ){ 
 alert(id); // 匹配后，传递过来的参数为 12
});
app_router.on(&#39;route:downloadFile&#39;, function( path ){ 
 alert(path); // 匹配后，整个匹配结果作为一个参数返回，路径为 user/images/hey.gif 
});
app_router.on(&#39;route:loadView&#39;, function( route, action ){ 
 alert(route + "_" + action); // 匹配后，传递过来两个参数，此时会弹出 dashboard_graph 
});

「ルーター」という言葉をよく聞くかもしれませんが、これは多くの場合、ネットワーク接続とデータ送信のナビゲーションおよびハブであるネットワークデバイスを指します。 Backbone の「router」関数はこれに似ており、上の例からわかるように、さまざまな URL アンカーを対応する Action メソッドに移動できます。
(多くのサーバーサイド Web フレームワークもそのようなメカニズムを提供しますが、Backbone.Router はフロントエンドの単一ページ アプリケーションのナビゲーションに重点を置いています。)

Backbone のルート ナビゲーションは、Backbone.Router と Backbone の 2 つのクラスによって完成されます。歴史:

Router クラスは、ルーティング ルールを定義および解析し、URL をアクションにマップするために使用されます。

History クラスは、URL の変更を監視し、Action メソッドをトリガーするために使用されます。

初めて Router インスタンスを作成するときに、History のシングルトン オブジェクトが自動的に作成されるため、通常は History を直接インスタンス化しません。Backbone.history を通じてこのオブジェクトにアクセスできます。

ルーティング関数を使用するには、まず Router クラスを定義して、監視する必要がある URL ルールとアクションを宣言する必要があります。先ほどの例では、routes 属性を通じて監視する必要がある URL のリストを定義します。定義する場合、Key は URL ルールを表し、Value は URL がこのルール内にあるときに実行されるアクション メソッドを表します。

ハッシュ ルール
URL ルールは、現在の URL のハッシュ (アンカー) フラグメントを表します。ルール内で一般的な文字列を指定することに加えて、次の 2 つの特別な動的ルールにも注意する必要があります。
ルールは / (スラッシュ) で始まります。は区切られた文字列であり、Router クラス内で / (スラッシュ) で始まる複数の文字を表す式 ([^/]+) に変換されます。このルールで (コロン) が設定されている場合、それは次のことを意味します。 URL 内のこの文字列は、パラメーターとしてアクションに渡されます。
たとえば、ルール topic/:id を設定します。アンカー ポイントが #topic/1023 の場合、ルール内のパラメータ名 (:id) は通常同じになります。 Router にはそのような制限はありませんが、同じパラメータ名を使用した方が理解しやすいです。
ルール内の * (アスタリスク) は、Router 内で 0 個以上の任意の文字を表す式 (.*?) に変換されます。 : (コロン) ルールと比較して、* (アスタリスク) には / ( がありません。スラッシュ) で区切られた制限は、上の例で定義した *error ルールと同様です。
ルーターの * (アスタリスク) ルールは、正規表現に変換された後に非貪欲モードを使用するため、次のような組み合わせルールを使用できます: *type/:id、これは #hot/1023 に一致し、hot と 1023 はAction メソッドにパラメータとして渡されます。

上記は、ルールを定義する方法を説明しています。これらのルールは、Router オブジェクト内に存在する必要がある Action メソッド名に対応します。 Router クラスを定義した後、Router オブジェクトをインスタンス化し、Backbone.history オブジェクトの start() メソッドを呼び出す必要があります。これにより、URL の監視が開始されます。 History オブジェクト内では、URL 内のハッシュ (アンカー) の変更が onhashchange イベントを通じてデフォルトで監視されます。onhashchange イベントをサポートしていないブラウザ (IE6 など) の場合、History は setInterval ハートビートを通じて監視します。

Backbone.History は、pushState URL もサポートしています。pushState は、ページを更新せずに (アンカー ポイントを変更するだけでなく) 現在のブラウザの URL を操作できます。 -page アプリケーションは完全なプロセスのように感じられます。
pushState 機能を使用するには、まず、この機能用に HTML5 によって提供されるいくつかのメソッドとイベントを理解する必要があります (これらのメソッドは window.history オブジェクトで定義されます)。

1.pushState()：该方法可以将指定的URL添加一个新的history实体到浏览器历史里
2.replaceState()：该方法可以将当前的history实体替换为指定的URL

调用pushState()和replaceState()方法，仅仅是替换当前页面的URL，而并不会真正转到这个URL地址（当使用后退或前进按钮时，也不会跳转到该URL），我们可以通过onpopstate事件来监听这两个方法引起的URL变化。

路由相关方法

1.route()方法
在设定好路由规则之后，如果需要动态调整，可以调用Router.route()方法来动态添加路由规则及Action方法，例如：

router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize){ 
 // todo 
}); 
我们调用route()方法时，给定的规则不仅仅可以是字符串，也可以是一个正则表达式：
router.route(/^topic/(.*?)/(.*?)$/, 'page', function(pageno, pagesize){ 
 // todo 
});

2.navigate()方法
在前面的例子中，URL规则都是由我们手动输入触发的，在实际应用中，有时可能需要手动进行跳转、导航，这时可以调用

Router.navigate()方法进行控制，例如：
router.navigate('topic/1000', {
 trigger: true
});

这段代码将URL更改为http://localhost/index.html#topic/1000，并触发了renderDetail方法。需要注意的是，我们在第二个参数传入了trigger配置，该配置用于表示更改URL的同时是否触发相应的Action方法。

3.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，你会发现这个Action被执行之后，监听已经不再生效了。

更多全面解析JavaScript的Backbone.js框架中的Router路由相关文章请关注PHP中文网！