Расскажу об изменениях в проекте Albireo. (Вы также можете подписаться на мой телеграмм-канал, чтобы получать новости оперативно.) За последнее время, в Albireo было два важных изменения. Первое — доработка админ-панели. Я добавил кнопки для вставки кода в текстовый редактор (сделал на Alpine.js), а также ряд мелких правок, чтобы сделать панель более удобной.

Другое крупное изменение — работа кэша. Раньше он работал только по времени модификации файлов, но не учитывал изменения в структуре каталогов. Это могло приводить к тому, что кэш оказывался невалидным, если загрузить старые файлы или добавить/удалить каталоги. Это частая ситуация. Теперь кэш работает чуть по другому. Он создаёт «снимок» (snapshot) всего каталога, включая каждый файл и его дату модификации и получает числовой полином CRC32. Он сохраняется в отдельном файле. При повтором использовании, кэш сравнивает новое значение со старым и если были изменения, кэш считается невалидным.

Это позволяет отслеживать самые разные ситуации и изменения в каталоге данных. Я об этом рассказывал в телеграмм-канале и даже приводил цифры по нагрузочному тестированию.

Сегодня я выложил ещё одно дополнение, которое условно называется Albireo Doc — это готовое решение для тех разработчиков, которым нужен простой и удобный механизм для создания документации к своим проектам.

Циклы используются там, где нужно повторить какой-то html-вывод по единому шаблону. Я уже показывал пример использования при выводе данных, полученных по Ajax.

То есть первый вид цикла — это обход готового массива данных. Второй вариант — это цикл с заданным количеством итераций.

В Alpine.js для организации циклов используется директива x-for. Как и x-ifона может применяться только к тэгу TEMPLATE и иметь один корневой элемент.

Чтобы показать или скрыть блок используется директива x-show, однако существует ещё одна альтернатива — x-if. Работают они одинаково, с той разницей, что x-showможно применить к любому html-тэгу, а x-ifработает только с тэгом TEMPLATE.

Этот тэг имеет особое значение в HTML 5 — по умолчанию он скрыт и применяется для «отложенного создания клиентского контента». Его содержимое является шаблоном/фрагментом, который инициализируется (отображается) через JavaScript. Тэг TEMPLATE является «базовым» при использовании веб-компонентов. В Alpine.js он играет туже самую роль, хотя и с небольшим ограничением — в него должен быть вложен тэг-контейнер (об этом ниже).

Таким образом вопрос использования x-ifлежит скорее в плоскости предпочтений вебмастера.

Использование Alpine делает html-код несколько сложнее, поскольку на уровень HTML по сути выносится логика JavaScript. Да, директивы несложные, но, если стоит задача повторить элемент несколько раз, то хочется всё-таки какого-то упрощения.

Для этого в Alpine.js используется директива x-spread, которая ссылается на функцию-обработчик текущего компонента. Общая схема получается такой: в x-dataпрописываем функцию инициализации, которая и содержит объект со всеми функциями компонента.

В таком варианте можно говорить о компонентом подходе в Alpine, где функции могут использоваться многократно. Рассмотрим пару примеров.

Обычно для организации модального окна (js) используют сторонние jQuery-плагины. В общем-то это не удивительно, поскольку для этого требуется не только особая html-разметка, но и отслеживание различных событий.

На нативном JavaScript модальное окно реализуется ещё сложнее, поскольку нужно отслеживать события для открытия, закрытия окна, а также клик вне самого окна. Конечно, всё это делается в виде отдельной функции. Например так я сделал свой вариант в Berry CSS.

Кроме этого, модальное окно как правило требует css-классов, поскольку нужно особое позиционирование. Всё это приводит к тому, что в 99% случаев модальные окна создаются через дополнительные зависимости. В этом разрезе интересно будет посмотреть как Alpine.js сможет справиться с этой задачкой.