jquery.history.js VS jquery-hashchange [英] jquery.history.js VS jquery-hashchange
问题描述
请参阅 http://balupton.github.io/jquery-history/demo/
我被jquery.history.js吸引
意思是当我找到时
http://benalman.com/code/projects/jquery-hashchange/examples/ document_domain /
我认为第二个是基于JQuery。我的意思是它不需要任何额外的插件比jQuery。
jquery.history.js中有什么特别之处？
我应该使用哪一个来覆盖我的浏览器后退和前进按钮？
编辑 - 2013年末
另一个名为sammy.js的哈希库也很受欢迎。它有一个很好的客户端路由映射。客户端路由结构用于处理hashchange事件，以便您可以使用它来为您的某些页面提供单应用程序功能。请参阅 https://github.com/quirkey/sammy/wiki/Presentations 获取一点细节。
此外，在下面的示例中，几乎不需要使用普通链接。你可以使用按钮，li，你想要的任何ajax响应链接，只要你可以绑定到他们的点击事件。您使用的路由参数可以存储在被点击元素的数据属性中，或者存储在通过点击元素可识别的其他位置，即。在一个javascript字典对象中。在点击事件触发后，您可以检索必要的路由值，并使用html5推送状态，jquery-bbq-push状态，hashbanging等。
$ b
概述
当您启动ajax或页面事件时，history.js和jquery-bbq库用于维护状态。您可以使用这些库来存储关于浏览器历史记录的信息，或者您操纵url，以便您可以使用页面上的向前和向后按钮进行ajax调用，选项卡更改，图像浏览以及任何要绑定历史记录日志的任何内容至。这两个库在基本用法上都有类似的API。
History.js
新的history.js库使用html5浏览器标准对于pushstate和popstate，如果浏览器不支持html5 pushstate，则会回退到hashchange方法。 Pushstate允许您将您的网址推送到浏览器栏=更改网址而不重新加载页面！主要的存储库是 https://github.com/browserstate/history.js
要使用它，你
（a）包含脚本文件，（b）绑定到'statechange'事件和（c）处理statechange事件和（d ）当你wnat时触发statechange事件 - 当你点击用户时等等。
注意：
当用户按下向前或向后按钮时，状态改变事件将会火。在bind方法/处理程序中，您将调用获取相应状态的方法。 （1）
方法/函数History.getState（）可用于根据您推入的页面历史记录从服务器获取数据。您可以将任何变量存储在State对象中。通常你想存储一个网址。 （0）每次有人点击您想要追踪历史记录的（非页面刷新）链接时，您需要填充历史记录状态。
（0）
$ b $
$（＃navbar）。on（click，li [data-ajax-link ='true' ]，函数（e）{
var url = $（this）.data（'uri'）;
var target = $（this）.data（'target'）;
（标题，网址）;
}）;
（1）
History.Adapter.bind（window，'statechange'，function（）{
updateContent（History.getState（））;
}）;
（2）
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）你可以拦截链接回发，阻止默认操作，并调用$ .bbq.pushstate。这个pushstate方法将哈希标记之后的内容推入url中。 （5）更改url哈希值，调用绑定到的hashchange事件。 （5续），你可以使用$ .bbq.getState（paramname）在散列之后使用paramname来获取最后的参数。这很有用，因为浏览器会处理正常历史记录中的哈希值。所以当点击前后颠倒时，它会加载前一个或下一个散列状态。如果你正在使用它来让你的应用程序大量使用ajax，那么你会做一个ajax回发来获取先前放置在哈希中的url。有关如何使用它的另一个方面，请查看我最近的答案，以 JQuery烧烤：在哪里存储URL？
烧烤历史样本用法
（4）点击（功能（e））{$ a
$ $ $ $ $ $ $a [data-custom-ajax-link ='true']）。 b $ b var target = $（this）.data（'target'）;
var url = $（this）.attr（'href'）;
$ .bbq.pushState（{url： url，target：target}）;
e.preventDefault（）;
}）;
（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）;}，
成功：函数（数据）{
$ target.html（数据）;
}
}）;
}）;
请注意，我刚刚介绍了如何使用这些插件的基本知识。您可以使用这些插件来管理使用标签，链接或ajax加载的向前和向后按钮。
至于哪一个更好，它的硬说。 History.js将在〜。5年内完全成熟时成为更好的库（它仍然处于测试阶段，但它对未来是一个不错的选择，请注意其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 。除了历史部分之外还有更多内容。
See http://balupton.github.io/jquery-history/demo/
I was attracted with jquery.history.js
mean while I found
http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/
I think the second one is just based on JQuery. I mean it don't need any additional plugin than jQuery.
What is special in jquery.history.js? than hash change?.
Which should I use to override my browsers back and forward buttons ?
EDIT - Late 2013
Another hash library called "sammy.js" is popular as well. It has a nice client side routing map. The client side routing structure is used to handle the hashchange events, so that you can use it to provide single-app-like functionality to some of your pages. See https://github.com/quirkey/sammy/wiki/Presentations for a bit of detail.
Also, its hardly necessary to use normal links is done in the examples below. You can use buttons, li's, whatever you want as as ajax responsive links, as long as you can bind to their on click event. The routing parameters you use may be stored in the data attributes of the clicked elements or otherwise somewhere else identifiable through the clicked element, ie. in a javascript dictionary object. After the on-click event fires, then you can then retrieve the necessary route values and use the html5 push state, jquery-bbq-push state, hashbanging, etc.
Overview The history.js and jquery-bbq libraries are used to maintain state when you fire ajax or on page events. You use these libraries to store information about the browser history &/or you manipuate the url so that you can use the forward and back buttons on pages for ajax calls, tab changes, image browsing, really anything you want to bind the history log to. Both libraries have somewhat similar APIs for basic usage.
History.js The new history.js library uses the html5 browser standards for pushstate and popstate and falls back on the hashchange approach if the browser doesn't support html5 pushstate. Pushstate allows you to push your url to the browser bar = change the url without reloading the page! The main repository is https://github.com/browserstate/history.js
To use it, you (a) include the script files, (b) bind to the 'statechange' event and (c) handle the statechange event and (d)trigger the statechange event when you wnat - when your user clicks etc.
notes: Whenever the user presses the forwards or backwards button the state change event will fire. Inside the bind method/handler, you will call a method that gets the correponding state. (1) The method/function History.getState() can be used to get data from your server based on the page history you've pushed in. You can store any variables in the State object. usually you want to store a url. (0) You need to populate the History state each time somebody clicks on a (non-page refreshing) link for which you want to track the history.
(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());
});
(2)
var updateContent = function(State) {
var url = State.data.url;
var $target = $(State.data.target);
ajaxPost(url, $target);
};
BBQ
Ben Alman's library ie. jquery-bbq.js uses hashes to control the browser history. It is fully compliant with older browsers (as hashchange is like an html4 tech).
If you decide to change the default behavior of a link, when you click on a link, (4) you can intercept the link postback, prevent the default action, and call $.bbq.pushstate. This pushstate method pushes the items inside into the url after a hash mark. (5) This changing of the url hash, calls a 'hashchange' event to which you bind. (5 cont'd) on the hashchange event, you get use $.bbq.getState("paramname") to get the lastet paremeter with "paramname" after the hash. This is usefull because the browser will treat the hashes in the normal history. So when sombody clicks forwards or backwards, it loads the previous or next hash state. If you are using this to make your application use ajax heavily, then you would do an ajax postback to get the url that was previously placed into the hash. For another exapmle of how to use this, look at my recent answer to JQuery BBQ: Where to store URLs?
BBQ History Sample Usage
(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)
$(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);
}
});
});
Note that I've just included the basics of how you could use these plugins. You can use these plugins to manage use of the forward and back buttons with tabs, links, or ajax loads.
As far as which one is 'better', its hard to say. History.js will be the better library when it is fully mature in ~.5 years (its still in beta, but its a good bet for the future, note the large number of open issues and branches on its github site). Jquery-bbq is on the other side of the spectrum in that its 3 years old and hasn't been updated for jquery 1.9 compliance. The good news is that they have a very similar implementation and features so its not too bad to switch between either.
History.js is a bit more future compatible. Look at its API (about half way down on https://github.com/browserstate/history.js
For comparison, the API of bbq is on the page http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html. There's a bit more to it than just the history portion.
这篇关于jquery.history.js VS jquery-hashchange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
