Варианты инициализации компонентов, +/−

b-component.md

Варианты инициализации компонентов

Теги

Плюсы

• Можно использовать собственный тег для каждого компонента.
• Нет ограничений по количеству и расположению внутри элемента.

Минусы

• Нельзя поставить в простые инпуты, требуется for="prev".

Тег <script>

Плюсы

• Можно поставить почти в любом месте (кроме input, textarea).

Минусы

• Не даёт использовать шаблоны <script type="text/html"> (варианты шаблонов). Решается комментированием содержимого и разворачиванием при использовании.

Тег <component>

Минусы

• Нельзя поставить внутри <select>, между <tbody/tr/td> и т.д.

Атрибуты

Плюсы

• Вешаются на любой тег.

Минусы

• Все <xsl:attribute> должны идти первыми, а то…
• Сложно сделать отдельный атрибут для каждого компонента (почему — см. ниже). Приходится объединять в один, из-за этого следующие два пункта.
  • Неудобно объявлять несколько компонентов, особенно с шаблонами и условиями.
  • Проблемы с запятыми при перестановке, добавлении и удалении компонентов.
• Сложно написать настоящий JSON из-за кавычек.
• Можно писать выражения и функции.
• Неудобно работать с JS в XSL.

Проблемы при использовании собственного атрибута для каждого компонента

1. Нет селектора «имя атрибута начинается с». Чтобы найти компоненты, потребуется маркер вроде jsx-component, который легко забывается и требует дополнительной логики для установки (например, компонент подключается через apply-templates, значит и маркер должен быть там же, а не ставиться безусловно).

2. Найти нужные атрибуты не так-то просто и, очевидно, затратнее, чем получить известный атрибут.

3. Именование. Если использовать произвольные имена, будет трэш и проблемы как в Блоко, когда пришлось наворачивать сложный генератор уникальных ID. Если использовать порядковый номер, как раньше, могут быть трудноуловимые баги с одинаковыми номерами. Если использовать имена компонентов, то HH/Salarystat/Report/HighlightCells нужно конвертировать в data-component-hh-salarystat-report-highlightcells, а в dataset попадёт componentHhSalarystatReportHighlightcells. Конвертировать нужно будет постоянно в голове, при поиске и т.п., и для XSL это тоже нетривиальная задача.

4. Везде, где нет XSL — в hh.ru, документации, шаблонах Jinja или HoganJS, — придётся наворачивать препроцессоры или писать всё вручную, и чем проще это будет сделать, тем лучше. В наше время система компонентов не должна создавать проблем при использовании на статичных страницах, любой сахар в шаблонизаторах (читай <b:component>) — отдельная история.

Атрибут onclick

Плюсы

• Легко получать: var components = el.onclick();.

Минусы

• Для поиска элементов требуется маркер.

<b:component>

Плюсы

• Описывает каждый компонент отдельно.
• Скрывает реализацию привязки компонента к тегу.

<b:component> с JSON внутри

Плюсы

• В параметры нельзя передавать функции и выражения.
• Избавление от eval, защита от XSS.
• Параметры можно передать прямо в компонент.

Минусы

• Параметры можно передать прямо в компонент.

<b:component> с XML внутри

Плюсы

• Скрывает реализацию и формат передачи параметров компонента.
• Унифицирует и структурирует параметры по типам (trl, templates, cssClasses), позволяя строить внутреннее API (this.trl(), this.template(), this.cssClass).
• Легко формировать, легко обрабатывать (trl-js), самовалидируется.
• В XML нет JS.