BackBone.js之Router

Posted 2020-07-21

二、小试牛刀（点此下载）

      首先我们先看下面几个路径：

http://localhost:2746/Home/Home#help

http://localhost:2746/Home/Home#single/test1

http://localhost:2746/Home/Home#multip/test1/test2

 

某些人可能会认为是用来定位锚点的，但是在BackBone.js的路由中这些都是一个事件，并且还带有参数。

 

下面我们先定义一个路由：

1 var CustRoute = Backbone.Router.extend({
2 });

如果是没有javascript基础的人看到这串代码可能仅仅只是认为是执行一个函数而已，但是实际的功能却不是你想的那样简单。

实际的功能是新建一个类，并且这个类继承自Backbone.Router。（javascript并不存在实际意义上的类，仅仅只是通过某些技巧达到类的效果）。

 

然后我们继续往下，开始在这个类重写父类的方法:

1     var CustRoute = Backbone.Router.extend({
2         initialize: function () {
3             console.log("Route initialize");
4         }
5     });

 

在上面我们重写了父类中的initialize方法，这个方法会在实例化这个对象的时候被调用。下面我们写一段代码去实例化它：

1     $(function () {
2         new CustRoute();
3         Backbone.history.start();
4     });

 

这里我们还调用了 Backbone.history.start 方法，这个方法可以让我们在点击后退或者前进的时候同样会触发路由的事件。

这个时候你可以按F12看看console中是不是输出上面的字符串。

 

下面我们开始在其中添加路由的路径，添加的路由路径要求重写父类的routes这个对象，那么我们将上面的第一个路由路径实现：

 

 1     var CustRoute = Backbone.Router.extend({
 2         initialize: function () {
 3             console.log("Route initialize");
 4         },
 5         routes: {
 6             "help":"helpex"
 7         },
 8         helpex: function () {
 9             console.log("helpex");
10         }
11     });

 

 

这个时候我们访问这个页面，然后在后面加上 #help 之后重新打开，然后查看console就可以看到输出的字符串了。当然你会认为这样

太鸡肋，还要手动输入，所以我们现在可以在页面中填上下面这个html标记:

1 <a href="#help" >help</a>

 

然后我们刷新页面，点击这个链接。可以看到 console 同样也输出了。

 

下面我们在路由的路径中加上参数，让触发的函数可以接收路径中的数据。我们继续添加对应的路由：

 

 1     var CustRoute = Backbone.Router.extend({
 2         initialize: function () {
 3             console.log("Route initialize");
 4         },
 5         routes: {
 6             "": "index",
 7             "help": "help",
 8             "single/:single": "fsingle",
 9             "multip/:single/:multip": "fmultip"
10         },
11         index: function () {
12             console.log("index");
13         },
14         help: function () {
15             console.log("help");
16         },
17         fsingle: function (single) {
18             console.log("single:" + single);
19         },
20         fmultip: function (single, multip) {
21             console.log("multip:" + single + ":" + multip);
22         }
23     });

 

 

接着我们再添加如下的链接到页面中：

 

1 <div>
2     <a href="#help" >help</a>
3     <a href="#single/test1">single</a>
4     <a href="#single/test2">single2</a>
5     <a href="#multip/test1/test2">multip</a>
6     <a href="#multip/test2/test3">multip2</a>
7 </div>

 

 

接着我们依次点击这些链接，可以看到console正确的输出了路由路径中的数据，这里要特别注意的是路由路径中的参数以 : 开头

然后跟着这个参数的名称，并且在响应这个路由的事件中的参数命名也要和路由中的名称一摸一样否则你会发现你点击链接根本

没有任何反应，同时也不会报错。

 

提示：如果你要用Js代码去跳转到这个路由可以使用 对象名.navigate 方法即可。

 

到此为止我们简单的将路由路径学习过了，下面我将继续讲解其他的。