Плюрализация

Slim.js — это лёгкая библиотека для создания веб-компонентов, построенная на основе стандарта Custom Elements. Она предоставляет декларативный синтаксис для связывания данных с DOM и упрощает создание повторно используемых компонентов. Центральная концепция Slim.js — объединение реактивности и веб-компонентов без лишнего «шумного» кода.

Компоненты в Slim.js создаются через расширение базового класса Slim и определение шаблона через строку HTML.

class MyComponent extends Slim {
  get template() {
    return `
Hello, ${this.name}!
`;
  }
  
  constructor() {
    super();
    this.name = 'World';
  }
}

customElements.define('my-component', MyComponent);

Здесь ключевым моментом является использование свойств класса для реактивного обновления DOM. Любое изменение свойства автоматически отражается в шаблоне.

Система реактивности

Slim.js использует внутренний механизм слежения за изменениями свойств объекта. Основные принципы реактивности:

  • Свойства компонента объявляются в конструкторе или через this.
  • Любое изменение свойства вызывает перерисовку соответствующей части DOM.
  • Поддерживается двухсторонняя привязка данных через атрибуты:


${this.name}

Здесь {{name}} связывает значение инпута с внутренним состоянием компонента. Изменение инпута автоматически обновляет свойство name, и, следовательно, текстовый блок

.

Шаблоны и привязка данных

Шаблоны в Slim.js строятся с использованием ES6-шаблонных строк. Любой выражение в ${} вычисляется динамически при обновлении свойств.

Поддерживаются следующие виды привязки:

  • Односторонняя привязка: от свойства к DOM.
  • Двусторонняя привязка: от DOM к свойству и обратно.
  • Условная отрисовка через директивы if и unless:

  Содержимое отображается только если show = true




  Альтернативное содержимое
  • Циклическая отрисовка списков через директиву each:
    
  
  • ${item}
    •

Эта конструкция автоматически обновляет DOM при изменении массива items.

События и методы компонента

Slim.js позволяет легко связывать DOM-события с методами компонента:



${this.counter}

Метод increment изменяет свойство counter, что автоматически отражается на DOM. Поддерживаются стандартные события браузера, а также кастомные события:

this.dispatchEvent(new CustomEvent('update', { detail: { value: this.counter } }));

Жизненный цикл компонента

Slim.js реализует стандартные хуки жизненного цикла Web Components с некоторыми расширениями:

  • onBeforeCreated() — выполняется до инициализации компонента.
  • onCreated() — после создания экземпляра, до рендеринга.
  • onAfterCreated() — после первичной отрисовки DOM.
  • onRemoved() — вызывается при удалении компонента из DOM.

Эти методы позволяют контролировать инициализацию данных, привязку событий и очистку ресурсов.

Стилизация компонентов

Slim.js поддерживает как глобальные, так и локальные стили. Для локальных стилей используется Shadow DOM:

class StyledComponent extends Slim {
  get template() {
    return `
      
      
Красный текст

    `;
  }
}
customElements.define('styled-component', StyledComponent);

Локальные стили применяются только к данному компоненту и не затрагивают остальной DOM.

Интеграция с другими библиотеками

Slim.js легко интегрируется с внешними библиотеками и фреймворками благодаря простому API и стандарту Custom Elements. Можно использовать сторонние компоненты внутри Slim-шаблонов:

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

Оптимизация и производительность

Slim.js минимизирует количество обновлений DOM за счёт умного сравнения значений. Если свойство не изменилось, перерисовка не происходит. В сочетании с легковесной реактивной системой это делает библиотеку особенно подходящей для больших приложений с множеством компонентов.

Для массивов предусмотрены оптимизированные операции: добавление, удаление и перестановка элементов обновляет только необходимые DOM-узлы.

Плюрализация данных

Одной из ключевых особенностей Slim.js является поддержка плюрализации — правильного отображения множественных форм слов в зависимости от числовых значений.

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

${this.items.length} ${this.pluralize('элемент', 'элемента', 'элементов', this.items.length)}

Метод pluralize принимает:

  1. Единственное число
  2. Двойственное/небольшое количество
  3. Множественное число
  4. Число для выбора формы

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

Преимущество Slim.js в этом контексте заключается в том, что плюрализация интегрирована с реактивной системой. Изменение количества элементов в массиве мгновенно корректирует текстовые представления, обеспечивая правильное склонение слов в пользовательском интерфейсе без дополнительной логики.

Оглавление