今天有点晚了，我先把代码贴出来吧。
首先是增加一个jquery extend：
var hashChangeBroker = { _subscribs: {}, _oldHash: "", subscrib: function (fragName, handler) { if (!this._subscribs[fragName]) { this._subscribs[fragName] = []; } this._subscribs[fragName].push(handler); }, publish: function (hash) { var frags = hash.match(/\w+\:\w+&/g); var oldFrags = this._oldHash.match(/\w+\:\w+&/g); var changes = {}; for (var i in frags) { var arr = frags[i].split(":"); changes[arr[0]] = { changed: true, state: arr[1].substring(0, arr[1].length - 1) }; } for (var i in oldFrags) { var arr = oldFrags[i].split(":"); if (changes[arr[0]]) { if (changes[arr[0]].state == arr[1].substring(0, arr[1].length - 1)) { changes[arr[0]].changed = false; } } else { changes[arr[0]] = { changed: true, state: "" }; } } for (var key in changes) { if (!changes[key].changed) continue; for (var i in this._subscribs[key]) { this._subscribs[key][i](changes[key].state); } } this._oldHash = hash; }, changeFrag: function (fragName, state) { var frag = fragName + ":" + state + "&"; if (location.hash.length > 0) { var regex = new RegExp(fragName + "\\:\\w+&"); if (location.hash.search(regex) != -1) { location.hash = location.hash.replace(regex, frag); } else { location.hash += frag; } } else { location.hash = "#" + frag; } }, init: function () { this.publish(location.hash); } } $.extend({hashChangeBroker:hashChangeBroker});
在使用的时候，首先需要在$(document).ready里增加对hashchange的处理，需要引用上面提到的插件：
$(window).hashchange(function (e) { $.hashChangeBroker.publish(location.hash); });
订阅状态变更的代码：
//订阅列表页码状态 $.hashChangeBroker.subscrib("userlist", function (state) { //跳转到对应页 alert("change page:" + state); }); //另一个状态 $.hashChangeBroker.subscrib("other", function (state) { //随便怎么处理吧 alert("other state:" + state); });
变更状态的方法，绑定到对应的控件即可，例如button,link之类：
function go(page) { $.hashChangeBroker.changeFrag("userlist", page); } function otherStateChange() { $.hashChangeBroker.changeFrag("other", "somestate"); }
另外，如果需要在页面初次载入时，可以处理hash，可以在$(document).ready里增加如下代码：
//处理初次载入页面带有的hash $.hashChangeBroker.init();
输出的url类似：
http://yourdomain/something/doit#userlist:3&next:somestate&
hash结构由"&"分隔，每段内容":"前是状态名，后面是状态值(状态值由handler自己处理，解释权由你自己来定:)
最新评论