Как написать хороший javascript для Битрикс компонента?

Question

[brees]

Есть компонент со сложной js логикой, который может встраиваться на страницу посредством ajax, необходимо инициализировать обработчики и т.д., первое, что приходит в голову написать что-то такое:

class ShopSection {
  constructor(id) {
    this.elem = document.getElementById(id);
    ...
  }
  initMap() {
    ...
  }
}

Но тут вопрос, как из этого скрипта получить ссылку(id или class) на наш компонент(общую обертку div например), чтобы несколько компонентов на странице работали корректно и не мешали друг другу ?
Можно ли сгенерировать уникальный id компонента, который можно просто передать:

<div id="<?php echo %UNIQUE_ID% ?>">
...
</div>
<script>
new ShopSection(<?php echo %UNIQUE_ID% ?>);
</script>

Или же это плохая идея ? Как вы действуете в таких ситуациях и в каком стиле пишите свой js под Битрикс ?

Comments

[photosho]

Можно посмотреть, как устроен catalog.item, там на стороне php генерируется массив идентификаторов элементов, которые должны быть задействованы в js, затем этот массив прямо в шаблоне передается в скрипт:

<script>
    var ids = <?= CUtil::phpToJsObject($ids, false, true); ?>;
</script>

Что-то типа того, это код из моего компонента, построенного таким же образом. В этом же массиве хранится и id самого компонента - "UNIQUE_ID" у вас в примере. Не помню, как сделано в catalog.item, но в своем компоненте я генерирую все идентификаторы в class.php.

[Ярослав Александров]

А какая цель преследуется, в каком компоненте?

[brees]

Ярослав Александров, Цель - не писать портянки неподдерживаемого и нечитаемого jquery(пример снизу), который едва ли будет работать при наличии несколько таких компонентов на странице

$('.jquery').click(function() {

});
$('.jquery').click(function() {

});
.......

Например табы на ajax, внутри них ещё табы на ajax и карусель с картой и много чего ещё, всё это нужно инициализировать при добавлении на страницу динамически.
Привязав скрипт к конкретному элементу по id я бы смог уменьшить потенциальное количество багов.
Компонент может быть любым, из битрикса или написанный руками.
P.S. Внутри компонента может быть компонент и т.д.

[Ярослав Александров]

brees, то что вы пишите это утопия, чтобы понять что это не практичная идея вам нужно хотя бы пройти подготовку к экзаменам №1 и №2
https://academy.1c-bitrix.ru/certification/exams.php

[brees]

Ярослав Александров, спасибо, у меня все эти экзамены уже сданы, а советы битрикса аля

$.ajax(
  url: '<?=$APPLICATION->GetCurPage()?>'
)

меня не интересуют, так пусть они сами программируют.
Для битрикс структура и читаемый код это утопия ? Или до ООП битриксу ещё далековато ?
У меня есть один небольшой такой сайт, в котором 3 файла по 2к+ строк js, и 10+ файлов компонентов, некоторые из которых 200+ строк, изменить там хотя-бы что-то это сущий ад, больше так не хочу.
Если вы про мой пример с табами - это не сказка, реальный проект.

Answer 1

[Вячеслав Шевченко]

Примерно так и делается. В компоненте bitrix:catalog.section со списком товаров уникальный ID для товара генерируется так:

$uniqueId = $item['ID'].'_'.md5($this->randString().$component->getAction());
//$item['ID'] - ID товара
//$this->randString() - рандомная строка
//$component->getAction() - по документации "Метод возвращает название текущего действия."

//Ниже пример подключения JS к списку товаров
$obName = 'ob'.preg_replace('/[^a-zA-Z0-9_]/', 'x', $this->GetEditAreaId($navParams['NavNum'])); //название переменной в которой, помещен JS-объект с логикой компонента.

//Ну и создание объекта в который передаются параметры.
var <?=$obName?> = new JCCatalogSectionComponent({
		siteId: '<?=CUtil::JSEscape($component->getSiteId())?>',
		componentPath: '<?=CUtil::JSEscape($componentPath)?>',
		navParams: <?=CUtil::PhpToJSObject($navParams)?>,
		deferredLoad: false, // enable it for deferred load
		initiallyShowHeader: '<?=!empty($arResult['ITEM_ROWS'])?>',
		bigData: <?=CUtil::PhpToJSObject($arResult['BIG_DATA'])?>,
		lazyLoad: !!'<?=$showLazyLoad?>',
		loadOnScroll: !!'<?=($arParams['LOAD_ON_SCROLL'] === 'Y')?>',
		template: '<?=CUtil::JSEscape($signedTemplate)?>',
		ajaxId: '<?=CUtil::JSEscape($arParams['AJAX_ID'])?>',
		parameters: '<?=CUtil::JSEscape($signedParams)?>',
		container: '<?=$containerName?>'
	});