Современный Frontend в Битрикс: Система JS-расширений и CJSCore::Init

Времена хаотичного подключения <script> и <link> тегов в header.php прошли.

Современный Битрикс предлагает мощную систему управления frontend-зависимостями — JS-расширения (extensions).

Что такое расширение?
Это именованный пакет, который может содержать:

• JS-файлы;
• CSS-файлы;
• Языковые фразы (lang-файлы);
• Зависимости от других расширений.

Зачем это нужно?

1. Управление зависимостями: Если ваше расширение my.component зависит от popup и ajax, Битрикс автоматически подключит их вместе с вашим скриптом.
2. Исключение дублирования: Если два разных компонента на странице запросят одно и то же расширение (например, jquery), оно будет подключено только один раз.
3. Сборка (бандлинг): Система может автоматически объединять несколько JS/CSS файлов в один для оптимизации загрузки.
4. Удобство: Вместо десятка строк AddHeadScript и SetAdditionalCSS — одна строка CJSCore::Init().

Шаг 1: Создание и регистрация расширения

Все расширения регистрируются через файлы config.php, которые система автоматически ищет в папках /bitrix/js, /bitrix/css, /local/js, /local/css.

Пример: Создадим расширение my.script.

• Создайте структуру папок:
• /local/js/my/
  • └── script/
    • ├── config.php
    • └── script.js
    • └── style.css
• Опишите расширение в config.php:

// /local/js/my/script/config.php 
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) { die(); } return [ 'css' => 'style.css', 
// Путь к CSS-файлу относительно папки расширения 'js' => 'script.js', 
// Путь к JS-файлу 
'rel' => [ 
// Зависимости 
'main.core', 
// Ядро BX JS (обязательно почти всегда) 
'ui.buttons', 
// Например, зависимость от стандартных кнопок 
], 
'skip_core' => false, 
// Не пропускать подключение ядра 
];

• css, js: Пути к файлам или массив путей.
• rel: Массив имен других расширений, от которых зависит наше. main.core — это базовое ядро BX.

Шаг 2: Подключение расширения

Теперь, чтобы подключить наш скрипт, стили и все его зависимости, достаточно в любом месте (prolog, component.php, template.php) вызвать CJSCore::Init().

// В component.php или template.php
\CJSCore::Init(['my.script']);

Эта одна строка сделает все необходимое:

1. Найдет config.php для my.script.
2. Проверит его зависимости (rel).
3. Подключит CSS и JS для main.core и ui.buttons (если они еще не подключены).
4. Подключит style.css и script.js нашего расширения.

Продвинутые возможности

Локализация (JS Lang-файлы)

Вы можете передавать языковые фразы в JavaScript.

Создайте lang/ru/config.php

/local/js/my/script/lang/ru/config.php 
$MESS['MY_SCRIPT_GREETING'] = 'Привет из JS!';

В script.js используйте BX.message():

// /local/js/my/script/script.js 
BX.ready(function(){ console.log(BX.message('MY_SCRIPT_GREETING')); });

Битрикс автоматически подгрузит нужные языковые фразы.

Сборка (бандлинг)
Для больших расширений можно настроить сборку нескольких файлов в один с помощью bundle.config.js.

Это тема для отдельной статьи, но знайте, что система это поддерживает.

Вывод:
Система JS-расширений — это современный и единственно правильный способ управления frontend-кодом в Битрикс.

Она решает проблемы зависимостей, дублирования и оптимизации. Начинайте использовать CJSCore::Init() во всех своих компонентах, и ваш frontend-код станет чистым, структурированным и профессиональным.

CJSCore::Init, JS расширения Битрикс, frontend, управление зависимостями, config.php, bundle.config.js, lang.php JS.