Umfassende Analyse des Router-Routings im Backbone.js-Framework von JavaScript

Der Router im Backbone fungiert als Route und steuert die Richtung der URL. Er wird wirksam, wenn das #-Tag in der URL verwendet wird.
Das Definieren eines Routers erfordert mindestens einen Router und eine Funktion zum Zuordnen einer bestimmten URL. Außerdem müssen wir bedenken, dass im Backbone alle Zeichen nach dem #-Tag vom Router empfangen und interpretiert werden.
Lassen Sie uns einen Router definieren:

<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>

Jetzt haben wir einen Router definiert, aber zu diesem Zeitpunkt stimmt der Router nicht mit einer bestimmten URL überein. Als Nächstes beginnen wir mit der detaillierten Erklärung des Routers Funktioniert.

Dynamisches Routing
Mit Backbone können Sie Router mit spezifischen Parametern definieren. Beispielsweise möchten Sie möglicherweise einen Beitrag mit einer bestimmten ID erhalten, z. B. diese URL: „http://example.com/#/posts/12“. Sobald der Router aktiviert ist, können Sie einen Beitrag mit einer ID erhalten vom 12. Beitrag. Als nächstes definieren wir diesen Router:

<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>

Übereinstimmungsregeln
Backbone verwendet zwei Formen von Variablen, um die Übereinstimmungsregeln des Routers festzulegen. Das erste ist :, das mit jedem Parameter zwischen Schrägstrichen in der URL übereinstimmt, und das andere ist *, das mit allem nach den Schrägstrichen übereinstimmt. Beachten Sie, dass das zweite Formular die niedrigste Übereinstimmungspriorität aufweist, da es unschärfer ist als das erste.
Die Ergebnisse jeder Form des Abgleichs werden in Form von Parametern an die entsprechende Funktion übergeben. Die erste Regel kann einen oder mehrere Parameter zurückgeben, und die zweite Regel gibt das gesamte Abgleichsergebnis als einen Parameter zurück.
Als nächstes verwenden wir Beispiele zur Veranschaulichung:

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 
});

Sie hören vielleicht oft das Wort „Router“, aber es bezieht sich oft auf ein Netzwerkgerät, das eine Netzwerkverbindung, Datennavigation und einen Hub darstellt Übertragung. Die „Router“-Funktion in Backbone ähnelt dieser, wie Sie im obigen Beispiel sehen können. Sie kann verschiedene URL-Anker zu den entsprechenden Aktionsmethoden navigieren.
(Viele serverseitige Web-Frameworks bieten ebenfalls einen solchen Mechanismus, aber Backbone.Router konzentriert sich mehr auf die Navigation von Front-End-Einzelseitenanwendungen.)

Die Routing-Navigation von Backbone besteht aus Backbone.Router und Backbone.History Zwei Klassen arbeiten zusammen:

Die Router-Klasse wird verwendet, um Routing-Regeln zu definieren und zu analysieren und URLs Aktionen zuzuordnen.

Die History-Klasse wird verwendet, um URL-Änderungen zu überwachen und Aktionsmethoden auszulösen.

Im Allgemeinen instanziieren wir einen Verlauf nicht direkt, da wir beim ersten Erstellen einer Router-Instanz automatisch ein Verlaufs-Singleton-Objekt erstellen. Sie können über Backbone.history auf dieses Objekt zugreifen.

Um die Routing-Funktion zu verwenden, müssen wir zunächst eine Router-Klasse definieren, um die URL-Regeln und Aktionen zu deklarieren, die überwacht werden müssen. Im aktuellen Beispiel verwenden wir das Routen-Attribut, um die Liste der URLs zu definieren die überwacht werden müssen, wobei Key die URL-Regel und Value die Aktionsmethode darstellt, die ausgeführt wird, wenn die URL in der Regel enthalten ist.

Hash-Regeln
URL-Regeln stellen das Hash-(Anker-)Fragment in der aktuellen URL dar. Zusätzlich zur Angabe allgemeiner Zeichenfolgen in den Regeln müssen wir auch auf zwei spezielle dynamische Regeln achten:
Eine durch / (Schrägstrich) getrennte Zeichenfolge wird innerhalb der Router-Klasse in einen Ausdruck ([^/]+) umgewandelt, was bedeutet, dass mehrere Zeichen mit / (Schrägstrich) beginnen Eine Regel bedeutet, dass diese Zeichenfolge in der URL als Parameter an die Aktion übergeben wird.
Zum Beispiel legen wir die Regel topic/:id fest. Wenn der Ankerpunkt #topic/1023 ist, wird 1023 als Parameter-ID an die Regel übergeben das Gleiche wie der formale Parameter der Action-Methode. Obwohl Router keine solche Einschränkung hat, ist es einfacher, die gleichen Parameternamen zu verwenden.
Das * (Sternchen) in der Regel wird im Router in einen Ausdruck (.*?) umgewandelt, der null oder mehr beliebige Zeichen darstellt. Im Vergleich zur : (Doppelpunkt)-Regel funktioniert * (Sternchen) nicht /. (Schrägstrich) getrennte Grenzwerte, genau wie die *error-Regel, die wir im obigen Beispiel definiert haben.
Die * (Sternchen)-Regel im Router verwendet nach der Konvertierung in einen regulären Ausdruck den Non-Greedy-Modus, sodass Sie eine kombinierte Regel wie *type/:id verwenden können, die #hot/1023 entspricht, und Hot und 1023 werden als Parameter an die Action-Methode übergeben.

Oben wird beschrieben, wie Regeln definiert werden. Diese Regeln entsprechen einem Aktionsmethodennamen, der im Router-Objekt vorhanden sein muss.
Nachdem wir die Router-Klasse definiert haben, müssen wir ein Router-Objekt instanziieren und die start()-Methode des Backbone.history-Objekts aufrufen, die mit der Überwachung der URL beginnt. Innerhalb des History-Objekts werden Änderungen im Hash (Anker) in der URL standardmäßig durch das onhashchange-Ereignis überwacht. Bei Browsern, die das onhashchange-Ereignis nicht unterstützen (z. B. IE6), überwacht History den setInterval-Heartbeat.

PushState-Regeln
Backbone.History unterstützt auch PushState-URLs. PushState ist eine neue Funktion von HTML5. Es kann die URL des aktuellen Browsers bedienen (anstatt nur den Ankerpunkt zu ändern). Der Punkt führt dazu, dass die Seite aktualisiert wird, wodurch sich die Einzelseitenanwendung eher wie ein vollständiger Prozess anfühlt.
Um die pushState-Funktion verwenden zu können, müssen Sie zunächst einige der von HTML5 für diese Funktion bereitgestellten Methoden und Ereignisse verstehen (diese Methoden sind im window.history-Objekt definiert):

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中文网！