Селекторы и таргетинг

Unpoly — это JavaScript-библиотека, которая упрощает создание динамичных веб-приложений с минимальными усилиями. Одной из ключевых особенностей является система таргетинга, позволяющая управлять обновлением только тех частей страницы, которые действительно нуждаются в изменении. Система таргетинга в Unpoly тесно связана с использованием селекторов, которые позволяют точно указывать, какие элементы DOM должны быть обновлены или заменены.

Принципы работы селекторов

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

Unpoly использует те же CSS-селекторы, что и стандартный JavaScript, что делает их удобными для работы. Это позволяет разработчику использовать гибкие и мощные средства для выбора элементов на странице и определять, как именно эти элементы будут обновляться.

Обновление содержимого с помощью таргетинга

Основная задача системы таргетинга — это замена содержимого определённых элементов на странице. Unpoly позволяет точно указать, какой именно участок DOM должен быть заменён, что помогает избежать лишних перерисовок и ускоряет работу приложения.

Пример:

up.poly('#container', {target: '#content'});

Здесь метод up.poly будет работать с элементом с id #container, но обновление коснётся только элемента с id #content.

Таргетинг с помощью CSS-селекторов

Чтобы использовать таргетинг в Unpoly, необходимо указать селектор, который определяет, какой элемент на странице будет обновляться. Селекторы могут быть как простыми, так и более сложными, включая классы, атрибуты и псевдоклассы. Unpoly автоматически обрабатывает эти селекторы, чтобы точно идентифицировать нужные элементы.

Простой пример:

up.on('click', '.load-more', function() {
  up.replace('#posts', '/posts?page=2');
});

В этом примере при клике на элемент с классом .load-more происходит замена содержимого элемента с id #posts. Это пример использования простого CSS-селектора для таргетинга.

Таргетинг на основе контекста

Unpoly поддерживает более сложные стратегии таргетинга, включая использование контекстных селекторов. Это полезно, когда необходимо выбрать элементы в пределах конкретного контейнера или определённого состояния страницы.

up.on('click', '.show-modal', function() {
  up.replace('.modal-container', '/modal-content');
});

В этом примере будет обновлён только элемент .modal-container, внутри которого происходит обновление содержимого.

Динамические селекторы

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

Пример:

up.on('click', '.load-more', function() {
  const page = getCurrentPage(); // Функция, которая возвращает текущую страницу
  up.replace(`#page-${page}`, `/page/${page}`);
});

Здесь селектор будет динамически изменяться в зависимости от того, какая страница активна.

Фильтрация элементов

С помощью таргетинга можно не только заменять, но и фильтровать содержимое. Например, можно использовать комбинированные селекторы для обновления только тех элементов, которые соответствуют определённым условиям.

up.on('click', '.filter', function() {
  up.replace('.post', '/filtered-posts', {target: '.active'});
});

В этом примере обновление будет происходить только в пределах элементов с классом .active.

Работа с формами и таргетинг

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

up.on('submit', '#login-form', function() {
  up.replace('#user-info', '/user-info');
});

Когда форма с id #login-form отправляется, содержимое элемента #user-info будет обновлено результатом, полученным после отправки формы.

Таргетинг через атрибуты

В Unpoly можно использовать атрибуты для таргетинга, что даёт дополнительную гибкость в процессе выбора элементов. Например, можно использовать атрибуты данных для определения, какие части страницы следует обновить.

up.on('click', '[data-action="load-more"]', function() {
  up.replace('[data-target="posts"]', '/more-posts');
});

В этом примере элементы с атрибутом data-action="load-more" будут использоваться для триггера, а обновление произойдёт в элементах, имеющих атрибут data-target="posts".

Роли и условия таргетинга

Для более сложных сценариев можно применять различные условия, которые влияют на выбор элементов. Например, можно обновлять элементы только при определённых состояниях страницы или когда выполняются другие условия.

up.on('click', '.delete', function() {
  if (confirm('Удалить этот элемент?')) {
    up.replace('#item-list', '/items');
  }
});

Здесь обновление произойдёт только в том случае, если пользователь подтвердит удаление.

Заключение

Система таргетинга и селекторов в Unpoly предоставляет разработчикам мощные инструменты для работы с динамическими веб-страницами. Использование CSS-селекторов, атрибутов и контекстных условий позволяет точно определять, какие элементы на странице должны быть обновлены, обеспечивая быстрый и эффективный отклик на действия пользователя.

Оглавление