Загрузчик плагинов

SIMAI Framework использует скрипт для загрузки дополнительных плагинов, которые требуются на текущей странице сайта.

Параметры загрузчика плагинов

Инициализация загручика плагинов

var sf5loader = new SFLoaderPlugin({
    attr: 'sf-asset', 
    frameworkPath: '/simai/asset/simai.main/sf5.master/plugin/',
	isLoadPluginCookie: false,
	findPlugins: {
		//Поиск по классам
		'progress': /^sf-progress$/,
		'hero': /^sf-hero$/,
		'table': /^table$/,
		'a': /^a$/,
	},
	requiredPlugins: ['wow'],
	contentPreloader: 'svg иконка',
	backgroundPreloader: '#FFFFF',
    modifierPreloader: 'loaderadius-1/2',
});

Как подключать плагины фреймворка через загрузчик

1. В необходимом месте страницы задать дата атрибут sf-asset
2. Установить значение атрибута равное пути местонахождения плагина относительно параметра frameworkPath
3. При загрузке страницы скрипт найдет дата атрибут и подключит нужный плагин

Подключение плагинов через поиск классов по регулярному выражению

Загрузчик SIMAI Framework позволяет автоматизировать поиск плагинов на странице сайта. Для этого необходимо в инициализации загрузчика добавить параметр findPlugins. Данный параметр содержит в себе объект с регулярным выражением в качестве значения свойства объекта и ключ как ссылку до плагина.

Документация к коду

Код разделен на две части: фронтенд и бэкенд. Его целью является поиск и кэширование использованных JS и CSS библиотек в сжатом виде.

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

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

Общий алгоритм работы:

style.php проверяет наличие кеша и подключает его если он имеется. Если его нет, то устанавливает флаг need_preload в значение true (что вызывает отображение анимации загрузки).

Фронтенд собирает информацию о необходимых пакетах и отправляет ее в loader.php в фоновом режиме, и вызывает показ анимации, если need_preload = true. Если бекенд прислал ссылки на пакеты - подключает их к странице. Если бекенд ответил "ok" - завершает работу.

loader.php проверяет, все ли пакеты, которые передал фронтенд, имеются в кеше. Если кеш содержит все, что необходимо - отвечает "ok". Если нет, то собирает недостающие пакеты, минимизирует и сохраняет файл. Затем присоединяет недостающие пакеты в общий кеш и отдает во фронтенд ссылки на пакеты с недостающими пакетами.

Бэкенд часть 1 (style.php)

Бэкенд часть кода в файле style.php отвечает за подключение сжатых JS и CSS файлов к странице, а также обновление конфигурационного файла.

Сначала код загружает конфигурационный файл из .config.php, который хранится в папке /simai/loader. Затем создаются пути к сжатым JS и CSS файлам, имена которых формируются из обновленных меток времени хранения.

Если и JS, и CSS файлы существуют, код подключает эти файлы к странице через Bitrix Asset Manager. Также, если они существуют, на страницу добавляется скрипт, который устанавливает флаг need_preload в значение false (что отменяет отображение анимации загрузки) и устанавливает значение update_need в зависимости от необходимости обновления.

Если файлы JS и CSS не существуют, код добавляет на страницу скрипт, устанавливающий флаг need_preload в значение true (что вызывает отображение анимации загрузки) и устанавливает значение update_need в зависимости от необходимости обновления. В этом случае также обновляется конфигурационный файл, обнуляя параметры update_last_stamp, update_last_date и plugin.

Бэкенд часть 2 (loader.php)

Бэкенд состоит из кода в файле loader.php и использует библиотеку для минификации JS и CSS файлов. Все ошибки отображаются для улучшения процесса отладки.

В начале кода установлена блокировка для предотвращения одновременного выполнения нескольких процессов.

Настройки конфигурации хранятся в файле .config.php. Он проверяется на наличие, и если он существует, его содержимое загружается в переменную $arProperty.

Код также обрабатывает GET запросы и проверяет наличие параметров 'a' и 'b' (являющихся именами плагинов), а также 'clear_cache' для очистки кэша.

Затем создаются два объекта Minify\JS и Minify\CSS, и происходит перебор всех плагинов для добавления их JS и CSS файлов в эти объекты.

Если включен режим минификации, коды JS и CSS минифицируются и сохраняются в кэше. Если режим минификации выключен, коды JS и CSS сохраняются в кэше без изменений.

По завершении обработки всех плагинов, код проверяет наличие предыдущего временного файла кэша, и если он существует, объединяет его с новым временным файлом кэша.

Функции (loader.php)

cleanupCacheFolder($cacheFolder, $now)

Функция для очистки папки кэша от старых файлов.

cleanupCacheFolder_old($cacheFolder, $update_last_stamp)

Устаревшая версия функции для очистки кэша. Она удаляет старые файлы кэша и временные файлы, созданные более 10 минут назад.

pathPluginJs($name), pathPluginCss($name), pathComponentJs($name), pathComponentCss($name)

Функции для получения путей к JS и CSS файлам плагинов и компонентов.

GetUrlPath($cache_path, $CurDir)

Функция для получения URL пути к файлу в кэше.

Фронтенд часть

Фронтенд представлен JavaScript кодом и состоит из класса SFLoaderPlugin. Класс имеет следующие основные функции и возможности:

• Конструктор класса принимает настройки для работы плагина, такие как атрибут элемента, разделитель URL, путь к фреймворку, список плагинов для поиска и кэширования, текст и внешний вид прелоадера и другие.
• Возможность вывода отладочной информации в консоль браузера.
• Возможность запуска и остановки прелоадера.
• Поиск и кэширование используемых библиотек на основе атрибута указанного элемента.
• Проверка наличия и загрузка JS и CSS файлов библиотек.
• Добавление стилей и скриптов на страницу.
• Инициализация и выполнение основного алгоритма работы плагина.

Настройки backend

Файл настроек находится по пути /simai/loader/.config.php и имеет следющие поля

Очистка кеша

Для того чтобы очистить кеш, необходимо выполнить скрипт с использованием метода GET, запросить следующий URL: /simai/loader/loader.php?clear_cache=Y.

В ответ будет получена информация о выполненной операции: "Папка cache была успешно очищена, удалено 8 файлов". Это позволит удалить временные файлы и обновить кеш.

Защита от одновременного записи в кеш.

В начале скрипта /simai/loader/loader.php происходит проверка на наличие файла блокировки. Если файл уже существует, то происходит ожидание его удаления. Если возраст файла превышает установленное время истечения блокировки, то он считается устаревшим и удаляется.

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

Пример подключения плагинов фреймворка

Слайдер

<div class="swiper" sf-asset="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide">Слайд 1</div>
		<div class="swiper-slide">Слайд 2</div>
		<div class="swiper-slide">Слайд 3</div>
		<div class="swiper-slide">Слайд 4</div>
		<div class="swiper-slide">Слайд 5</div>
		<div class="swiper-slide">Слайд 6</div>
		<div class="swiper-slide">Слайд 7</div>
		<div class="swiper-slide">Слайд 8</div>
		<div class="swiper-slide">Слайд 9</div>
		<div class="swiper-slide">Слайд 10</div>
	</div>
	<!-- Add Arrows -->
	<div class="swiper-button-next"></div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-pagination"></div>
</div>
<script>
	var swiper = new Swiper('.swiper-container', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination',
	},
	});
</script>

Fancybox

<a href="https://farm4.staticflickr.com/3953/15594397982_477385f90d_b_d.jpg" data-fancybox sf-asset="fancybox">
	<img src="https://farm4.staticflickr.com/3953/15594397982_477385f90d_m_d.jpg" />
</a>

Изменить статью