Рубрики
Без рубрики

Подход к конструкции фильтра и его общей логики

В этой статье вы найдете глобальный вид на структуру и логику фильтра: отражение в структуре данных в этой разработке и основных операциях фильтра с бесконечной прокрутки.

Автор оригинала: Nico Diz.

Несколько месяц назад я работал на фильтрах для мероприятия Hotsale Company Company Company. Перед началом кодирования важно установить общую логику и структуру этого развития. В этой статье вы найдете пример о том, как поднять эту проблему.

Идея состоит в том, что вы можете продолжить следующий шаг (переведите это в код) с помощью выбора инструментов. Несмотря на то, что в будущей статье, возможно, я покажу вам, как превратить эту логику в код с REVECTJS, в качестве ссылки.

Без дальнейших введений, давайте начнем:

Требования

Пользователь может:

  • Нанесите фильтры на определенной коллекции продуктов (Hotsale).
  • Бесконечная прокрутка на загрузку продуктов.
  • Накапливать фильтры в поисках.
  • поддерживать фильтры при перезагрузке страницы.
  • Передайте URL-адрес другому человеку, и этот человек будет видеть же фильтры.

Проблемы

Основная проблема здесь была первым требованием, поскольку ERP в компании использует собственные фильтры, но они не могут быть применены к определенной коллекции. Итак, это связанное состроить фильтры с нуля.

Решение было для клиента загружать ID коллекции в заполнителе и Передний конец Принимает эту датую, чтобы добавить его в качестве параметра в поисках продукта. Это позволит использовать возможность использования фильтров с другими коллекциями (при изменении идентификатора) или нет (оставляя заполнителю пустой).

Другой центральный вопрос состоял в том, чтобы рассмотреть, что в виде видимого URL пользователю могут прийти к параметрам внешним для этого разработки (например, инструменты аналитики или индикаторы закупки) или параметры с неправильными идентификаторами или неправильными или противоречаными значениями (опечатки).

Следовательно, последние три требования включают особое внимание при чтении URL.

Структура данных

Прежде всего, мы должны решить, как сохранить данные наших фильтров. Предположим, у нас есть переменная под названием BodyFilters Отказ Это может быть массив объектов, где каждый представляет конкретный критерий фильтра, который, в свою очередь, содержит несколько вариантов. Например, критерий фильтра может быть маркой:

var bodyFilters = [
    {
        criterionId: 'brands',
        criterionName: 'BRANDS:',
        criterionOptions: [
            {
                id: 'brands-samsung',
                name: 'Samsung',
                param: 'fq=B:126'
            }, {...}, {...}, {...}
        ]        
    }, {...}, {...}, {...}
];

Важно, чтобы BodyFilters это массив, чтобы вы могли зацикливаться через него и подать заявку на каждый критерий логики, которая строит свой вид. О том же рассмотрении для Критерииоптионы Отказ Обратите внимание, что каждый вариант является объектом, который имеет ID идентифицировать это, а Имя Это появится на мнении и Param Это необходимо будет построить URL-адрес и сделать запрос.

Нам также понадобится переменная ActiveFilters , чья структура будет такой же, как BodyFilters потому что: 1) мы будем использовать его данные для обновления ActiveFilters и 2) Мы пересекаем оба массива данных, чтобы определить, какие параметры выбраны (возможно, в представлении они имеют другой цвет или вес шрифта).

Поведение (часть 1)

Во-вторых, мы определяем потомок разработки, когда страница загружает:

  1. получать BodyFilters

Конечно, когда страница загружает, первое, что мы хотим сделать, это получить BodyFilters Отказ В лучшем случае мы можем использовать статические данные, но очень вероятно, что мы должны сделать один или несколько запросов (например, в моем случае, чтобы получить значения брендов, спецификаций и идентификаторов каждого из них , с которым строятся параметры поиска) и анализируют свои данные.

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

  1. получать ActiveFilters

Теперь мы читаем URL и, пересекая данные BodyFilters Мы определяем, если есть действительные параметры. С этим результатом мы карта BodyFilters и получить ActiveFilters (Не забудьте рассмотреть, если есть «ActiveFilters по умолчанию»).

  1. Создание или обновление URL

Как только мы получили ActiveFilters Мы можем использовать параметры из каждого выбранного параметра и:

  • Создайте URL, чтобы сделать запрос.
  • Обновите веб-страницу URL Web Page We history.replacestate () Отказ

Я предлагаю сделать эти URL-адреса как можно более похожими. Затем, как только URL будет делать запрос:

  1. FetchProducts.

И тогда мы используем ответ (возможно, нужно разбирать его), чтобы показать продукты или ошибку, если существует.

Поведение (часть 2)

В-третьих, мы рассмотрим взаимодействия:

  1. HandleFilterClick (CurrentCriite, выделениеop)

Когда пользователь нажимает для выбора или удаления опции фильтра, мы называем эту функцию, которая обновляет ActiveFilters Отказ Обратите внимание, что нам нужно пройти CurrentCriterion и Выбратьoption в качестве параметров, чтобы узнать, какой вариант обновить. И после ActiveFilters обновляется, повторите шаги 3 и 4.

  1. Бесконечная прокрутка

Типичная ситуация в том, что в URL-адресе FetchProducts Запрос, есть поле, которое указывает номер страницы. Например, PageNumber Отказ Для Бесконечная прокрутка Нам понадобится еще несколько инструментов:

  • Переменная, которая указывает на PageNumber , чье значение по умолчанию равно 1.
  • Функция, которая проверяет, должны ли мы получить продукты следующей страницы. Назовите это CheckNextPage Отказ Например, в моих фильтрах в нижней части списка есть кнопка. Я проверяю, находится ли эта кнопка в просмотре просмотра. Если это верно, добавьте +1 до PageNumber Отказ
  • Прослушайте событие прокрутки с помощью Debouten и пропустите вышеуказанную функцию.
  • Если PageNumber Обновления, затем обновите URL-адреса и повторите шаги 3 и 4.
  • Не забудьте сбросить PageNumber до 1, когда HandleFilterClick это шаг5.

Наконец, что происходит, когда больше нет продуктов? Как избежать CheckNextPage Функция добавляет +1 до PageNumber снова и снова?

  • Нам нужно создать логическое значение IsnextPage Отказ Это правда По умолчанию и каждый раз, когда мы сбрасываем поиск ( HandleFilterClick ). Но, если FetchProducts Возвращает успех и пустые продукты, мы устанавливаем IsnextPage к ложь Отказ
  • Помните, конечно, использовать этот булевой внутри CheckNextPage Отказ Идея это что-то подобное: Если (isnextpage && isbottomoflist) setnextPagePlusone ()
  • Далее, как я уже говорил ранее, если PageNumber Обновления, затем обновите URL-адреса и повторите шаги 3 и 4.

Заключение

С таким подходом мы впервые определяем структуру данных для BodyFilters и ActiveFilters Это состоит из массива объектов, каждый из которых представляет критерий и содержащий массив опций.

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

Это не квантовая физика. Тем не менее, важно занимать момент и рассмотреть глобальный взгляд на структуру и логику фильтра перед запуском. Это упростит ваш код и помешает вам вводить лабиринты или мертвые цели.

Будь свободен, чтобы использовать этот подход, улучшить его и построить что-то отличное с ним!

Читайте ещё по теме: