backbone.js实战之导航控制器学习笔记
Backbone框架中提供了两个重要的类模型--导航控制器(router)和历史（history），router封装了兼容各类浏览器history的方案，通过使用浏览器的hash对象和HTML 5中 pushState方法， 将某阶段特殊的URL或锚点地址与既定的事件（event)或函数（action）相绑定。输入这些URL地址时，对应完成 不同的功能，从而实现在单页富应用中分享和收藏的功能。
1. History 对象的方法
a. 功能描述
在第一个页面a.html存在一个按钮和一个超链接元素，如果在history中存在已前进的历史记录，则隐藏超链接元素，否则隐藏按钮。单击链接元素的时候，进入第二个页面b.html, 在第二个页面有个后退按钮，单击这个按钮，则返回上一个历史记录页面。
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>history</title> <style type="text/css"> body { font-size: 12px; } </style> </head> <body> <input type="button" value="后退" onclick="window.history.back();" /> </body>
c. 页面效果
d. 源码分析
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. 功能描述
在页面中添加一个<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. 源码分析
