Макросы

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

Что такое макросы?

Макросы в Unpoly — это короткие команды, которые позволяют манипулировать DOM или делать запросы к серверу. Когда пользователь взаимодействует с элементом интерфейса, макрос активируется и выполняет нужное действие. Макросы поддерживаются через атрибуты элементов, такие как data-up, а также могут быть использованы в JavaScript-коде.

Макросы могут использоваться для:

  • Динамической загрузки контента — загружать HTML-страницы и обновлять их части без перезагрузки всей страницы.
  • Навигации — изменять адрес в браузере и историю, не требуя полной перезагрузки страницы.
  • Манипуляции с DOM — добавление, удаление или изменение элементов на странице.

Синтаксис макросов

Макросы в Unpoly обычно применяются через атрибут data-up или через JavaScript API. Например, атрибут data-up используется для привязки макроса к HTML-элементу. Макросы обычно записываются как строки, которые могут включать переменные и специальные операторы.

Пример базового синтаксиса:

<button data-up="load: '/example-page'">Загрузить страницу</button>

В данном случае, при клике на кнопку будет выполнен макрос load, который загрузит страницу с URL /example-page и обновит соответствующую часть страницы.

Основные макросы

load

Макрос load используется для загрузки содержимого с сервера и вставки его в DOM. Это основной макрос для работы с асинхронными запросами в Unpoly.

Пример:

<button data-up="load: '/content'">Загрузить контент</button>

Этот макрос выполняет GET-запрос по указанному URL и вставляет полученный HTML в элемент, к которому привязан макрос. Если необходимо обновить только определенную часть страницы, можно использовать селектор CSS:

<button data-up="load: '/content' target: '#main-content'">Загрузить в основной блок</button>

replace

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

Пример:

<button data-up="replace: '#sidebar' url: '/new-sidebar'">Заменить боковую панель</button>

Этот макрос заменит содержимое элемента с id sidebar на результат запроса к /new-sidebar.

show и hide

Макросы show и hide позволяют управлять видимостью элементов на странице. Они могут быть полезны для реализации различных интерактивных интерфейсов, например, для отображения всплывающих окон или скрытия неактивных секций.

Пример использования:

<button data-up="hide: '#notification'">Скрыть уведомление</button>
<button data-up="show: '#notification'">Показать уведомление</button>

Макрос navigate используется для изменения URL страницы без её полной перезагрузки. Это позволяет имитировать работу с традиционными ссылками, при этом сохраняя состояние страницы и улучшая производительность.

Пример:

<a data-up="navigate: '/new-page'">Перейти на новую страницу</a>

Этот макрос изменит URL браузера на /new-page, а контент будет загружен асинхронно, без полной перезагрузки страницы.

replaceState

Макрос replaceState позволяет изменять историю браузера, но без перезагрузки страницы. Это полезно для случаев, когда нужно обновить адрес в строке браузера, но без загрузки нового контента.

Пример:

<button data-up="replaceState: '/new-url'">Изменить URL без перезагрузки</button>

Условия и аргументы макросов

Макросы в Unpoly могут принимать различные аргументы и условия. Это позволяет гибко управлять поведением макросов в зависимости от ситуации.

Условия

Макросы могут быть выполнены только при определенных условиях. Например, можно использовать атрибут data-up-condition, чтобы выполнить макрос только в случае, если заданное условие истинно.

Пример:

<button data-up="load: '/data'" data-up-condition="!window.hasData">Загрузить данные, если они еще не загружены</button>

В этом примере макрос будет выполнен только в том случае, если переменная window.hasData ложна.

Передача параметров

При использовании макросов можно передавать параметры в виде переменных, которые затем используются внутри макроса. Это позволяет делать макросы более динамичными и адаптированными к различным ситуациям.

Пример:

<button data-up="load: '/user/{userId}'">Загрузить профиль пользователя</button>

В данном случае параметр userId будет динамически подставляться в URL.

Макросы и JavaScript

Помимо использования макросов в атрибутах HTML-элементов, Unpoly также позволяет работать с ними через JavaScript. Для этого используется метод up.reload(), который позволяет вручную инициировать выполнение макроса.

Пример:

up.reload('#content', {url: '/new-content'});

Этот вызов аналогичен макросу load и загрузит новый контент в элемент с id content.

Преимущества использования макросов

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

Макросы в Unpoly открывают широкие возможности для создания быстрых и отзывчивых интерфейсов. Они обеспечивают мощную абстракцию над стандартными операциями с сервером и DOM, значительно сокращая время разработки и улучшая производительность.

Оглавление