BackBone.js之Router

浏览数：28 / 时间：2015年06月09日

一、前言

有一段时间没有写随笔了，可能是最近的烦心事有点多。不倾诉了，开始我们的主题吧，以前做过一个web的聊天平台，js的代码足足有2k行。

虽然是在一个星期就完成了，但是想想还是不服。一定有一种更简单更快捷的方法，所以开始读《javascript设计模式》从而发现了BackBone.js

这个框架，自然就彻底学了一遍，而且也配合ASP.NET WEB API做了一些DEMO，如果当初使用这个框架或许2k行就变成500行了。下面我们

开始我们的学习之路。

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

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

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>