backbone之路由锚点的替换
2024-09-01 03:11:07
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);
}
...
},
菜鸟一枚,随便弄弄的一点代码,有更好的方案请赐教
最新文章
- SpringMVC配置
- sublime text2中ctags安装问题的解决
- 使用Ant发布hadoop代码到服务器
- 高级Magento模型 EAV
- Python学习笔记(一)Python安装及环境变量的配置
- 【基础教程】推荐10+必备的 WordPress 常用插件
- android 让图片充满整个屏幕
- httpcomponents-client-4.3.6 HttpPost的简单使用
- 使用IntelliLock加密授权你的.Net程序
- win10 UWP Controls by function
- python——报错ImportError:DLL load failed with error code -1073741795的解决方式
- 动态将ASPX生成HTML网页并将网页导出PDF
- 【原创】大数据基础之Azkaban(1)简介、源代码解析
- 程序员工作 996 生病 ICU ?
- 朱晔和你聊Spring系列S1E6:容易犯错的Spring AOP
- python操作三大主流数据库(1)python操作mysql①windows环境中安装python操作mysql数据库的MySQLdb模块mysql-client
- 页面引入js问题
- New text file line delimiter
- P2243 电路维修
- 做出一个SwitchButton的效果,并详细学习一下onDraw(Canvas canvas)方法的使用
热门文章
- 理解typedef(转)
- QML被系统缓存的原理是比较时间戳
- 使用C++还是QML(QML容易使用和维护,效果好)
- 星星的模块封装类 IDSStarsScoreView
- python中的set集合和深浅拷贝
- shell多线程(3)while循环
- sql一关联多查询时否定筛选出现的问题的解决
- Spring Boot的学习之路(03):基础环境搭建,做好学习前的准备工作
- Dynamics 365 for sales - Account与Contact之间的关系
- javascript“命名空间”的费曼输出[原创]