backbone.js实战之导航控制器学习笔记

　　Backbone框架中提供了两个重要的类模型--导航控制器(router)和历史（history），router封装了兼容各类浏览器history的方案，通过使用浏览器的hash对象和HTML 5中 pushState方法， 将某阶段特殊的URL或锚点地址与既定的事件（event)或函数（action）相绑定。输入这些URL地址时，对应完成 不同的功能，从而实现在单页富应用中分享和收藏的功能。

1. History 对象的方法
a. 功能描述
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. 功能描述
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. 功能描述
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. 功能描述
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. 功能描述
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. 功能描述
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. 功能描述
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. 功能描述
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. 源码分析

时间： 2025-01-31 09:10:25

backbone.js实战之导航控制器学习笔记的相关文章

node.js在windows下的学习笔记(2)---简单熟悉一些命令

1.打开如下的安装 2.输入node -v,显示node的版本号 3.输入node --help.显示帮助命令 4.自己用一个文本编辑器编写一下代码,保存为text.js,然后在控制台输入node.exe  text.js的路径(直接把这个js文件拖到控制台自动显示路径),按下回车键 var http = require("http"); http.createServer(function(request, response) { response.writeHead(200, {&

node.js在windows下的学习笔记(1)---安装node.js

1.首先打开http://www.nodejs.org/ 2.选择DOWNLOADS,跳转到下面的画面,我的系统是windows7的32位.所以选择.msi的32bit版本. 3.下载后,得到一个5.43MB大小的安装包, 4.运行安装包 点击next 打个勾,点击next 选择安装目录 最后,安装成功啦 node.js在windows下的学习笔记(1)---安装node.js,布布扣,bubuko.com

《Cocos2d-x游戏开发实战精解》学习笔记3--在Cocos2d-x中播放声音

<Cocos2d-x游戏开发实战精解>学习笔记1--在Cocos2d中显示图像 <Cocos2d-x游戏开发实战精解>学习笔记2--在Cocos2d-x中显示一行文字 之前的内容主要都是介绍如何在屏幕上显示图像,事实上除了图像之外,音乐的播放也可以被理解为一种显示的方式,本节将学习在Cocos2d-x中播放声音的方法. (1)在HelloWorld.h中对HelloWorld类进行如下定义: class HelloWorld : public Cocos2d::Layer { pu

js的call(obj,arg)学习笔记

var add=function (a,b){ return(a+b); } var sub=function (a,b,c){ return(a-b-c); } sub.call(add,1,2,3) //示例的意思时指用sub对象来替换add对象,并传入参数 //使用call来实现继承 function class1(){ this.name="lee"; this.say=function(){ console.log(this.name); } } function class

猫猫学iOS 之微博项目实战(6)导航控制器NavigationController 的滑动回退功能实现

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 一:效果 第二篇里面写了怎样自定义navigation实现自定义的导航控制器左右按钮样式,但是当我们自己实现后,系统自带的向右边滑动来实现回退的功能就不能用了. 这里主要实现滑动回退功能 . 二:代码实现思路 首先 在 NYNavigationController.m中放一个popDelegate来放置要更改的手势代理对象 @interface NYNaviga

Case class和Case object代码实战解析之Scala学习笔记-20

package com.leegh.pattern_match /** * @author Guohui Li */ abstract class Personcase class Student(age: Int) extends Personcase class Worker(age: Int, salary: Double) extends Personcase object Shared extends Person object case_class_object { def main

Type、Array、List、Tuple模式匹配实战解析之Scala学习笔记-18

package com.leegh.pattern_match /** * @author Guohui Li *//** * Type,Array模式匹配 */object Pattern_Match_More { def main(args: Array[String]): Unit = { def match_type(t: Any) = t match { case p: Int => println("It is Integer") case p: String =&g

将js进行到底：node学习笔记5

HTTP开发之Connect工具集--中间件 继学习node.js的TCP API和HTTP API之后,node.js web开发进入了正轨,但这就好像Java的servlet一样,我们不可能使用最基础得Servlet对象去写网站,我们也不能使用最基本的node http API去写一个完整得网站,我们需要更加强大得工具集,web套件,甚至是web开发框架(诸如Java下的Spring MVC),来提供开发者更人性化得web开发环境. 创建网站的基本任务--为何要有中间件 独立托管静态文件,诸

《Cocos2d-x游戏开发实战精解》学习笔记2--在Cocos2d-x中显示一行文字

在Cocos2d-x中要显示文字就需要用到Label控件.在3.x版本的Cocos2d中,舍弃了之前版本所使用的LabelTTF.LabelAtlas.LabelBMFont 3个用于显示文字的类,而使用一个新类Label取代.可想而知,Label实际上就是对之前3个类进行重新封装并统一渲染. 提示:实际上老版本的内容在3.x版本中依然是可以使用的. 下面是在Cocos2d-x中显示文字的一个例子,具体完整项目可在源文件本章目录下找到项目ChapterThree01查看. [范例3-1 在Coc