ハッシュキーナビゲーションを実装する方法は？

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プッシュステートを使用するオプションもあります。

いくつかの優れたJSルーティングライブラリについては、http://www.microjs.com/#spaをチェックしてください。そのうちのいくつかは、HTML5プッシュステートのサポートと、古いブラウザのハッシュ変更に対するフォールバックを提供しています。

深刻なアプリケーションを作成する場合は、モデル、ビュー、ルーティングなどを処理するためにBackbone.jsのようなものを使用できます。また、Crossroads.js（ルーティングライブラリ）とそれに付随するHasher.jsもチェックしてください（ハッシュチェンジ/プッシュステートライブラリ）バックボーンに付属するすべてのエキストラを必要としない場合。

... LeviRoutes（HTML5 pushstateのみ、Node.jsのExpressでのルーティングと非常によく似ています）があります。

...またはjQueryのBBQ（jqueryの/なhashchangeベース用/気の利いた機能 - （github.com/cowboy/jquery-bbq）

...そして、ディレクター（なhashchange /トンがありますNode.jsのブラウザの機能/ Express Routingと似ています/ Nodejitsuの人々が主に開発しました）

注：SEOに重点を置いている場合は、hashchange/ajaxにいくつかの問題があります。 ..あなたはGoogleのウェブマスター向けガイドラインを読んでみたいです - 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; 

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?