Мой последний проект включал создание одностраничного приложения. В этом посте я поделюсь своей стратегией, а также некоторыми советами.
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"));
Это так просто, и вам не нужно использовать какую-либо стороннюю библиотеку. :)