Не могу понять History.js, нужно ли это упростить?

Я новичок в программировании, и я делаю сайт AJAX с помощью jQuery.

Я просмотрел справедливый бит для обработчика истории AJAX и понял, что History.js кажется лучшим/самым современным.

Мои кнопки меню имеют свой уникальный идентификатор (#homeBtn, #featuresBtn, #pricingBtn) и в настоящее время выглядят следующим образом:

<a href="#home" class="homeMainMenuButton" id="homeBtn"><div class="homeMainMenuButtonText">Home</div></a>

Может кто-нибудь дать мне пример (желательно на jsfiddle) о том, как я бы использовал History.js?

Кажется, я не понимаю какой-либо из примеров, приведенных автором, и мне просто нужна глухая версия = b

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать и спасибо!

Ответ 1

Следуйте инструкциям здесь: https://github.com/browserstate/ajaxify

Измените ссылки на традиционные ссылки href="#home" на href="/home" - убедитесь, что http://mywebsite.com/home работает. Это все о грациозной градации.

Ответ 2

Я думаю, что вам нужна "заглушенная" версия, это абстракция роутера. Я написал простой для своих целей, называемый StateRouter.js. В основном он заботится о том, чтобы направлять URL-адреса, поддерживаемые вашим приложением, в правильные функции, вы даже можете определить части параметров маршрутов (так, чтобы, например, часть "id" http://example.com/persons/id становится параметром функции).

Этот простой пример кода должен продемонстрировать, как он используется:

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();
// Navigate to the page of person 1
router.navigate('/persons/1');

Здесь немного fiddle Я придумал, чтобы продемонстрировать его использование.