如何实现哈希键导航

How to implement a hash-key navigation?

本文关键字：哈希键 导航 实现 何实现      更新时间：2023-09-26

我想实现一个基于Ajax的哈希键导航，如下所示：

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

如何实现此结构？

使用基于哈希的导航结构，您将通过浏览器中的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来处理模型、视图、路由等。如果你不需要Backbone附带的所有额外功能，你还应该看看Crossroads.js（路由库）及其附带的Hasher.js（hashchange/pushstate库）。

或者还有LeviRoutes（仅HTML5 pushstate，非常像Node.js的Express中的路由）

或者Jquery BBQ（用于Jquery/基于hashchange/一些不错的功能——（github.com/bown/Jquery BBQ）

然后是Director（hashchange/大量功能/在Node.js和浏览器中工作/类似于Express路由/主要由Nodejitsu的人员开发）。

*注意：如果你专注于SEO，那么hashchange/ajax将引入一些问题。。。你可能想阅读一下谷歌的网站管理员指南——http://code.google.com/web/ajaxcrawling/docs/getting-started.html

**另外，除了Jquery BBQ

，您可以在MicroJS.com网站上找到所有上述库

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

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。以下是您任务的代码片段。

<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>

骨干。什么是路由器？

相关文章：