Как реализовать хэш-ключ?

Ответ 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;

Есть возможность использовать недавно введенную pushstate HTML5 тоже.

Отъезд http://www.microjs.com/#spa для некоторых хороших библиотек маршрутизации JS - некоторые из них обеспечивают поддержку pushstate HTML5, а также резервные копии для хэш-обмена для старых браузеров.

Если вы хотите создать серьезное приложение, вы можете использовать что-то вроде Backbone.js для обработки моделей, просмотров, маршрутизации и т.д. Вы также должны проверить Crossroads.js(библиотеку маршрутизации) и сопровождающие ее Hasher.js( hashchange/pushstate), если вам не нужны все дополнительные функции, которые поставляются с Backbone.

... или там LeviRoutes (только для HTML5 pushstate, очень похоже на маршрутизацию в Express для Node.js).

... или JQuery BBQ (для Jquery/hashchange-based/некоторые интересные функции - (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

** P.S. вы можете найти все вышеупомянутые библиотеки на сайте MicroJS.com, за исключением JQuery BBQ

Ответ 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;

Ответ 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>

Магистраль. Что такое маршрутизатор?