backbone.js實戰之導航控制器學習筆記

時間  2019-11-18
標籤 backbone.js backbone 實戰 導航 控制器 學習 筆記 欄目 JavaScript 简体版
原文   原文鏈接

　　Backbone框架中提供了兩個重要的類模型--導航控制器(router)和歷史（history），router封裝了兼容各種瀏覽器history的方案，經過使用瀏覽器的hash對象和HTML 5中 pushState方法， 將某階段特殊的URL或錨點地址與既定的事件（event)或函數（action）相綁定。輸入這些URL地址時，對應完成 不一樣的功能，從而實如今單頁富應用中分享和收藏的功能。javascript

1. History 對象的方法
a. 功能描述css

　　在第一個頁面a.html存在一個按鈕和一個超連接元素，若是在history中存在已前進的歷史記錄，則隱藏超連接元素，不然隱藏按鈕。單擊連接元素的時候，進入第二個頁面b.html, 在第二個頁面有個後退按鈕，單擊這個按鈕，則返回上一個歷史記錄頁面。
b. 實現代碼html

a.html
<head>
    <title>HTML5中history API方法</title>
    <style type="text/css">
        div
        {
            margin:5px 0px;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div>記錄總量:<span id="divNum"></span></div>
    <div>刷新前：<span id="divShow"></span></div>
</body>
<script type="text/javascript">
    var obj_a_state = {
        Code: "10107",
        Name: "陶國榮",
        Score: 750
    };
    window.history.pushState(obj_a_state, "HTML5中history API方法", "7-2-b.html");
    document.getElementById("divNum").innerHTML = history.length
    document.getElementById("divShow").innerHTML = JSON.stringify(window.history.state);
</script>

b.html

<head>
    <title>history</title>
    <style type="text/css">
        body
        {
            font-size: 12px;
        }
    </style>
</head>
<body>
<input type="button" value="後退" onclick="window.history.back();" />
</body>

 

c. 頁面效果java

　　　　　　　　
d. 源碼分析jquery


2. HTML 5 中history對象的方法
a. 功能描述瀏覽器

　　第一個頁面a.html中調用history對象的 pushState方法時，分別顯示history對象當前新增的歷史記錄實體總量的內容；第二個頁面b.html中調用history對象的rplacestate方法時，分別顯示history對象當前替換後的歷史記錄實體總量和內容。
b. 實現代碼框架

a.html
<head>
    <title>HTML5中history API方法</title>
    <style type="text/css">
        div
        {
            margin:5px 0px;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div>記錄總量:<span id="divNum"></span></div>
    <div>刷新前：<span id="divShow"></span></div>
</body>
<script type="text/javascript">
    var obj_a_state = {
        Code: "10107",
        Name: "陶國榮",
        Score: 750
    };
    window.history.pushState(obj_a_state, "HTML5中history API方法", "7-2-b.html");
    document.getElementById("divNum").innerHTML = history.length
    document.getElementById("divShow").innerHTML = JSON.stringify(window.history.state);
</script>

b.html

<head>
    <title>HTML5中history API方法</title>
    <style type="text/css">
        div
        {
            margin:5px 0px;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div>記錄總量:<span id="divNum"></span></div>
    <div>刷新後：<span id="divShow"></span></div>
</body>
<script type="text/javascript">
    var obj_b_state = {
        Code: "10107",
        Name: "李建洲",
        Score: 950
    };
    window.history.replaceState(obj_b_state, "HTML5中history API方法");
    document.getElementById("divNum").innerHTML = history.length
    document.getElementById("divShow").innerHTML = JSON.stringify(window.history.state);
</script>

 

c. 頁面效果函數

　　　　
d. 源碼分析源碼分析

 

3. Location對象的屬性和方法
a. 功能描述 this

　　在頁面中添加一個<div>元素，用於顯示遍歷location對象後獲取的對象方法和各個屬性值內容。另外添加兩個 按鈕元素，單擊「重載」按鈕時，從新加載當前頁面，單擊「替換」按鈕時，在當前頁中打開一個新的URL地址。


b. 實現代碼

<head>
    <title>location對象</title>
</head>
<body>
  <div id="divShow"></div>
  <input id="btnreload" type="button" 
         value="重載" onclick="window.location.reload();" />
  <input id="btnreplace" type="button" value="替換" 
         onclick="window.location.replace('http://www.rttop.cn');" />
</body>
<script type="text/javascript">
    var $HTML = "";
    var $obj_wl = window.location;
    for (var idx in $obj_wl) {
        $HTML += "<b>" + idx + ":" + "</b> " + $obj_wl[idx] + "</br>";
    }
    document.getElementById("divShow").innerHTML = $HTML;
</script>

 


c. 頁面效果


d. 源碼分析


4. Action 方式綁定URL地址
a. 功能描述

　　在頁面中添加兩個<div>元素，第一個元素用於建立導航條，在該元素中添加多個超級連接<a>元素。單擊某個連接後，進入相應的特定URL,同時在第二個<div>

元素中顯示對應的功能說明和傳回的參數值。


b. 實現代碼

<head>
    <title>action方式綁定url地址</title>
    <script src="Js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="Js/underscore-min.js" type="text/javascript"></script>
    <script src="Js/backbone-min.js" type="text/javascript"></script>
    <style type="text/css">
        div
        {
            margin:5px 0px;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div>
        <a href="">首頁</a> |
        <a href="#search">查詢列表</a> |
        <a href="#search/abc">關鍵字查詢</a> |
        <a href="#search/abc/p2">頁碼關鍵字查詢</a> |
        <a href="#error">其餘頁</a>
    </div>
    <div id="divShow"></div>
</body>
<script type="text/javascript">
    var $divShow = $("#divShow");
    var testrouter = Backbone.Router.extend({
        routes: {
            '': 'main',
            'search': 'search_list',
            'search/:key': 'search_key',
            'search/:key/p:page': 'search_key_page',
            '*search': 'search_default'
        },
        main: function () {
            $divShow.html("首頁");
        },
        search_list: function () {
            $divShow.html("查詢列表");
        },
        search_key: function (key) {
            $divShow.html("查詢關鍵字爲 " + key + " 記錄");
        },
        search_key_page: function (key, page) {
            $divShow.html("查詢關鍵字爲 " + key + " 記錄,頁碼爲 " + page);
        },
        search_default: function () {
            $divShow.html("其餘頁");
        }
    });
    var router = new testrouter();
    Backbone.history.start();
</script>

 

c. 頁面效果

　　　　

　　　　
d. 源碼分析

 

5. Event方式綁定URL地址
a. 功能描述

　　在構建router類中，經過添加routes屬性聲明須要監聽的URL地址列表時，每綁定一個 對應key/value關係，會觸發一個基於動做（action）函數名的事件。實例化後的對象能夠綁定該事件，並在事件中還能夠接收URL地址傳來額實參數據。
b. 實現代碼

<head>
    <title>event方式綁定url地址</title>
    <script src="Js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="Js/underscore-min.js" type="text/javascript"></script>
    <script src="Js/backbone-min.js" type="text/javascript"></script>
    <style type="text/css">
        div
        {
            margin:5px 0px;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div>
        <a href="">首頁</a> |
        <a href="#search">查詢列表</a> |
        <a href="#search/abc">關鍵字查詢</a> |
        <a href="#search/abc/p2">頁碼關鍵字查詢</a> |
        <a href="#error">其餘頁</a>
    </div>
    <div id="divShow"></div>
</body>
<script type="text/javascript">
    var $divShow = $("#divShow");
    var testrouter = Backbone.Router.extend({
        routes: {
            '': 'main',
            'search': 'search_list',
            'search/:key': 'search_key',
            'search/:key/p:page': 'search_key_page',
            '*search': 'search_default'
        }
    });
    var router = new testrouter();
    router.on("route:main", function () {
        $divShow.html("首頁");
    });
    router.on("route:search_list", function () {
        $divShow.html("查詢列表");
    });
    router.on("route:search_key", function (key) {
        $divShow.html("查詢關鍵字爲 " + key + " 記錄");
    });
    router.on("route:search_key_page", function (key, page) {
        $divShow.html("查詢關鍵字爲 " + key + " 記錄,頁碼爲 " + page);
    });
    router.on("route:search_default", function () {
        $divShow.html("其餘頁");
    });
    Backbone.history.start();
</script>

 

c. 頁面效果

　　　　　　

d. 源碼分析

 


6. 定義hash屬性綁定規則
a. 功能描述

　　在頁面添加兩個<div>元素，第一個元素中添加一個超連接<a>元素。單擊該連接時，進入相應的特定URL地址，同時在第二個 <div>元素中顯示中顯示對應的功能說明和傳回的參數值。
b. 實現代碼

<head>
    <title>定義hash屬性綁定規則</title>
    <script src="Js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="Js/underscore-min.js" type="text/javascript"></script>
    <script src="Js/backbone-min.js" type="text/javascript"></script>
    <style type="text/css">
        div
        {
            margin:5px 0px;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div>
        <a href="#abc/p5">其餘頁</a>
    </div>
    <div id="divShow"></div>
</body>
<script type="text/javascript">
    var $divShow = $("#divShow");
    var testrouter = Backbone.Router.extend({
        routes: {
            '*path/p:page': 'search_other'
        },
        search_other: function (path, page) {
            $divShow.html("路徑名爲 " + path + " ,頁碼爲 " + page);
        }
    });
    var router = new testrouter();
    Backbone.history.start();
</script>

 


c. 頁面效果

　　
d. 源碼分析

 


7. 使用route 方式聲明匹配規則和執行函數
a. 功能描述

　　在router類的initialize函數中，調用route方法聲明匹配規則和執行函數。此外，在實例化導航對象後，再次調用route方法對原來的匹配 規則和執行函數進行從新修改。
b. 實現代碼

<head>
    <title>route()方法</title>
    <script src="Js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="Js/underscore-min.js" type="text/javascript"></script>
    <script src="Js/backbone-min.js" type="text/javascript"></script>
    <style type="text/css">
        div
        {
            margin:5px 0px;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div>
        <a href="">首頁</a> |
        <a href="#search">查詢列表</a> |
        <a href="#search/abc">關鍵字查詢</a> |
        <a href="#search2/abc/p2">頁碼關鍵字查詢</a> |
        <a href="#error">其餘頁</a>
    </div>
    <div id="divShow"></div>
</body>
<script type="text/javascript">
    var $divShow = $("#divShow");
    var testrouter = Backbone.Router.extend({
        routes: {
            '': 'main',
            'search/:key': 'search_key',
            'search/:key/p:page': 'search_key_page',
            '*search': 'search_default'
        },
        initialize: function () {
            this.route("search", 'search_list', function () {
                $divShow.html("初始化時，查詢列表");
            });
        },
        main: function () {
            $divShow.html("首頁");
        },
        search_list: function () {
            $divShow.html("查詢列表");
        },
        search_key: function (key) {
            $divShow.html("查詢關鍵字爲 " + key + " 記錄");
        },
        search_default: function () {
            $divShow.html("其餘頁");
        }
    });
    var router = new testrouter();
    router.route('search2/:key/p:page', 'search_key_page', function (key, page) {
        $divShow.html("實例化後，查詢關鍵字爲 " + key + " 記錄,頁碼爲 " + page);
    });
    Backbone.history.start();
</script>

 

c. 頁面效果

　　　　
d. 源碼分析


8. 使用navigate方式實現動態刷新
a. 功能描述

　　在頁面中使用setInterval 方法隔時調用navigate。在調用時，根據累加值的奇偶性跳轉到不一樣的hash屬性值中。當執行對應的動做（action）函數，將獲取的參數內容顯示在頁面中，實現動態刷新流，顯示不一樣內容的頁面效果。
b. 實現代碼

<head>
    <title>navigate()方法</title>
    <script src="Js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="Js/underscore-min.js" type="text/javascript"></script>
    <script src="Js/backbone-min.js" type="text/javascript"></script>
    <style type="text/css">
        div
        {
            margin:5px 0px;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div id="divShow"></div>
</body>
<script type="text/javascript">
    var $divShow = $("#divShow");
    var testrouter = Backbone.Router.extend({
        routes: {
            'search2/:key': 'search2_key',
            'search3/:key': 'search3_key'
        },
        search2_key: function (key) {
            $divShow.html("查詢2關鍵字爲 " + key + " 記錄");
        },
        search3_key: function (key) {
            $divShow.html("查詢3關鍵字爲 " + key + " 記錄");
        }
    });
    var router = new testrouter();
    var intnum = 0;
    window.setInterval(function () {
        intnum++;
        if (intnum % 2 == 0)
            router.navigate("search2/abc", { trigger: true });
        else
            router.navigate("search3/def", { trigger: true });
    }, 3000);
    Backbone.history.start();
</script>

 


c. 頁面效果 


d. 源碼分析


9. Stop方法的使用
a. 功能描述

　　在上個代碼基礎上添加一個開關按鈕，首次單擊"中止"按鈕時，中止動態無刷新顯示內容的效果，而且按鈕顯示的內容變爲「開始」。再次單擊「開始」按鈕時，將從新啓動無刷新顯示內容的效果，而且按鈕顯示的內容恢復爲"中止"。
b. 實現代碼

<head>
    <title>stop()方法</title>
    <script src="Js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="Js/underscore-min.js" type="text/javascript"></script>
    <script src="Js/backbone-min.js" type="text/javascript"></script>
    <style type="text/css">
        div
        {
            margin:5px 0px;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div id="divShow"></div>
    <input id="btnStop" type="button" value="中止" />
</body>
<script type="text/javascript">
    var $divShow = $("#divShow");
    var testrouter = Backbone.Router.extend({
        routes: {
            'search2/:key': 'search2_key',
            'search3/:key': 'search3_key'
        },
        search2_key: function (key) {
            $divShow.html("查詢2關鍵字爲 " + key + " 記錄");
        },
        search3_key: function (key) {
            $divShow.html("查詢3關鍵字爲 " + key + " 記錄");
        }
    });
    var router = new testrouter();
    var intnum = 0;
    window.setInterval(function () {
        intnum++;
        if (intnum % 2 == 0)
            router.navigate("search2/abc", { trigger: true });
        else
            router.navigate("search3/def", { trigger: true });
    }, 3000);
    Backbone.history.start();
    $("#btnStop").bind("click", function () {
        if ($(this).val() == "中止") {
            $(this).val("開始");
            Backbone.history.stop();
        } else {
            $(this).val("中止");
            Backbone.history.start();
        }
    });
</script>

 

c. 頁面效果

　　　　
d. 源碼分析

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程