Backbone之路由锚点的替换

摘要: 1、需求 由于项目一开始做的时候不甚完善,所有的网页没有路由功能,导致一些搜索结果在页面跳转之后,没有被记录下来,在页面跳转之后回退,得到的是页面最原始的结果,没有指定的搜索条件。最近项目的在完善这些小的细节,所以在此记录一下。 2、操作 由于项目的所有传参都是使用 ‘?’ 来标识的,而Backbo阅读全文

1、需求

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

2、操作

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

2.1 修改Backbone的源码,版本1.3.3

1)修改标识 ‘/#’ -> ‘?’

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
	例:

var pathStripper = /#.*$/;

修改为:

var pathStripper = /\?.*$/;

例:

this.location.replace(rootPath + '#' + this.getPath());

修改为:

this.location.replace(rootPath + '?' + this.getPath());

注:字符串中的?需要\来转义,字符不需要
2)修改锚点的路由设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
	_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的快速使用,和统一修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
	/**

* 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中引用的一些方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
	// 页面的初始化

initPagi : function(){

RouterUtil.getParam(function(params){

if(!params){

params = "";

}

//处理参数

...

});

},

//查询函数

queryData : function(returnUrl,isInitSearchBox){

if(!returnUrl){

returnUrl = "";

}

if(isInitSearchBox){

//第一次初始化查询

}else{

//非第一次初始化查询

RouterUtil.navigate(returnUrl);

}

...

},

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