backbone学习进阶二

最新推荐文章于 2024-10-31 15:25:43 发布
最新推荐文章于 2024-10-31 15:25:43 发布
阅读量394 收藏
点赞数
分类专栏： backbone
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ul646691993/article/details/46434485
版权

还是先给出一个样例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>开发一个完整使用backbone框架的前端Web应用</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">
        body
        {
            font-size: 12px;
        }
        ul
        {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
            width: 270px;
        }
        ul li
        {
            margin: 5px 0px;
        }
        ul .lh
        {
            font-weight: bold;
            border-bottom: solid 1px #555;
            background-color: #eee;
            height: 23px;
            line-height: 23px;
        }
        ul .lc
        {
            border-bottom: dashed 1px #ccc;
            height: 23px;
            line-height: 23px;
        }
        ul li span
        {
            padding-left: 10px;
            width: 80px;
            float: left;
        }
    </style>
</head>
<body>
    <ul id="ulshowstus">
        <li class="lh">
            <span>编号</span>
            <span>姓名</span>
            <span>分数</span>
        </li>
    </ul>
    <br />
    <ul>
        <li>编号：
            <input id="txtCode" type="text" />
        </li>
        <li>姓名：
            <input id="txtName" type="text" />
        </li>
        <li>分数：
            <input id="txtScore" type="text" />
        </li>
        <li>
            <input id="btnSubmit" type="button" 
                   value="提交" />
        </li>
    </ul>
    <script type="text/template" id="stus-tpl">  
       <li class="lc">
           <span><%=Code%></span>
           <span><%=Name%></span>
           <span><%=Score%></span>
       </li>
    </script>
</body>
<script type="text/javascript">
    var student = Backbone.Model.extend({
        defaults: {
            Code: "10001",
            Name: "张三",
            Score: 100
        }
    });
    var stulist = Backbone.Collection.extend({
        initialize: function (model, options) {
            this.on("add", options.view.showmodel);
        }
    });
    var stuview = Backbone.View.extend({
        el: $("body"),
        initialize: function () {
            this.stul = new stulist(null, { view: this })
        },
        events: {
            "click #btnSubmit": "addmodel"
        },
        addmodel: function () {
            var stum = new student({
                Code: $("#txtCode").val(),
                Name: $("#txtName").val(),
                Score: $("#txtScore").val()
            });
            this.stul.add(stum);
        },
        showmodel: function (model) {
            this.template = _.template($("#stus-tpl").html());
            $("#ulshowstus").append(this.template(model.toJSON()));
        }
    });
    //实例化一个view视图
    var stuv = new stuview();
</script>
</html>

backbone.js的router

<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>

另外一种的通过事件绑定的方式。

<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>

这里注意一下绑定规则：
1）“/”反斜杠字符表示内容的分隔，该字符在router类内部会自动转成“([^\/]+)”表达式。例如定义如下匹配的规则：
‘#search/a/b/c’: ‘search_a_b_c’
必须在地址栏中输入如下地址：
http://localhost/Ch7/7-6.html#search/a/b/c
才能执行search_a_b_c函数代码。在输入URL地址时，hash属性部分必须与定义规则时的key值完全一致，因为此时的反斜杠字符仅表示内容的分隔。
2）“：”冒号表示该段内容将以参数的方式传给对应的动作（action）函数，而函数也可以通过以回调参数方式进行接收。例如定义如下匹配的规则：
‘#search/:a/m:b/n:c’: ‘search_a_m_n’
必须在地址栏中输入如下地址：
http://localhost/Ch7/7-6.html#search/1/m2/n3
将会执行search_a_m_n函数代码。在该函数中，形参a对应实参1，形参m对应实参2，形参n对应实参3。在执行函数代码时，这些实参值可以通过定义时的形参值进行传递获取。
3）“”星号表示零个或多个任意字符，该字符在router类内部会自动转成为“(.?)”表达式，它可以与反斜杠字符或冒号组合。例如定义如下匹配的规则：
‘*search/:a/m:b/n:c’: ‘default_a_m_n’
可以在地址栏中输入如下地址：
http://localhost/Ch7/7-6.html#error/1/m2/n3
同样会执行default_a_m_n函数代码，还可以通过形参传值的方式获取冒号后对应的实参值。接下来通过一个完整的示例进行介绍。

//在页面中添加两个<div>元素，第一个元素中添加一个超级链接<a>元素。单击该链接时，进入相应的特定URL地址，同时在第二个<div>元素中显示对应的功能说明和传回的参数值。
<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>

另外一个案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
</html>

在页面中使用setInterval方法隔时调用navigate。在调用时，根据累加值的奇偶性跳转到不同的hash属性值中。当执行对应的动作（action）函数，将获取的参数内容显示在页面中，实现动态刷新轮流、显示不同内容的页面效果。


2.实现代码
新建一个HTML文件7-8.html，加入如代码清单7-8所示的代码。
代码清单7-8　navigate方法的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
</html>
我们认识么
关注
专栏目录
深度学习进阶之模型压缩方法概述
白话机器学习
10-07 85
我们知道，一定程度上，网络越深，参数越多，模型也会越复杂，但其最终效果也越好，而模型压缩算法是旨在将一个庞大而复杂的大模型转化为一个精简的小模型。之所以必须做模型压缩，是因为嵌入式设备的算力和内存有限，经过压缩后的模型方才能部署到嵌入式设备上。模型压缩问题的定义可以从3角度出发:计算: 减少浮点运算量（FLOPs），降低延迟（Latency存储: 减少内存占用，提高GPU/NPU计算利用率公式定义模型压缩问题:minPolicyiModelSizePol。
backbone学习进阶—
AirCloud
06-03 1403
早就知道backbone有一些好处，今天开始系统的学习一下backbone了，然后自己在这里贴一些傻逼的不行的代码片段。 代码一 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <script src="jquery-2.1.3.min.js"></scrip
YoLov5进阶——学习笔记
qq_55009448的博客
10-18 1022
打开VSCode，在终端激活对应的环境并输入以下命令： 下载YOLOv8的代码拿来借鉴，地址如下：https://github.com/ultralytics/ultralytics下载好后解压，打开下图目录，双击打开block1文件：在block.py中找到C2f模块复制，打开YOLOv5的common.py文件，粘贴进去：我们发现C2f中有Bottleneck模块，所以把Bottleneck模块也copy过来，为了避免覆盖之前yolov5的块，我们把copy过来的模块加上了前缀：在yolov5的yolo
前端大神是如何一步步学习进阶的？
weixin_45147894的博客
07-09 706
第一阶段: HTML CSS:HTML进阶、CSS进阶、div css布局、HTML css整站开发。JavaScript基础:Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。JS基本特效:常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。JS高级特征:正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础。JQuery:基础使用...
mmsegmentation进阶使用学习笔记（二）——添加自定义模块
gui_lin_ger_的博客
10-31 389
具体模型配置文件：configs/gleformer/gleformer_mit-b5_1xb4-20k_voc12aug-512x512.py。开发新的分割器需要重写与 loss、predict 和 tensor 相对应的 loss、predict 和 _forward 方法。所有组件，包括主干网络（backbone）、头、损失函数、数据预处理器、分割器（segmentor）等都可以自定义。基础数据配置文件：configs/_base_/datasets/voc_road.py。
转载06：前端工程师学习进阶线路
栋栋晓
03-22 568
1、HTML/HTML5基础 2、高健壮性CSS 3、深入学习JS 4、性能 5、http及TCP协议族 6、安全性
前端学习路径进阶
YLC_慕类的博客
10-25 316
第一阶段： HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效： 常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 JS高级特征： 正...
【干货】AI全栈工程师学习+进阶+实战笔记
zandaoguang的博客
10-13 1444
今天给大家推荐一个好朋友小书童，不仅有趣也具有非常强的执行力，独自创立和运营了【集智书童】公众号；【集智书童】从最开始的机器学习与深度学习基础开始记起，为刚刚入门人工智能的小伙伴提供理论基础；同时【集智书童】也保持其前沿性，对最新、最具实用性的论文进行解读和翻译记录，为已经工作的小伙伴、或者科研领域的小伙伴抛砖引玉，希望小伙伴们也可以继往开来，启发更多的思考节约更多的时间成本。最最重要的是，有了理...
深度学习 目标分类 目标检测 多目标跟踪 基础 进阶
flyfish
09-07 1906
flyfish
OpenCV机器学习进阶：图像分割与深度学习实战
[OpenCV机器学习进阶：图像分割与深度学习实战](https://img-blog.csdnimg.cn/2714835991e64f08b2b7ef74c4d547fd.png) # 1. OpenCV机器学习简介** OpenCV（Open Source Computer Vision Library）是一个开源的...
深度学习预训练库，集成各种经典backbone，基于OpenMMLab-MMPretrain库！！！
08-08
【适用人群】：适用于希望学习不同技术领域的初学者或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础...
深度学习预训练库，集成各种经典backbone，基于OpenMMLab-MMPretrain库！！！.zip
02-11
适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究...
Backbone.js入门、进阶教程(2012版)：构建未来单页应用
6. **相关链接**：提供进一步学习和资源链接，引导读者探索更多关于Backbone.js和前端开发的资料。 7. **贡献者**：感谢那些对本书做出贡献的开发者，他们可能提供了代码示例、问题解答或改进意见。 8. **模型基础...
backbone源码解读(一篇全)
AirCloud
02-07 4963
写在前面backbone是我两年多前入门前端的时候接触到的第一个框架，当初被backbone的强大功能所吸引(当然的确比裸写js要好得多)，虽然现在backbone并不算最主流的前端框架了，但是，它里面大量设计模式的灵活运用，以及令人赞叹的处理技巧，还是非常值得学习。个人认为，读懂老牌框架的源代码比会用流行框架的API要有用的多。另外，backbone的源代码最近也改了许多(特别是针对ES6)，所以
backbone内存泄漏
AirCloud
07-27 726
backbone内存泄漏的一个样例代码，以及测试代码和修改后的代码：(自己现在大概没有深刻掌握，以后可以常来看看)var Task = Backbone.Model.extend({})var TaskView = Backbone.View.extend({ tagName: 'tr', template: _.template('<td><%= id %></td><td><%=
最近遇到的一些问题以及解决方案
AirCloud
07-25 720
好久没有写新文章啦。最近比较喜欢用印象笔记，因此一些碎碎的知识自己都用印象笔记做了，这篇文章主要是解决我遇到的一些坑，以及针对这些坑我在网上查到的解决方案 用backbone.js删除数据的时候没有向服务器发送delete请求： 解决方案：增加id属性，见 http://blog.csdn.net/wuyajun1124/article/details/41622867 用mongoo
VB程序实例-运用Mschat图表显示数据(方法二).zip
最新发布
11-03
VB程序实例-运用Mschat图表显示数据(方法二).zip
VB程序实例-改变Windows图标大小.zip
11-03
VB程序实例，可供参考学习使用，希望对你有所帮助
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值