Варианты расположения кода

Перед написанием 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')); 
    } 
});