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

Question

Я пытаюсь создать 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 или какую-то другую библиотеку. Но как работает роутер без включения его в каждый шаблон?

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

Answer 1

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

Источник (строка запроса): /questions/46342761/kak-ya-mogu-poluchit-znacheniya-stroki-zaprosa-v-javascript/46342854#46342854

Подводя итог: 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... })