BackBone.js之Router

一、前言

      有一段時間沒有寫隨筆了，可能是最近的煩心事有點多。不傾訴了，開始我們的主題吧，以前做過一個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的路由中這些都是一個事件，並且還帶有參數。

 

下面我們先定義一個路由：

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

如果是沒有javascript基礎的人看到這串代碼可能僅僅只是認為是執行一個函數而已，但是實際的功能卻不是你想的那樣簡單。

實際的功能是新建一個類，並且這個類繼承自Backbone.Router。（javascript並不存在實際意義上的類，僅僅只是通過某些技巧達到類的效果）。

 

然后我們繼續往下，開始在這個類重寫父類的方法:

    var CustRoute = Backbone.Router.extend({
        initialize: function () {
            console.log("Route initialize");
        }
    });

 

在上面我們重寫了父類中的initialize方法，這個方法會在實例化這個對象的時候被調用。下面我們寫一段代碼去實例化它：

    $(function () {
        new CustRoute();
        Backbone.history.start();
    });

 

這里我們還調用了 Backbone.history.start 方法，這個方法可以讓我們在點擊后退或者前進的時候同樣會觸發路由的事件。

這個時候你可以按F12看看console中是不是輸出上面的字符串。

 

下面我們開始在其中添加路由的路徑，添加的路由路徑要求重寫父類的routes這個對象，那么我們將上面的第一個路由路徑實現：

    var CustRoute = Backbone.Router.extend({
        initialize: function () {
            console.log("Route initialize");
        },
        routes: {
            "help":"helpex"
        },
        helpex: function () {
            console.log("helpex");
        }
    });

 

這個時候我們訪問這個頁面，然后在后面加上 #help 之后重新打開，然后查看console就可以看到輸出的字符串了。當然你會認為這樣

太雞肋，還要手動輸入，所以我們現在可以在頁面中填上下面這個html標記:

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

 

然后我們刷新頁面，點擊這個鏈接。可以看到 console 同樣也輸出了。

 

下面我們在路由的路徑中加上參數，讓觸發的函數可以接收路徑中的數據。我們繼續添加對應的路由：

    var CustRoute = Backbone.Router.extend({
        initialize: function () {
            console.log("Route initialize");
        },
        routes: {
            "": "index",
            "help": "help",
            "single/:single": "fsingle",
            "multip/:single/:multip": "fmultip"
        },
        index: function () {
            console.log("index");
        },
        help: function () {
            console.log("help");
        },
        fsingle: function (single) {
            console.log("single:" + single);
        },
        fmultip: function (single, multip) {
            console.log("multip:" + single + ":" + multip);
        }
    });

 

接着我們再添加如下的鏈接到頁面中：

<div>
    <a href="#help" >help</a>
    <a href="#single/test1">single</a>
    <a href="#single/test2">single2</a>
    <a href="#multip/test1/test2">multip</a>
    <a href="#multip/test2/test3">multip2</a>
</div>

 

接着我們依次點擊這些鏈接，可以看到console正確的輸出了路由路徑中的數據，這里要特別注意的是路由路徑中的參數以 : 開頭

然后跟着這個參數的名稱，並且在響應這個路由的事件中的參數命名也要和路由中的名稱一摸一樣否則你會發現你點擊鏈接根本

沒有任何反應，同時也不會報錯。

 

提示：如果你要用Js代碼去跳轉到這個路由可以使用 對象名.navigate 方法即可。

 

到此為止我們簡單的將路由路徑學習過了，下面我將繼續講解其他的。