Компонент — это переиспользуемая библиотека JavaScript. Один раз написали полезные функции — и подключаете их к модулям объектов и к страницам, не копируя код.

Примеры: форматирование сумм прописью, генерация печатных шаблонов, работа с внешним сервисом, набор вспомогательных функций для нескольких документов.

Компоненты создаются в Конструкторе: раздел Компоненты → Добавить.

# Редактор компонента

┌──────────────────────────────────────────────────────────────┐
│ </> Компонент: «Форматирование»                          🗑  │
├──────────────────────────────────────────────────────────────┤
│ Имя:  [Форматирование                                     ]  │
├───────────────┬──────────────────────────────────────────────┤
│ ФАЙЛЫ     [+] │  1  function sumToWords(n) {                 │
│ 📄 index.js   │  2    // ...                                 │
│ 📄 helpers.js │  3  }                                        │
└───────────────┴──────────────────────────────────────────────┘

# Верхняя строка

Элемент	Что делает
Имя	Название компонента. Вводится свободно
🗑	Удаляет компонент. Диалог: «Удалить компонент? Это действие необратимо.» — Отмена / Удалить

# Панель «ФАЙЛЫ»

Элемент	Что делает
+ (подсказка «Новый файл»)	Добавляет ещё один файл, например `file2.js`
Имя файла	Щелчок открывает файл в редакторе
✏	Переименовать файл. Подтверждение — галочка, отмена — крестик; Enter тоже завершает переименование
🗑	Удалить файл. Последний оставшийся файл удалить нельзя

Все файлы компонента склеиваются в один код в том порядке, в котором они объявлены.

# Редактор кода

Монако-редактор с подсветкой JavaScript. Код сохраняется автоматически вместе с объектом.

# Как подключить компонент

Где	Как
Модуль объекта	В редакторе модуля справа есть панель Компоненты с галочками. Подсказка: «Код компонентов выполняется перед модулем. Функции доступны в вашем коде»
Страница	В панели Свойства страницы есть блок Подключённые компоненты с галочками. Подсказка: «Код компонентов выполняется перед модулем страницы»

Если доступных компонентов нет, панель пишет: «Нет доступных компонентов».

Порядок выполнения:

text

Код компонентов  →  Модуль объекта / страницы

Именно поэтому функции из компонента доступны в вашем коде как обычные функции — они объявлены раньше.

# Пример

Компонент Форматирование с одним файлом index.js:

javascript

function formatMoney(value) {
  return (value || 0).toLocaleString('ru-RU', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });
}

Подключите компонент к модулю документа и используйте:

javascript

// Модуль объекта — обработчик ПослеЗаписи
function ПослеЗаписи() {
  const total = formatMoney(formApi.getValue('Сумма'));
  formApi.showAlert('Сумма документа: ' + total);
}

Функция formatMoney работает, потому что код компонента выполнился раньше модуля.

# Как это работает внутри

Компонент — это обычный объект конфигурации со своим идентификатором. Модуль объекта хранит список подключённых компонентов (их идентификаторы). Когда система готовит код модуля к выполнению, она собирает код всех подключённых компонентов и ставит его перед кодом модуля. Результат кэшируется, чтобы не собирать его каждый раз заново.

# Рекомендации

Совет	Почему
Один компонент — одна тема	Проще переиспользовать: «Форматирование», «Работа с файлами»
Давайте функциям уникальные имена	Компоненты делят одно пространство имён с модулем
Не дублируйте код между компонентами	Вынесите общее в отдельный компонент
Проверяйте компонент в модуле объекта	Ошибка в компоненте ломает и модуль
Не кладите секреты в код компонента	Код виден в конфигурации

Компоненты