1、需求

由于项目一开始做的时候不甚完善,所有的网页没有路由功能,导致一些搜索结果在页面跳转之后,没有被记录下来,在页面跳转之后回退,得到的是页面最原始的结果,没有指定的搜索条件。最近项目的在完善这些小的细节,所以在此记录一下。

2、操作

由于项目的所有传参都是使用 '?' 来标识的,而Backbone的路由是使用锚点 '#' 来的,为了兼容以前的做法,不得不去修改Backbone的源码,还好路由部分的源码不多

2.1 修改Backbone的源码,版本1.3.3

1)修改标识 '#' -> '?'

把源代码中的字符串中的'#'修改为'?',把单个的'#'修改为'?'


例: var pathStripper = /#.*$/; 修改为: var pathStripper = /\?.*$/; 例: this.location.replace(rootPath + '#' + this.getPath()); 修改为: this.location.replace(rootPath + '?' + this.getPath());

注:字符串中的?需要\来转义,字符不需要

2)修改锚点的路由设置


_updateHash: function(location, fragment, replace) { if (replace) { var href = location.href.replace(/(javascript:|\?).*$/, ''); location.replace(href + '?' + fragment); } else { // Some browsers require that `hash` contains a leading #. // location.hash = '?' + fragment; var href = location.href.replace(/(javascript:|\?).*$/, ''); // window.history.pushState({}, 0, href + '?' + fragment); window.history.replaceState({}, 0, href + '?' + fragment); } }

注:

location.hash是原始的修改参数方法,会替换url中'#'以及后的所有内容

window.history.pushState可选目标方法,会增加一次历史记录,刷新页面

window.history.replaceState可选目标方法,会替换掉当前的页面记录,不刷新页面(目前选用方案)

2.2 写一个Util

写一个工具类用于Router的快速使用,和统一修改


/** * RouterUtil.js */ var RouterUtil = (function() { // Backbone Router with a custom parameter extractor var Router = Backbone.Router.extend({ params : "", routes : { "*actions": "defaultRoute" // 匹配 http://example.com/#anything-here }, defaultRoute : function(params) { Router.params = params; }, }); var routerUtil = { web_router : null, init(){ // 初始化 if(!routerUtil.web_router){ routerUtil.web_router = new Router; Backbone.history.start(); } }, getParam(cbFn){ routerUtil.init(); // 获取#之后的参数 if(cbFn){ cbFn(Router.params); } }, route(returnUrl, cbFn){ // 动态的调整 路由规则 例:topic/:pageno/:pagesize routerUtil.web_router.route(returnUrl,"page", cbFn) }, start(){ // 启用路由 if(!Backbone.History.started){ Backbone.history.start(); } }, stop(){ // 关闭路由 if(Backbone.History.started){ Backbone.history.stop(); } }, navigate(returnUrl){ /** * 重构 ,路由导向 */ //此处根据自己的需求去构建参数拼接 //returnUrl为'?'之后的内容 if(returnUrl){ }else{ returnUrl = "searchType=" + SearchBoxUtil.searchType + "&" + SearchBoxUtil.formData; } routerUtil.web_router.navigate(returnUrl, { trigger: true }); } } return routerUtil; })();
2.3 使用

在js中引用的一些方法


// 页面的初始化 initPagi : function(){ RouterUtil.getParam(function(params){ if(!params){ params = ""; } //处理参数 ... }); }, //查询函数 queryData : function(returnUrl,isInitSearchBox){ if(!returnUrl){ returnUrl = ""; } if(isInitSearchBox){ //第一次初始化查询 }else{ //非第一次初始化查询 RouterUtil.navigate(returnUrl); } ... },

菜鸟一枚,随便弄弄的一点代码,有更好的方案请赐教

backbone之路由锚点的替换的更多相关文章

  1. Router和History (路由控制)-backbone

    Router和History (路由控制) Backbone.Router担任了一部分Controller(控制器)的工作,它一般运行在单页应用中,能将特定的URL或锚点规则绑定到一个指定的方法(后文 ...

  2. 全面解析JavaScript的Backbone.js框架中的Router路由

    这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下. Backbone ...

  3. BackBone结合ASP.NET MVC实现页面路由操作

    1. 问题的背景 什么是页面路由操作,就是通过浏览器地址栏的标记来实现页面内部的一些操作,这些操作具有异步性和持久性.应用场景主要有页面操作过程中的添加收藏夹的操作.后退操作等过程中能完全恢复界面. ...

  4. backbone.Router History源码笔记

    Backbone.History和Backbone.Router history和router都是控制路由的,做一个单页应用,要控制前进后退,就可以用到他们了. History类用于监听URL的变化, ...

  5. Backbone源码阅读手记

    Backbone.js是前端的MVC框架,它通过提供模型Models.集合Collection.视图Veiew赋予了Web应用程序分层结构.从源码中可以知道,Backbone主要分了以下几个模块: ( ...

  6. Backbone框架浅析

    Backbone是前端mvc开发模式的框架.它能够让view和model相分离,让代码结构更清晰简答,开发进度加快,维护代码方便.但是,现在出了一种mvvm框架,它是下一代前端mvc开发模式的框架,代 ...

  7. backbone库学习-Router

    backbone库的结构http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html 本文的例子来自http://blog.csdn.n ...

  8. Backbone笔记(续)

    Backbone Bockbone 总览 Backbone 与 MVC 模式:解决某一类问题的通用方案 - 套路 MVC:一种架构模式,解耦代码,分离关注点 M(Model) - 数据模型 V(Vie ...

  9. Backbone源码分析-Backbone架构+流程图

    作者:nuysoft/高云/nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. Backbone0.9.1源码分析分析系列 jQuery1.6.1源码分析系 ...

随机推荐

  1. PHP trait 特性在 Laravel 中的使用个人心得

    trait 是在PHP5.4中为了方便代码复用的一种实现方式,但目前我在看的的PHP项目中较少看的有程序员去主动使用这个实现方式,在laravel中有很多 trait 的使用,关于trait 在 la ...

  2. Flot Reference flot参考文档

    Consider a call to the plot function:下面是对绘图函数plot的调用: var plot = $.plot(placeholder, data, options) ...

  3. Virtualbox使用点滴(共享USB设备,Linux下我的用户没有加到vboxuser中去)

    由于网银客户端的问题,只能够在windows环境下支付,所以一直保存着一个激活的virtualbox下的windows,用来完成在线支付. 过去这个激活的windows是安装在ubuntu 10.10 ...

  4. c# 文本超长截断

    根据控件大小进行截断 private void SetStringTruncat(Static.LabelEx lbl) { string oldStr = lbl.Text; if (string. ...

  5. Android开发环境搭建(原创)

    1,我的环境: win8 64位 2,软件安装: 1) jdk-7u40-windows-i586.exe 下载合适的版本,我下载的是 jdk7u40 32位 for windows 安装JDK,配置 ...

  6. python-监控服务

    最近写了一个web测试程序,因为部署在其他地方,所以想弄个监控的进程去看服务是不是还在,要是不在好发邮件,就用python简单的写了一个. 想法是这样的,单独运行一个monitor的脚本,每隔一段时间 ...

  7. 宜信开源|数据库审核软件Themis的规则解析与部署攻略

    一.介绍 Themis是宜信公司DBA团队开发的一款数据库审核产品,可帮助DBA.开发人员快速发现数据库质量问题,提升工作效率.其名称源自希腊神话中的正义与法律女神.项目取此名称,寓意此平台对数据库质 ...

  8. jQuery-ajax-.load方法

    使用jQuery封装的ajax是非常好用的,这个里面提供了几个比较好用的方法. load(url[,data, callback])方法: 说明:这个是jQuery中的最底层方法$.ajax()封装的 ...

  9. Mac上使用ssh连接服务器title显示服务器的ip

    Mac上使用ssh连接服务器title显示服务器的ip 使用Mac开发时,管理的服务器过多时,会搞混乱.可能有时啪啪啪一顿操作,最后发现操作错了机器. 解决方案 在远程服务器上,编辑vim /etc/ ...

  10. centos crontab用法详解 定时任务的设置

    crontab 是用来让使用者在固定时间或固定间隔执行程序之用,类似于windows的计划任务 安装: yum -y install vixie-cron yum -y install crontab ...