JS и UI в 1С-Битрикс - обзор клиентской части
Фронтенд в 1С-Битрикс собирается из четырёх слоёв: сервер доставляет файлы,
браузер получает ядро BX, поверх него работает библиотека готовых виджетов, а
для сложных интерфейсов есть обёртка над Vue 3. Разберём общую картину и
сквозные правила.
Как это работает
Слой 1: доставка ассетов. Сервер не исполняет JavaScript - он лишь ставит на
страницу ссылки на файлы и подключает расширения. Актуальный способ - объект
доставки ассетов и загрузчик расширений. В старом коде встречаются
AddHeadScript(), SetAdditionalCSS() и реестр библиотек CJSCore.
Слой 2: ядро BX. В браузере всё держится на глобальном объекте BX и модуле
main.core с наборами Dom, Tag, Type, Loc, Runtime. Через ядро идут
AJAX-вызовы, события и утилиты.
Слой 3: UI-библиотека. Готовые виджеты: кнопки, всплывающие окна и меню, боковой слайдер, модальные окна, поля, метки, подсказки. PHP только загружает расширение, сам виджет создаёт JavaScript.
Слой 4: BitrixVue 3. Обёртка над Vue 3 для сложных реактивных интерфейсов. Vue не выносится в глобальную область, версия централизована, встроены локализация и события. Вторая версия устарела.
С точки зрения архитектуры платформы расширения - такой же элемент каркаса, как компоненты, агенты, события и сервисы.
Сквозные правила
Клиентский код оформляют расширениями. Своё место для них -
/local/js/<модуль>/<расширение>/. Имя расширения повторяет путь в файловой
системе, где уровни вложенности разделены точками.
Подключение делают на сервере, а не из браузера. Загрузка скриптов из JavaScript мешает объединению файлов, повторно исполняет код и добавляет задержки.
Отложенные функции нельзя вызывать в кешируемых файлах. При валидном кеше шаблон и модификатор результата не выполняются, и вывод потеряется. Место таких вызовов - эпилог компонента или шаблон сайта.
Прямо подключаемым файлам нужна метка версии, иначе браузер будет отдавать устаревший кеш после обновления.
Куда смотреть дальше
| Тема | О чём | Статья |
|---|---|---|
| Подключение и расширения | доставка JS и CSS, структура расширения, сборка | Подключение JS/CSS |
| Ядро BX | main.core, AJAX, события, работа с DOM | Ядро BX |
| UI-библиотека | кнопки, попапы, слайдер, диалоги | UI-библиотека |
| BitrixVue 3 | реактивные приложения, компоненты, состояние | BitrixVue 3 |
| Админ-интерфейс | гриды, фильтры, формы в админке | Админ-интерфейс |
Частые ошибки
Скрипты грузят из браузера. Ломается объединение файлов и растёт время загрузки. Подключайте на сервере.
Свои файлы кладут в системные папки. Обновление их перезапишет. Место
пользовательских расширений - в /local/js/.
Отложенные вызовы ставят в модификатор результата. При включённом кеше они не выполнятся вовсе.
Забывают метку версии у прямо подключаемых файлов. Пользователи получают старую версию скрипта после релиза.
Смешивают глобальный BX и модульный импорт без нужды. Новый код пишут на
модулях, к глобальному объекту обращаются в легаси и в местах, где модульная
сборка не используется.
Частые вопросы
Расширение или просто подключить файл?
Расширение нужно, когда у кода есть зависимости, его переиспользуют в разных местах или он состоит из нескольких файлов: платформа сама подтянет зависимости в правильном порядке и объединит бандлы. Прямое подключение файла остаётся уместным для одного общего скрипта шаблона сайта - там расширение будет избыточным.
Чем main.core отличается от глобального BX?
Это два способа обращаться к одному ядру. Глобальный объект BX доступен на любой странице и используется в старом коде и в шаблонах компонентов. Модуль main.core даёт то же самое в виде импортируемых сущностей - это современный путь для расширений, собираемых через сборщик. В новом коде предпочтительнее модульный импорт.
Стоит ли брать Vue для интерфейса на сайте?
Зависит от сложности. Для формы, попапа или таблицы с фильтром хватит UI-библиотеки и ядра. BitrixVue оправдан там, где много состояния и реактивности: конструкторы, редакторы, интерфейсы с живым обновлением данных. Плюс встроенной обёртки в том, что версия Vue централизована и модули не конфликтуют друг с другом.
Связанные темы
- Компоненты 2.0 - AJAX-действия компонента
- Ядро D7 - контроллеры на серверной стороне
- Раздел JS и интерфейсы