Добро пожаловать в заключительную часть серии из трех частей. В этой части мы рассмотрим некоторые расширенные концепции и особенности jQuery router. Мы узнаем, как создать функцию поиска с включенной историей маршрутизации (аналогично поиску в Google).

Чтобы быть кратким, я собираюсь пропустить реализацию на стороне сервера и сразу перейти к маршрутизатору jQuery.

Давайте добавим немного кода HTML и JavaScript, чтобы создать простую форму поиска:

Поле поиска:

<form action="/searchApi" method="POST">
  <input type="search" name="query" />
</form>
<section>Search results appear here</section>

JavaScript для запроса результатов поиска:

$('form').on('submit', function (e) {
    e.preventDefault();
    const url = $(this).attr('action');
    const method = $(this).attr('method');
    const data = $(this).serialize();
    $.ajax({
        url,
        method,
        data
    }).done(renderData);
});

Проблема с этим подходом в том, что мы пока ничего не сохраняем в истории. Давайте исправим это с помощью маршрутизатора jQuery.

Добавить обработчик маршрута:

import $ from 'jquery';
import { router, route } from 'jqueryrouter';
route('/', (...args) => {
    ...
});
router.init();

При отправке формы мы запускаем запрос маршрут, а наш обработчик маршрута отправляет запрос ajax.

Маршрут запроса - это маршрут с прикрепленной строкой запроса. Маршрутизатор JQuery может прослушивать изменения в строке запроса, даже если маршрут не изменен. Маршрут запроса может быть запущен следующим образом:

router.set({
    route: '/',
    queryString: `query=${query}`
});

Маршруты запросов выглядят следующим образом:

https://example.com/?query=…

Маршрутизация запросов - отличный способ реализовать одностраничные приложения. Многие приложения полагаются на маршрутизацию запросов для поддержания состояния приложения вместе с данными. Маршрутизатор JQuery предоставляет простой способ преобразовать строку запроса в объект JavaScript с помощью jquerydeparam.

route('/', (...args) => {
    const [,,qs] = args; // Extract query string as JS object
    const $form = $('form');
    const { query } = qs;
    $.ajax({
        url: $form.attr('action'),
        method: $form.attr('method'),
        data: {
            query
        }
    });
});
router.init();
$('form').on('submit', function (e) {
    e.preventDefault();
    router.set({
        route: '/',
        queryString: $(this).serialize()
    });
});

Примечание. Маршрутизатор JQuery версии 3 изменил синтаксис для извлечения строки запроса из маршрутов. Посетите официальную документацию, чтобы узнать больше.

Вы, наверное, задаетесь вопросом, почему строка запроса является третьим аргументом в параметрах маршрута. Маршрутизатор JQuery поддерживает три разных способа передачи данных:

  1. Объект данных
  2. Параметры маршрута
  3. Строка запроса

Первый аргумент - это объект данных. Вы можете передавать данные при вызове router.set.

router.set({
    route: '/',
    data: {
        prop: 'Hello World!'
    }
});
route((data) => {
    console.log(data.prop); // Prints Hello World!
});

Примечание. Маршрутизатор JQuery версии 2 не поддерживает состояние объекта данных. Эта проблема исправлена ​​в версии 3.

Второй аргумент - это параметры маршрута. Маршрутизатор JQuery предоставляет встроенную поддержку для извлечения параметров маршрута. Такие маршруты называются параметризованными маршрутами.

Параметризованные маршруты весьма полезны при реализации страниц ресурсов (например, страницы продукта для веб-сайта электронной коммерции).

router.set('/path/with/hello/world');
route('/path/with/:param1/:param2', (...args) => {
    const [, params] = args;
    console.log(params.param1, params.param2); // Prints "hello", "world"
});

Примечание. Начиная с версии 3, данные, параметры и объекты запроса доступны как часть одного аргумента.

Вы подошли к концу этого урока. Надеюсь, вам понравилось изучать маршрутизатор jQuery. К настоящему времени вы, должно быть, поняли, насколько просто реализовать маршрутизацию. Маршрутизатор JQuery делает это намного проще!

‹