Просмотров: 67529
Дата последнего изменения: 21.02.2022
Сложность урока:
3 уровень - средняя сложность. Необходимо внимание и немного подумать.
4
5
Недоступно в лицензиях:
Ограничений нет
Варианты расположения кода
Перед написанием JS-кода встает резонный вопрос - где его хранить?
Существуют следующие варианты:
- Если вы разрабатываете JS-код для компонента и данный код больше нигде не применяется, разумнее расположить файл
script.js
в шаблоне самого компонента.
- Если JS-код общий для всей публичной части, разумнее его разместить в шаблоне сайта. Как правило, такие JS-файлы хранятся в подпапке шаблона
js/
и подключаются в самом шаблоне методом: Bitrix\Main\Page\Asset::getInstance()->addJs(); Но этот путь не подходит, если шаблонов сайта несколько, или вы разрабатываете код для административной части, или публичный шаблон запрещено менять по причине его обновлений компанией Битрикс (например, коробочный шаблон Битрикс24).
- В случае, описанном выше, применяется метод хранения файлов по пути
/local/file.js
. Этот же метод размещения стоит избрать в случае создания вами своего модуля.
Регистрация и подключение библиотек
Остановимся поподробнее на последнем варианте. Естественно, вы можете также разместить код в шаблоне сайта через Bitrix\Main\Page\Asset::getInstance()->addJs();
. Но более правильным решением будет третий подход.
Каждый файл в вашей папке по сути является отдельной мини-библиотекой, которую надо зарегистрировать.
Регистрация
Регистрация библиотек в include.php модуля или в init.php.
осуществляется с помощью следующего кода:
$arJsConfig = array(
'custom_main' => array(
'js' => '/bitrix/js/custom/main.js',
'css' => '/bitrix/js/custom/main.css',
'rel' => array(),
)
);
foreach ($arJsConfig as $ext => $arExt) {
\CJSCore::RegisterExt($ext, $arExt);
}
Как видите, код универсален, и можно зарегистрировать несколько файлов. В ключе CSS вы дополнительно можете указать CSS-файл (в случае если CSS-код идет в пару к JS), а ключом rel перечислить коды других BX-библиотек, которые будут автоматически подключены при подключении этой библиотеки.
Когда библиотеки зарегистрированы, их можно подключить с помощью следующей конструкции:
CUtil::InitJSCore(array('custom_main'));
Два указанных выше блока кода иногда идут вместе, иногда - раздельно. Например, в случае разработки собственного модуля регистрацию надо совершать в include.php
модуля (к примеру), а инициировать (вызывать InitJSCore) в нужном вам месте (например, в шаблоне компонента).
Ошибка слияния файлов
|
Если требуется зарегистрировать два разных файла и использовать их в зависимости от условий, то такой код кажется логичным:
<?php
AddEventHandler('main', 'OnEpilog', function(){
$arJsConfig = array(
'custom_main' => array(
'js' => '/bitrix/js/custom/main.js',
'css' => '/bitrix/js/custom/main.css',
'rel' => array(),
),
'custom_crm' => array(
'js' => '/bitrix/js/custom/crm.js',
'css' => '/bitrix/js/custom/crm.css',
'rel' => array(),
),
);
foreach ($arJsConfig as $ext => $arExt) {
\CJSCore::RegisterExt($ext, $arExt);
}
if (!crm) {
CUtil::InitJSCore(array('custom_main'));
} else {
CUtil::InitJSCore(array('custom_crm'));
}
});
Однако, если включена опции Объединять CSS файлы и Объединять JS файлы в настройках главного модуля, то файлы будут объединены.
Чтобы этого не произошло нужно для папок указать префиксы: не /bitrix/js/custom/crm.js , а /bitrix/js/custom_crm/crm.js
|