home chevron_right
/js: охват и назначение

Базовые ассеты фреймворка: общий CSS и общий JSlink

В SIMAI Framework 4 базовые фронтенд-ассеты подключаются как комплекты (пакеты): один “пакет” описывает набор файлов CSS/JS (и иногда строковые вставки), которые добавляются в <head> через менеджер ассетов Bitrix.

Ключевой пакет ядра — simai.framework. В его “дефолтной” сборке подключаются:

  • общий CSS: .../core/css/sf-full.css
  • общий JS: .../core/js/sf-full.js
  • плагины, которые идут вместе с ядром (например, навигация sf-nav, md-color)

Физически файлы пакетов лежат внутри /simai/asset/... (по директории пакета и версии), а реестр пакетов хранится в /simai/config/.asset.config.php.

На уровне шаблона подключение обычно делается в <head> (в вашем шаблоне это вынесено в отдельные файлы style.php и js.php, которые подключаются из template.php). Там же после подключений вызывается $APPLICATION->ShowHead() и инициализируется базовое ядро (CJSCore::Init(['ajax'])), поэтому важно, чтобы ваши добавления не конфликтовали с тем, что Bitrix уже подключает автоматически.

Переопределения и добавления: только через слой сайта simai.data/templatelink

Для проекта безопасная схема такая:

  • не править файлы в /simai/asset и реестр /simai/config/.asset.config.php (это часть ядра и будет обновляться);
  • свои CSS/JS держать в {site_dir}/simai.data/template/style и {site_dir}/simai.data/template/js;
  • подключать их из проектного шаблона (обычно в style.php / js.php рядом с template.php).

Важно: конфиг {site_dir}/simai.data/config/.asset.config.php в текущей реализации не используется (его наличие не означает, что ядро будет читать оттуда пакеты).

Практический смысл: “кастомизация ассетов” в SF4 — это не переопределение ядра, а аккуратное добавление проектных файлов поверх (и, при необходимости, включение дополнительных пакетов ядра).

Пример: добавить проектный JS (в js.php вашего шаблона):

<?php

declare(strict_types=1);

\Bitrix\Main\Page\Asset::getInstance()->addJs(SF_DATA_DIR . '/template/js/custom.js');

Сверка путей и подключений: где смотреть, чтобы не гадатьlink

Проверять корректность подключения лучше по факту в браузере:

  • вкладка Network: реально ли грузится ваш файл (200, правильный путь, нет редиректов);
  • вкладка Sources: не подключили ли вы одну и ту же библиотеку дважды;
  • вкладка Console: нет ли ошибок ReferenceError (часто признак неправильного порядка подключений).

Дополнительно полезно помнить про два частых источника “дублей”:

  • Bitrix сам может подключать часть библиотек (через CJSCore или зависимости компонентов),
  • SF4 может подключать те же библиотеки как пакет (например, jquery как отдельный пакет).

Если вы видите 2× jQuery или 2× swiper — почти всегда лучше оставить один источник.

Чек-лист готовности (фронтенд ассеты)link

  • Системные файлы /simai и /simai/asset не изменялись.
  • Кастомные CSS/JS физически лежат в {site_dir}/simai.data/template/style|js.
  • Подключение кастомов сделано в проектном шаблоне (например, через \Bitrix\Main\Page\Asset::getInstance()->addCss/addJs).
  • В DevTools видно, что файлы реально загружаются (и нет дублей библиотек).
  • После правок очищен кэш (Bitrix + кэш браузера), иначе легко “ловить призраков”.
  • В консоли нет ошибок порядка подключения (когда плагин грузится раньше зависимости).