backbone之路由锚点的替换
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);
}
...
},
菜鸟一枚，随便弄弄的一点代码，有更好的方案请赐教
