Analyse complète du routage du routeur dans le framework Backbone.js de JavaScript

Le routeur de Backbone agit comme une route et contrôle la direction de l'URL. Il prend effet lorsque la balise # est utilisée dans l'URL.
Définir un routeur nécessite au moins un routeur et une fonction pour mapper une URL spécifique, et nous devons nous rappeler que dans Backbone, tous les caractères après la balise # seront reçus et interprétés par le routeur.
Définissons un routeur :

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

Maintenant, nous avons défini un routeur, mais pour le moment, le routeur ne correspond pas à une URL spécifique. Ensuite, nous commencerons à expliquer en détail comment fonctionne le routeur. fonctionne.

Routage dynamique
Backbone vous permet de définir des routeurs avec des paramètres spécifiques. Par exemple, vous souhaiterez peut-être recevoir une publication avec un identifiant spécifique, comme cette URL : "http://example.com/#/posts/12". Une fois le routeur activé, vous pouvez obtenir une publication avec un identifiant. du 12. poste. Ensuite, définissons ce routeur :

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

Règles de correspondance
Backbone utilise deux formes de variables pour définir les règles de correspondance du routeur. Le premier est :, qui correspond à n'importe quel paramètre entre les barres obliques dans l'URL, et l'autre est *, qui correspond à tout ce qui se trouve après les barres obliques. Notez que puisque la deuxième forme est plus floue que la première, elle a la priorité de correspondance la plus faible.
Les résultats de toute forme de correspondance seront transmis à la fonction concernée sous forme de paramètres. La première règle peut renvoyer un ou plusieurs paramètres, et la seconde règle renverra l'intégralité du résultat de correspondance sous la forme d'un seul paramètre.
Ensuite, nous utilisons des exemples pour illustrer :

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

Vous entendez souvent le mot « routeur », mais il fait souvent référence à un périphérique réseau, qui est une connexion réseau, une navigation de données et un hub pour transmission. La fonction « routeur » dans Backbone est similaire à celle-ci. Comme vous pouvez le voir dans l'exemple ci-dessus, elle peut naviguer dans différentes ancres d'URL vers les méthodes d'action correspondantes.
(De nombreux frameworks Web côté serveur fournissent également un tel mécanisme, mais Backbone.Router se concentre davantage sur la navigation des applications frontales d'une seule page.)

La navigation de routage de Backbone est composée de Backbone.Router et Backbone.History Deux classes fonctionnent ensemble :

La classe Router est utilisée pour définir et analyser les règles de routage et mapper les URL aux actions.

La classe History est utilisée pour surveiller les modifications d'URL et déclencher les méthodes d'action.

Nous n'instancions généralement pas directement un historique, car lorsque nous créons pour la première fois une instance de routeur, nous créerons automatiquement un objet singleton History. Vous pouvez accéder à cet objet via Backbone.history.

Pour utiliser la fonction de routage, nous devons d'abord définir une classe Router pour déclarer les règles d'URL et les actions qui doivent être surveillées. Dans l'exemple qui vient de se présenter, nous utilisons l'attribut routes pour définir la liste des URL. qui doivent être surveillés, où Key représente la règle d'URL et Value représente la méthode d'action exécutée lorsque l'URL est dans la règle.

Règles de hachage
Les règles d'URL représentent le fragment de hachage (ancre) dans l'URL actuelle. En plus de spécifier des chaînes générales dans les règles, nous devons également prêter attention à deux règles dynamiques spéciales : <🎜 >. Une chaîne séparée par / (barre oblique) dans la règle sera convertie en une expression ([^/] ) à l'intérieur de la classe Router, indiquant plusieurs caractères commençant par / (barre oblique) Si dans ce paragraphe Si : (deux-points) est défini dans). la règle, cela signifie que cette chaîne dans l'URL sera passée à l'action en paramètre.
Par exemple, nous définissons la règle topic/:id. Lorsque le point d'ancrage est #topic/1023, 1023 sera transmis à l'action comme paramètre id. Le nom du paramètre (:id) dans la règle sera généralement. identique au paramètre formel de la méthode Action. Les noms sont les mêmes. Bien que Router n'ait pas une telle restriction, il est plus facile à comprendre en utilisant les mêmes noms de paramètres.
Le * (astérisque) dans la règle sera converti en une expression (.*?) à l'intérieur du routeur, qui représente zéro ou plusieurs caractères arbitraires. Par rapport à la règle : (deux-points), * (astérisque) ne fait pas /. (barre oblique) limites séparées, tout comme la règle *error que nous avons définie dans l'exemple ci-dessus.
La règle * (astérisque) dans Router utilise le mode non gourmand après avoir été convertie en expression régulière, vous pouvez donc utiliser une règle combinée telle que : *type/:id, qui correspond à #hot/1023, et Hot et 1023 sera transmis à la méthode Action en tant que paramètres.

Ce qui précède décrit comment définir des règles. Ces règles correspondront à un nom de méthode Action, qui doit être dans l'objet Router.

Après avoir défini la classe Router, nous devons instancier un objet Router et appeler la méthode start() de l'objet Backbone.history, qui commencera à surveiller l'URL. À l'intérieur de l'objet History, les modifications du hachage (ancre) dans l'URL seront surveillées par défaut via l'événement onhashchange. Pour les navigateurs qui ne prennent pas en charge l'événement onhashchange (tels que IE6), History écoutera via le battement de cœur setInterval.

règles pushState

Backbone.History prend également en charge les URL pushState. pushState est une nouvelle fonctionnalité fournie par HTML5. Elle peut gérer l'URL du navigateur actuel (au lieu de simplement changer le point d'ancrage) sans changer l'ancre. point. Cela entraînera l'actualisation de la page, ce qui donnera l'impression que l'application d'une seule page est un processus complet.
Pour utiliser la fonctionnalité pushState, vous devez d'abord comprendre certaines des méthodes et événements fournis par HTML5 pour cette fonctionnalité (ces méthodes sont définies dans l'objet 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中文网！