Соглашения об именовании

Slim.js — это легковесная библиотека для построения компонентов в JavaScript с реактивным подходом. Правильное именование в Slim.js играет критически важную роль для поддерживаемости кода, ясности структуры проекта и предотвращения конфликтов имен в DOM. Рассмотрим ключевые соглашения и лучшие практики.

Имена компонентов

Компонент в Slim.js определяется с помощью кастомного элемента, который регистрируется через Slim.tag(). Соглашения об именах компонентов имеют следующие особенности:

  • Кебаб-кейс (kebab-case): Имя компонента всегда должно использовать дефисы для разделения слов. Например:
Slim.tag('user-profile', class extends Slim {});
  • Обязательный дефис: Имя должно содержать хотя бы один дефис. Это требование стандарта Custom Elements, предотвращающее конфликт с встроенными HTML-тегами.
  • Смысловое название: Имя компонента должно отражать его назначение, избегая аббревиатур и неинформативных слов. Например, todo-list лучше, чем tl.

Имена свойств и методов

Свойства компонентов в Slim.js часто используются в шаблонах для привязки данных и реактивного обновления. Рекомендации по именам:

  • CamelCase для JS-свойств: Свойства и методы компонента объявляются в camelCase.
class extends Slim {
  userName = '';
  updateUser() { /* логика */ }
}
  • Приватные свойства через нижнее подчёркивание: Для внутреннего состояния компонента можно использовать _ перед именем, чтобы обозначить приватность.
class extends Slim {
  _internalCounter = 0;
}
  • Глаголы для методов: Методы должны начинаться с глагола, отражая действие: loadData(), toggleVisibility(), submitForm().

Атрибуты HTML

Атрибуты, которые связываются с компонентом через HTML, имеют свои правила:

  • Кебаб-кейс для атрибутов: В HTML следует использовать дефисные имена, соответствующие camelCase-свойствам JS. Slim.js автоматически конвертирует их:
<user-profile user-name="John Doe"></user-profile>

соответствует свойству userName в классе компонента.

  • Явная связь с JS: Название атрибута должно быть понятно без просмотра кода компонента. Например, data-enabled лучше, чем de.

События

Slim.js поддерживает кастомные события через dispatchEvent. Соглашения по именам событий:

  • Кебаб-кейс для событий: Имена событий используют дефисы для лучшей читаемости.
this.dispatchEvent(new CustomEvent('user-logged-in', { detail: user }));
  • Однозначность и контекст: Название события должно указывать на его источник или действие. Например, form-submitted, item-selected.

Классы CSS

Slim.js активно интегрируется с CSS через Shadow DOM или scoped-стили. Рекомендации по именованию классов:

  • БЭМ-подобные имена: Использование Block__Element–Modifier повышает читаемость и предотвращает конфликты.
.user-profile__avatar--large { ... }
  • Согласованность с именем компонента: Название блока в классе CSS часто совпадает с именем компонента, что облегчает поиск соответствующих стилей.

Константы и перечисления

Для констант в Slim.js применяется стандарт Jav * aScript:

  • Все буквы заглавные с подчеркиваниями:
const MAX_ITEMS = 50;
  • Группировка логически связанных констант через объекты или перечисления:
const USER_ROLES = {
  ADMIN: 'admin',
  GUEST: 'guest'
};

Общие рекомендации

  • Единообразие: В проекте должно быть одно правило для именования компонентов, свойств и методов.
  • Простота и читаемость: Имена не должны быть длиннее, чем нужно, и легко восприниматься при чтении кода.
  • Избегать сокращений: Сокращения усложняют поддержку, особенно в командной разработке.
  • Контекстные префиксы: Для глобальных утилит или часто используемых функций можно использовать префиксы, отражающие область действия. Например, authLogin() для функции аутентификации.

Соблюдение этих соглашений делает код на Slim.js предсказуемым, снижает вероятность ошибок и упрощает работу с компонентами как в рамках одного проекта, так и при интеграции с другими библиотеками.

Оглавление