Мой последний проект включал создание одностраничного приложения. В этом посте я поделюсь своей стратегией, а также некоторыми советами.

Codr не начинался как одностраничное приложение. Каждая страница на самом деле, как и на любом другом обычном веб-сайте, была просто еще одной страницей. Но после тестов скорости и оптимизации для автономного использования мне пришлось скорректировать свою стратегию. Мне пришлось преобразовать отдельные страницы в одностраничное приложение; чтобы сделать его намного быстрее, удобнее для пользователя и потреблять меньше пропускной способности и памяти.

В одностраничных приложениях каждая навигация не требует полного обновления/перезагрузки веб-сайта; вместо этого необходимо загрузить и показать пользователю только небольшую часть страницы. Существует множество существующих пакетов, которые могут сделать это за вас (маршрутизация jquery, Vue, Reach и т. д.). Но я предпочитаю, чтобы он был простым и легким. Вот как я это сделал, используя ванильный JavaScript и jQuery.

spa.js

$(window).on('hashchange', function(e) {
    codrRouter();
});
function codrRouter() {
  try {
      codrRouter_impl()
  } catch (err) {
      console.error(err)
      $.get('./views/500.html', function(pageContent) {
          $('.content').html(pageContent);
      }).fail(failedGet)
  }
}

Мы определяем маршрутизатор страниц (codrRouter), который будет основой для навигации внутри SPA. Обратите внимание, что мы используем событие «hashchange» для запуска навигации. Это означает, что все наши страницы идентифицируются идентификатором #hashtag в URL-адресе.

function codrRouter_impl() {
  var page = window.location.hash;
  if (page === '#' || page === '') {
    $.get('./views/home.html', function(pageContent) {
      $('.content').html(pageContent);
    }).fail(failedGet)
  } else if (page === '#challenges') {
    $.get('./views/challenges_levels.html', function(pageContent) {
      $('.content').html(pageContent);
    }).fail(failedGet)
  } else {
    $.get('./views/404.html', function(pageContent) {
      $('.content').html(pageContent);
    }).fail(failedGet)
  }
}
function failedGet() {
  const refresh = '<a class="refreshpage" href=".">refresh page</a>'
  $('.content').html('Oops, make sure you are online.<br>' + refresh);
}

Теперь реализуем маршрутизатор и возможные маршруты. Как вы можете видеть, каждый соответствующий маршрут делает запрос GET для получения некоторого html-контента. Этот контент является лишь частичным, и он заменит существующий код для нашего элемента «.content», который является просто заполнителем. Последний шаг — убедиться, что все ссылки a-href являются хэштегами/якорями.

Вы также можете программно перемещать пользователей на разные страницы, просто вызывая событие hashchange:

window.dispatchEvent(new HashChangeEvent("hashchange"));

Это так просто, и вам не нужно использовать какую-либо стороннюю библиотеку. :)