Question

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

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

这里有什么建议吗？

提前感谢！

Answer 1

使用基于散列的导航结构，您将在浏览器中通过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;

也可以选择使用最近推出的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

** P.S。您可以在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;

Answer 3

看起来您正在开发单页应用程序。所以，我建议你使用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>

Backbone. What is a router?

如何实现哈希键导航？

3 个答案: