Перейти к основному содержимому

Начало работы с Javascript библиотекой

Основной принцип работы Javascript компонентов​

Каждый компонент (component) определяет набор совершаемых над ним действий (action). Каждое такое действие может происходить при определенных условиях, которые определяют то, как именно будет выполняться код действия, иначе параметры действия (args). Также компонент имеет определенную конфигурацию, иначе его свойства config.

Некоторые компоненты могут содержать элементы (item).

Компоненты могут управляться как внутри javascript кода, так и внутри html.

Взаимодействие с компонентами используя Javascript​

С точки зрения javascript, action - функция (метод) объекта класса component, в которую передаются args.

somefile.js
const componentInstance = new component(config);

componentInstance.action(args);

Взаимодействие с компонентами используя HTML​

Внутри html любой стандартный компонент представлен как html-тег, содержащий специальный data-атрибут, указывающий на имя компонента:

component
...<htmltag data-...component...>...</htmltag>...

Свойства компонента могут быть указаны с использованием поддерживаемых компонентом data-атрибутов.

Для управления component вне javascript кода, имеются контроллеры (control), содержащие специальный data-атрибут - data-action, при взаимодействии с которыми выполняется action. Значение атрибута data-action определяет какое именно действие component нужно выполнить:

control
...<htmltag data-action="...action-name...">...</htmltag>...

Для запуска action с определенными параметрами args используется атрибут data-args:

control
...
<htmltag
data-action="...action-name..."
data-args="...action-args..."
>
  ...
</htmltag>
...

Для того чтобы связать component и control необходимо присвоить component уникальный атрибут id, связать control с component используя data-component-id, data-action и при необходимости data-args:

component
...<htmltag id="component_id" data-...component...>...</htmltag>...
control
...
<htmltag
data-component-id="component_id"
data-action="...action-name..."
data-args="...action-args..."
>
  ...
</htmltag>
...

Установка модулей/компонентов​

Установка по умолчанию​

Для установки требуемого модуля или компонента необходимо скопировать исходные файлы модуля или компонента в желаемую папку, а затем подключить их

Установка через Bitrix Marketplace​

Для установки требуемого модуля или компонента необходимо установить соответствующую PHP библиотеку, а затем подключить требуемый модуль или компонент

Подключение модулей/компонентов​

Подключение Javascript​

Подключение используя тег script​

html
...
Здесь находятся подключение всех скриптов, от которого зависит текущий подключаемый скрипт
...
<script src="Путь к локально размещенному файлу"></script>
...
Здесь находятся подключение всех зависимых от данного скрипта скриптов
...
</body>
...

Подключение используя Bitrix API​

php
...

Bitrix\Main\Loader::includeModule('Название подключаемой PHP библиотеки, содержащей CSS/JS библиотеки');

CJSCore::Init(['Название подключаемой CSS/JS библиотеки']);
...

Подключение CSS​

html
...
Здесь находятся подключение всех стилей, от которого зависит текущий подключаемый скрипт
...
<link rel="stylesheet" href="Путь к локально размещенному файлу">
...
Здесь находятся подключение всех зависимых от данного скрипта стилей
...
</head>
...

Подключение используя Bitrix API​

php
...

Bitrix\Main\Loader::includeModule('Название подключаемой PHP библиотеки, содержащей CSS/JS библиотеки');

CJSCore::Init(['Название подключаемой CSS/JS библиотеки']);
...