编辑 - 2013年末
另一个名为“sammy.js”的哈希库也很流行。它有一个不错的客户端路由映射。客户端路由结构用于处理哈希更改事件,因此您可以将其用于为某些页面提供类似单个应用程序的功能。请参见https://github.com/quirkey/sammy/wiki/Presentations了解一些细节。
此外,在下面的示例中几乎没有必要使用普通链接。您可以使用按钮、li等作为响应式链接,只要您可以绑定其单击事件即可。您使用的路由参数可以存储在被点击元素的数据属性中或以其他方式识别该被点击元素,例如在javascript字典对象中。单击事件触发后,您可以检索所需的路由值并使用html5 push状态、jquery-bbq-push状态、哈希敲击等。
概述
history.js和jquery-bbq库用于在触发ajax或页面事件时保存状态。您可以使用这些库来存储与浏览器历史记录相关的信息和/或操纵URL,以便您可以在页面上使用向前和向后按钮进行ajax调用、标签更改、图像浏览等任何您想要将历史记录绑定到的内容。这两个库具有基本用法相似的API。
History.js
新的history.js库使用html5浏览器标准进行pushstate和popstate,并在浏览器不支持html5 pushstate时回退到hashchange方法。Pushstate允许您将URL推送到浏览器栏中 = 更改URL而不重新加载页面!主要代码库在https://github.com/browserstate/history.js
要使用它,您需要
(a) 包含脚本文件, (b) 绑定到“statechange”事件并 (c) 处理 statechange 事件以及 (d) 在需要时触发 statechange 事件 - 当用户点击等操作时。
注意事项:
每当用户按下前进或后退按钮时都会触发状态更改事件。在bind方法/处理程序内部,您将调用一个获取相应状态的方法。(1)
可以使用方法/函数History.getState()根据您所推入的页面历史记录从服务器获取数据。您可以在State对象中存储任何变量。通常要存储URL。(0) 您需要每次有人单击(非刷新页面的)链接时填充历史记录状态,以便跟踪历史记录。
(0)
$("#navbar").on("click","li[data-ajax-link='true']", function(e) {
var url = $(this).data('uri');
var target = $(this).data('target');
var title = $(this).data('text');
History.pushState({ url: url, target: target }, title, url);
});
(1)
History.Adapter.bind(window, 'statechange', function() {
updateContent(History.getState());
});
var updateContent = function(State) {
var url = State.data.url;
var $target = $(State.data.target);
ajaxPost(url, $target);
};
烤肉
Ben Alman的库,即jquery-bbq.js使用哈希标记来控制浏览器历史记录。它完全符合旧版浏览器(因为hashchange就像是一个html4技术)。
如果你决定更改链接的默认行为,当你点击一个链接时,(4) 你可以拦截链接的后台提交(postback),阻止默认操作,并调用$.bbq.pushstate 。此pushstate方法将内部项目推入哈希标记之后的URL中。(5) 这种更改url哈希标记会调用“hashchange”事件,你可以绑定它。(5 cont'd) 在hashchange事件上,你可以使用$.bbq.getState("paramname")来获取哈希标记之后的最新参数"paramname"。这很有用,因为浏览器会将哈希标记视为正常历史记录。所以当某人向前或向后点击时,它会加载先前或下一个哈希状态。如果您使用它来使您的应用程序大量使用ajax,则应该执行ajax提交以获取先前放置在哈希标记中的url。关于如何使用它的另一个示例,请查看我近期回答的JQuery BBQ: Where to store URLs?
BBQ历史记录示例用法
(4)
$("a[data-custom-ajax-link='true']").click(function (e) {
var target = $(this).data('target');
var url = $(this).attr('href');
$.bbq.pushState({ url: url, target: target });
e.preventDefault();
});
(5)
->
(5)
$(window).bind("hashchange", function(e) {
var url = $.bbq.getState("url");
var $target = $($.bbq.getState("target"));
var frame = $.bbq.getState("target");
$.ajax({
url: url,
data : null,
type: "POST",
beforeSend: function (xhr) { xhr.setRequestHeader('X-Target', frame); },
success: function (data) {
$target.html(data);
}
});
});
请注意,我只是提供了如何使用这些插件的基础知识。您可以使用这些插件来管理选项卡、链接或Ajax加载时的前进和后退按钮。
至于哪个更好,很难说。当History.js完全成熟(大约在半年后)时,它将是更好的库(它仍处于测试版阶段,但是它是未来的一个不错选择,请注意其github网站上的大量问题和分支)。Jquery-bbq则完全相反,它已经有3年历史且没有更新以符合jquery 1.9的规范。好消息是它们具有非常相似的实现和特性,所以在两者之间切换并不太困难。
History.js与未来兼容性更强。看一下它的API(在
https://github.com/browserstate/history.js页面的中间部分)。
作为对比,bbq的API在页面
http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html中。其中还涉及到其他一些内容。