Понимание реализации Jquery SPA

Я пытаюсь создать веб-сайт SPA с JQuery. Я знаю, как использовать history.pushState и $(window).on('popstate'), но у меня есть несколько вопросов. В настоящее время у меня есть файл router.js, который обрабатывает событие popstate и навигационные ссылки. Я размещаю ссылки в пользовательском атрибуте (data-navId="templates/page/page.html") или в href и обрабатываю их с помощью $(e).preventDefault(); . Пользователь щелкает ссылку, и выполняются $('.page-content').load('url', function() {}) и history.pushstate.

1) Должен ли я включать файл router.js, содержащий эти функции, в каждый шаблон? Мне нужен один html, который содержит только эти функции. Шаблоны должны содержать только HTML и соответствующие скрипты. Мне удалось это сделать, но если пользователь обновляет страницу, шаблон отображается без стиля или чего-либо еще. Является ли использование хеша ответом? Или, если пользователь закроет браузер и активирует опцию «Восстановить предыдущие страницы», шаблон будет загружен только с его html.

В прошлом я разрабатывал страницы SPA без хэша, используя только popstate и history.pushState, но мне приходилось включать весь html в каждый файл, а затем вызывать $('.page-content').load(url + ' .page-content > *', function() {});, чтобы избежать ошибки обновления.

Я также знаю, что facebook использует popstate для современных браузеров и hashchange для более старых, возможно, путем включения Modernizr.js или какой-то пользовательской библиотеки. Но как работает роутер без включения его в каждый шаблон?

Заранее спасибо.


jquery single-page-application routing popstate hashchange
person EverCoder    schedule 14.10.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел это! Мне не хватало основного кода маршрутизатора, который должен получить текущий URL-адрес, получить параметры с помощью регулярного выражения (или любым другим способом) и динамически загрузить содержимое. Также я совершил ошибку, нажимая полный путь к запрошенному шаблону (страница для ввода) вместо того, чтобы обрабатывать его как строку запроса или через mod_rewrite(Apache).

Источник (строка запроса): https://stackoverflow.com/a/901144/6128301

Подводя итог: 1) Пользователь нажимает ссылку, выполняется следующий код:

$('url').on('click', function(e) {
   e.preventDefault();

   var url = $(this).attr('href');
   $('.injection-container').load(url + ' > * ', function() {

      history.pushState({'state': "index?p=" + url}, "Injected Page's Title", "index?p=" + url);

   });

});

e.preventDefault = Предотвращает перенаправление ссылки по умолчанию (тег href). инъекции-контейнер = страница, на которую вы хотите загрузить контент

url + ' > * ' = контент, который нужно получить. Звездочка обозначает все элементы. Вы также можете загрузить основной контент внедренной страницы, используя: url + ' > .injection-container > * '

Индекс — это главная страница, содержащая все CSS и JS. Вы также должны создать файл router.js, который проверяет строки запроса и решает, какая страница будет загружена динамически. Обратите внимание, что на нем нет расширения .html, потому что я настроил свой apache с помощью mod_rewrite, чтобы очистить расширения. Кроме того, вы можете заменить расширение, получив URL-адрес (window.location.href).

Последнее, что вам нужно, это этот код:

$(window).on('popsate', function() { // PageInjector function like before... })

person EverCoder    schedule 14.10.2017