javascript 如何实现哈希键导航？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9252770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement a hash-key navigation?
提问by trnc
i want to implement a ajax based hash-key navigation like this:
我想实现一个基于 ajax 的哈希键导航，如下所示：
http://www.foo.bar/#/about/
http://www.foo.bar/#/news/
http://www.foo.bar/#/products/
any advice here?
这里有什么建议吗？
thanks in advance!
提前致谢！
回答by Thick
With a hash-based navigation structure, you'll be defining your routes and their handlers via JS in the browser... When the hash is changed, a 'hashchange' event is fired, and the 'window.onhashchange' handler function is called.*
使用基于散列的导航结构，您将通过浏览器中的 JS 定义您的路由及其处理程序......当散列更改时，将触发 'hashchange' 事件，并且 'window.onhashchange' 处理程序函数是被称为。*
e.g.
例如
if ("onhashchange" in window) {
alert("The browser supports the hashchange event!");
}
function locationHashChanged() {
if (location.hash === "#somecoolfeature") {
somecoolfeature();
}
}
window.onhashchange = locationHashChanged;
There's the option of using the more recently introduced HTML5 pushstate, too.
也可以选择使用最近推出的 HTML5 pushstate。
Check out http://www.microjs.com/#spafor some good JS routing libraries--some of them provide support for HTML5 pushstate as well as fallbacks to hashchange for older browsers.
查看http://www.microjs.com/#spa以获得一些好的 JS 路由库——其中一些提供对 HTML5 pushstate 的支持以及对旧浏览器的 hashchange 的回退。
If you're looking to build a serious application you could use something like Backbone.js to handle models, views, routing, etc. You should also check out Crossroads.js (routing library) and its accompanying Hasher.js (hashchange/pushstate library) if you don't need all the extras that come with Backbone.
如果您想构建一个严肃的应用程序，您可以使用 Backbone.js 之类的东西来处理模型、视图、路由等。您还应该查看 Crossroads.js（路由库）及其随附的 Hasher.js（hashchange/pushstate库），如果您不需要 Backbone 附带的所有附加功能。
...or there's LeviRoutes (HTML5 pushstate only, VERY much like routing in Express for Node.js).
...或者有 LeviRoutes（仅限 HTML5 pushstate，非常类似于 Express for Node.js 中的路由）。
...or Jquery BBQ (for Jquery/hashchange-based/some nice features -- (github.com/cowboy/jquery-bbq)
...或 Jquery BBQ（对于基于 Jquery/hashchange/一些不错的功能——（github.com/cowboy/jquery-bbq）
...and then, there's Director (hashchange/tons of features/works in Node.js and the browser/similar to Express routing/developed mostly by the folks at Nodejitsu).
...然后是 Director（散列/大量功能/在 Node.js 和浏览器中/类似于 Express 路由/主要由 Nodejitsu 的人开发）。
*Note: if you're focusing on SEO, then hashchange/ajax will introduce some problems...you may want to read through Google's webmaster guidelines -- http://code.google.com/web/ajaxcrawling/docs/getting-started.html
*注意：如果您专注于 SEO，那么 hashchange/ajax 会带来一些问题……您可能需要通读 Google 的网站管理员指南——http: //code.google.com/web/ajaxcrawling/docs/getting -started.html
**P.S. you can find all the abovementioned libraries on the MicroJS.com site, except for Jquery BBQ
**PS 你可以在 MicroJS.com 网站上找到所有上述库，除了 Jquery BBQ
回答by Thick
Using the example you gave above, and keeping things simple, you could do the following:
使用上面给出的示例，并保持简单，您可以执行以下操作：
function aboutHandler() {
//Do stuff--e.g. get via AJAX -> render template (optional) -> append HTML to an element
}
function newsHandler() {
//Do stuff
}
function productsHandler() {
//Do stuff
}
function locationHashChanged() {
(location.hash === "#/about/") && aboutHandler();
(location.hash === "#/news/") && newsHandler();
(location.hash === "#/products/") && productsHandler();
}
}
window.onhashchange = locationHashChanged;
回答by Warlock
It looks like you are developing a single page application. So, I would recommend you to use Backbone.js. Here is a code snippet for your task.
看起来您正在开发单页应用程序。所以，我建议你使用Backbone.js。这是您的任务的代码片段。
<script>
var Controller = Backbone.Router.extend({
routes: {
"/about/": "about",
"/news/": "news",
"/products/": "products"
},
about: function(){
// ...
},
news: function(){
// ...
},
products: functions(){
// ...
}
});
var controller = new Controller();
Backbone.history.start();
</script>
