博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
BackbOne移动端框架学习(4):backbone中的 Router
阅读量:5138 次
发布时间:2019-06-13

本文共 2449 字,大约阅读时间需要 8 分钟。

声明:

前言:

  话说,我是开发hybrid APP,使用Backbone真的好吗?在Hybrid里碰不到路由的问题。

1,History pushState/replaceSate

   在学习BackbOne之前,我们要先了解下 H5 最新的 API -- pushState,这个功能解决了什么问题?

  众所周知 Ajax的出现,使得我们的页面变得更加的友好和丰富,但是也同样带来了一些问题,比如 浏览器中前进和后退。而 pushState 的出现,就是解决这一问题的方法。

  具体用法:

  /*            ajax载入~~        */                // history处理        var title = "上海3月开盘项目汇总-" + $(this).text().replace(/\d+$/, "");        document.title = title;        if (event && /\d/.test(event.button)) {                        history.pushState({ title: title }, title, location.href.split("?")[0] + "?" + query     );

  history.replaceSate的方法,是在页面刚初始化的时候,也要对历史记录进行初始化操作,就使用 replaceSate()方法。

2,Backbone.Router

  Router 的意思是 路由,在Backbone是控制 Url。

  一个简单的代码如下:

var AppRouter = Backbone.Router.extend({                                //设置默认的路由规则                routes:{                    "*actions":"defaultRoute" //#actions                },                defaultRoute:function(actions){                    console.log(actions);                }        });        var app_router = new AppRouter;        Backbone.history.start(); //确保驱动初始化URL路由

  以上的代码意思是:创建一个路由类,设置其默认路由规则,创建自定义方法,声明一个实例并启动URL路由功能,

  routes将带参数的URLs映射到路由实例的方法上,简单的说就是为url绑定事件,其中"*actions" 等于 url(http://xx.html?a=1#ss)#右边的字符。

3,Routes映射传参数
var AppRouter = Backbone.Router.extend({                                //设置默认的路由规则                routes:{                    "*actions"                :    "defaultRoute",                    "search/:query/p:page"    :    "search",                    "/getPost/:id"            :    "getPostId"                },                defaultRoute:function(actions){                    console.log(actions);                },                search:function(query,page){                    console.log(page); //search/软件随想录/p2                 },                getPostId:function(id){                    cosnole.log(id);  //getPost/2                 }        });        var app_router = new AppRouter;        Backbone.history.start(); //确保驱动初始化URL路由

  从上面已经可以看出来匹配 # 标签之后内容的方法有两种:

    第一种:用“:”来把 # 后面对应位置作为参数;

    第二种:用“*”,它可以匹配所有的url;

 

4,看完整的例子

  有两个HTML文件,Router.html 和 router_new.html。

  Router.html代码如下:

 

   router_new.html代码如下:

  

       

 

 至此,Backbone的Route讲解完毕,其中我也碰到过不明白的地方,比如由 Route.html带动参数传入到router_new.html的时候,应该输出带过的值才对,但是输出的却是完整的路径?

  

转载于:https://www.cnblogs.com/zhiyuan-2011/articles/3939187.html

你可能感兴趣的文章
Oracle中pls_logger记录日志信息
查看>>
决svn的working copy locked并且cleanup恢复不能的情况
查看>>
数据库备份和恢复新神器SQL Angel for SQL Server问世
查看>>
多态的优缺点
查看>>
235课后第三题
查看>>
Java native关键字
查看>>
设计新人到设计新人=菜鸟到菜鸟?NO!
查看>>
【微服务那些事】Microservices场景下的持续部署
查看>>
HDU 5592 ZYB's Premutation
查看>>
逻辑思维训练之假设法
查看>>
解决Nginx: [error] open() "/usr/local/Nginx/logs/Nginx.pid" failed(2:No such file or directory)...
查看>>
jfinal解决post get请求乱码问题
查看>>
一个屌丝程序猿的人生(六)
查看>>
(xampp)lampp 下配置https(ssl)自签双向认证以后 apache无法启动解决方案
查看>>
ADO.NET实体框架Entity Framework模型-基于XML解析
查看>>
struts2中的action交由spring管理
查看>>
优化php性能的一点总结
查看>>
spring之生命周期
查看>>
javascript总结
查看>>
2019-给你六个建议
查看>>