我想像这样实现一个基于 Ajax 的哈希键导航：
http://www.foo.bar/#/about/
http://www.foo.bar/#/news/
http://www.foo.bar/#/products/
如何实现这个结构？
【问题讨论】：
标签： javascript navigation
使用基于散列的导航结构，您将通过浏览器中的 JS 定义路由及其处理程序...当散列更改时，会触发 'hashchange' 事件，并且会触发 'window.onhashchange'处理函数被调用。*
例如
if ("onhashchange" in window) {
alert("The browser supports the hashchange event!");
}
function locationHashChanged() {
if (location.hash === "#somecoolfeature") {
somecoolfeature();
}
}
window.onhashchange = locationHashChanged;
也可以选择使用最近引入的 HTML5 pushstate。
查看http://www.microjs.com/#spa 了解一些优秀的 JS 路由库——其中一些提供对 HTML5 pushstate 的支持以及对旧浏览器的 hashchange 的回退。
如果您正在寻找构建一个严肃的应用程序，您可以使用 Backbone.js 之类的东西来处理模型、视图、路由等。您还应该查看 Crossroads.js（路由库）及其随附的 Hasher.js（ hashchange/pushstate 库），如果您不需要 Backbone 附带的所有附加功能。
...或者还有 LeviRoutes（仅限 HTML5 推送状态，非常类似于 Express for Node.js 中的路由）。
...或 Jquery BBQ（用于基于 Jquery/hashchange/一些不错的功能 -- (github.com/cowboy/jquery-bbq)
...然后是 Director（散列变化/大量功能/在 Node.js 和浏览器中工作/类似于 Express 路由/主要由 Nodejitsu 的人开发）。
*注意：如果你专注于 SEO，那么 hashchange/ajax 会带来一些问题...你可能需要阅读 Google 的网站管理员指南 -- http://code.google.com/web/ajaxcrawling/docs/getting-started.html
**附言你可以在 MicroJS.com 网站上找到所有上述库，除了 Jquery BBQ
【讨论】：
使用您上面给出的示例，并保持简单，您可以执行以下操作：
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;
【讨论】：
看起来您正在开发一个单页应用程序。所以，我建议你使用Backbone.js。这是您的任务的代码 sn-p。
<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>
【讨论】：