如何实现哈希键导航？

Question

我想实现一个基于ajax的哈希键导航,如下所示:

http://www.foo.bar/#/about/
http://www.foo.bar/#/news/
http://www.foo.bar/#/products/

有什么建议吗？

提前致谢!

Answer 1

使用基于哈希的导航结构,您将在浏览器中通过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 pushstate,非常类似于Express for Node.js中的路由).

...或Jquery BBQ(基于Jquery/hashchange的/一些不错的功能 - (github.com/cowboy/jquery-bbq)

...然后,有Director(hashchange /大量功能/在Node.js和浏览器/类似于Express路由/主要由Nodejitsu的人开发).

*注意:如果你专注于搜索引擎优化,那么hashchange/ajax会引入一些问题......你可能想要阅读谷歌的网站管理员指南 - http://code.google.com/web/ajaxcrawling/docs/getting -started.html

**PS您可以在MicroJS.com网站上找到所有上述库,但Jquery BBQ除外

Answer 2

使用上面给出的示例，并保持简单，您可以执行以下操作：

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;