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

最新推荐文章于 2024-09-11 17:09:49 发布
最新推荐文章于 2024-09-11 17:09:49 发布
阅读量132 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/NapXie/p/5616209.html
版权

　　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="后退" οnclick="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="重载" οnclick="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. 源码分析

转载于:https://www.cnblogs.com/NapXie/p/5616209.html

aeo82357
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebView的使用与后退键处理
特创数字
04-05 3237
组件来加载 H5 页面时，对于后退键的处理是一个常见需求，即用户按下手机上的物理返回键时，期望能够返回上一个 H5 页面而不是直接退出应用。为实现这一功能，Uniapp 提供了相应的API和配置项。请注意，具体的API调用可能需要根据 Uniapp 的实际版本和文档进行调整。另外，对于基于VUE3的uni-app项目，可能会使用不同的方式来获取当前webview实例。通常情况下，你需要监听Android或iOS端的硬件返回键事件，并在该事件处理器中执行相应逻辑。在 Uniapp 中使用。
JavaScript笔记
shine_my的博客
03-13 3272
JavaScript笔记
backbone.js使用
weixin_34240657的博客
03-13 80
随着JavaScript程序变得越来越复杂，往往需要一个团队协作开发，这时代码的模块化和组织规范就变得异常重要了。MVC模式就是代码组织的经典模式。backbone.js就是为前端开发提供MVC模式滴！ backebone.js官网介绍 官网左侧菜单栏里面就是backbone.js的全部模块了 Events 事件：backbo...
Backbone入门指南（七）：Router和History (路由控制器)
yujianshenbing的专栏
12-18 489
10. Router和History (路由控制) 　　Backbone.Router担任了一部分Controller（控制器）的工作，它一般运行在单页应用中，能将特定的URL或锚点规则绑定到一个指定的方法（后文中称Action）。 　　当我们开发一个单页应用时，常常会遇到这样两个问题： 　　我们在同一个页面中通过用户的操作来隐藏、显示HTML块，为用户提供一个无刷新、完整流畅的体验，但用户...
JavaScript中，json遍历后存入新的json，以及 JSON.stringify的使用（设计一个程序, 使用者输入的5门课程的成绩后在页面上显示总成绩和平均分, 并列出大于60的成绩）
Lemon
05-27 736
今天看到一份面试题，做了很久才做出来，由此记录一下 题目： 使用JavaScript 设计一个程序, 使用者输入的5门课程的成绩后在页面上显示总成绩和平均分, 并列出大于60的成绩 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Language" content="zh-cn"/> <title&
SpringMVC学习笔记-狂神说
qq_42760375的博客
08-02 183
介绍了MVC框架的历史，和编写springMVC项目所用的关键技术
遇见狂神说 Spring MVC 学习笔记（完整笔记+代码）
记录一名在读研究生的学习笔记、感悟、开发产物
01-08 1026
狂神课程 Spring MVC 完整学习笔记（附详细代码和操作）
SpringMVC学习笔记整理详细
qq_43431171的博客
06-09 6011
SpringMVC 文章目录SpringMVC1.回顾MVC1.1、什么是MVC1.2、Model1时代1.3、Model2时代1.4、回顾Servlet2、什么是SpringMVC2.1、概述2.2、中心控制器2.3、SpringMVC执行原理3.第一个MVC程序配置版注解版小结4.RestFul和控制器控制器Controller实现Controller接口使用注解@ControllerRequestMappingRestFul 风格扩展：小黄鸭调试法5.数据处理及跳转结果跳转方式ModelAndView
【SpringBoot学习笔记 六】JSR303数据校验、日志配置及输出、静态资源映射
MaoLin Tian's Blog
10-08 717
前面5篇Blog详细介绍了SpringBoot的实现原理，本篇Blog从实战的角度来看下SpringBoot开发时我们还需要做哪些工作，这里我选择了三个比较重要的模块来进行介绍，包括我们的数据验证，日志配置以及静态资源的映射，这篇博客结束后我们即将进入到SpringBoot的各种整合和集成的学习中，可以理解为SpringBoot基础学习的最后一篇吧。
Backbone.js(1.1.2) API中文文档.zip Backbone.js离线文档
12-25
4. **路由器（Routers）**：路由器是Backbone.js中的导航控制器，它监听浏览器的哈希变化（#）或HTML5的History API，将URL片段映射到应用程序的函数上，实现页面无刷新的路由。 5. **模板（Templates）**：...
深入解析Backbone.js框架的依赖库Underscore.js的作用
10-22
Backbone.js 是一个用于构建富客户端应用的JavaScript框架，而Underscore.js 提供了丰富的实用函数，帮助开发者更高效地处理数据和对象。本文将详细介绍Underscore.js 的核心功能和其在Backbone.js 中的角色。 ### ...
JavaScript的Backbone.js框架入门学习指引
10-22
Backbone.js是一个基于JavaScript的前端框架，它的出现是为了帮助开发者更好地管理复杂网页应用中的客户端JavaScript代码。Backbone.js将MVC（Model-View-Controller）设计模式引入前端开发，使得数据、视图和用户...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2025
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 528
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 275
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 305
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 573
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
vue3中动态引入本地图片的两种方法
最新发布
haodanzj的博客
09-11 168
动态在本地引入图片
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值