Albireo Doc и другие новости
ДневникРасскажу об изменениях в проекте Albireo. (Вы также можете подписаться на мой телеграмм-канал, чтобы получать новости оперативно.) За последнее время, в Albireo было два важных изменения. Первое — доработка админ-панели. Я добавил кнопки для вставки кода в текстовый редактор (сделал на Alpine.js), а также ряд мелких правок, чтобы сделать панель более удобной.
Другое крупное изменение — работа кэша. Раньше он работал только по времени модификации файлов, но не учитывал изменения в структуре каталогов. Это могло приводить к тому, что кэш оказывался невалидным, если загрузить старые файлы или добавить/удалить каталоги. Это частая ситуация. Теперь кэш работает чуть по другому. Он создаёт «снимок» (snapshot) всего каталога, включая каждый файл и его дату модификации и получает числовой полином CRC32. Он сохраняется в отдельном файле. При повтором использовании, кэш сравнивает новое значение со старым и если были изменения, кэш считается невалидным.
Это позволяет отслеживать самые разные ситуации и изменения в каталоге данных. Я об этом рассказывал в телеграмм-канале и даже приводил цифры по нагрузочному тестированию.
Сегодня я выложил ещё одно дополнение, которое условно называется Albireo Doc — это готовое решение для тех разработчиков, которым нужен простой и удобный механизм для создания документации к своим проектам.
Организация циклов в Alpine.js
Alpine.jsЦиклы используются там, где нужно повторить какой-то html-вывод по единому шаблону. Я уже показывал пример использования при выводе данных, полученных по Ajax.
То есть первый вид цикла — это обход готового массива данных. Второй вариант — это цикл с заданным количеством итераций.
В Alpine.js для организации циклов используется директива x-for
. Как и x-if
она может применяться только к тэгу TEMPLATE и иметь один корневой элемент.
Условные блоки в Alpine.js
Alpine.jsЧтобы показать или скрыть блок используется директива x-show
, однако существует ещё одна альтернатива — x-if
. Работают они одинаково, с той разницей, что x-show
можно применить к любому html-тэгу, а x-if
работает только с тэгом TEMPLATE.
Этот тэг имеет особое значение в HTML 5 — по умолчанию он скрыт и применяется для «отложенного создания клиентского контента». Его содержимое является шаблоном/фрагментом, который инициализируется (отображается) через JavaScript. Тэг TEMPLATE является «базовым» при использовании веб-компонентов. В Alpine.js он играет туже самую роль, хотя и с небольшим ограничением — в него должен быть вложен тэг-контейнер (об этом ниже).
Таким образом вопрос использования x-if
лежит скорее в плоскости предпочтений вебмастера.
Упрощение html-кода в Alpine.js
Alpine.jsИспользование Alpine делает html-код несколько сложнее, поскольку на уровень HTML по сути выносится логика JavaScript. Да, директивы несложные, но, если стоит задача повторить элемент несколько раз, то хочется всё-таки какого-то упрощения.
Для этого в Alpine.js используется директива x-spread
, которая ссылается на функцию-обработчик текущего компонента. Общая схема получается такой: в x-data
прописываем функцию инициализации, которая и содержит объект со всеми функциями компонента.
В таком варианте можно говорить о компонентом подходе в Alpine, где функции могут использоваться многократно. Рассмотрим пару примеров.
Модальные окна в Alpine.js
Alpine.jsОбычно для организации модального окна (js) используют сторонние jQuery-плагины. В общем-то это не удивительно, поскольку для этого требуется не только особая html-разметка, но и отслеживание различных событий.
На нативном JavaScript модальное окно реализуется ещё сложнее, поскольку нужно отслеживать события для открытия, закрытия окна, а также клик вне самого окна. Конечно, всё это делается в виде отдельной функции. Например так я сделал свой вариант в Berry CSS.
Кроме этого, модальное окно как правило требует css-классов, поскольку нужно особое позиционирование. Всё это приводит к тому, что в 99% случаев модальные окна создаются через дополнительные зависимости. В этом разрезе интересно будет посмотреть как Alpine.js сможет справиться с этой задачкой.