Создание базового компонента

Slim.js — это минималистичная библиотека для создания веб-компонентов на JavaScript, ориентированная на простоту, производительность и реактивность. Компонент в Slim.js представляет собой изолированный блок интерфейса с собственным шаблоном, состоянием и логикой.

Определение компонента

Компонент создаётся с помощью функции Slim.define, которая принимает два аргумента: имя компонента и объект конфигурации. Структура объекта конфигурации включает:

  • template — HTML-шаблон компонента.
  • data — объект с начальными данными (состоянием).
  • Методы компонента — функции для обработки логики.

Пример базового компонента:

Slim.define('my-counter', {
  template: `
    <div>
      <p>Счётчик: {count}</p>
      <button oncl ick="increment()">Увеличить</button>
    </div>
  `,
  data: {
    count: 0
  },
  increment() {
    this.count++;
  }
});

Ключевые моменты:

  • template использует синтаксис {property} для привязки данных.
  • Методы компонента могут обращаться к данным через this.
  • События можно привязывать прямо в шаблоне через атрибуты, такие как onclick.

Реактивность данных

Slim.js автоматически отслеживает изменения в свойствах, объявленных в data, и обновляет DOM при изменении этих свойств. Это делает компоненты реактивными без необходимости вручную манипулировать DOM.

Пример изменения состояния:

this.count += 1;

После выполнения этой строки Slim.js обновит содержимое шаблона, заменив {count} на новое значение.

Встроенные события и методы жизненного цикла

Компоненты Slim.js поддерживают несколько специальных методов жизненного цикла:

  • onBeforeCreated() — вызывается до создания компонента, перед рендерингом.
  • onCreated() — вызывается после рендеринга шаблона.
  • onBeforeUpdate(prop, oldValue, newValue) — вызывается перед обновлением свойства.
  • onUpdated(prop, oldValue, newValue) — вызывается после изменения свойства.

Пример использования:

Slim.define('my-counter', {
  template: `<p>{count}</p>`,
  data: { count: 0 },
  onCreated() {
    console.log('Компонент создан');
  },
  onUpdated(prop, oldValue, newValue) {
    console.log(`Свойство ${prop} изменено с ${oldValue} на ${newValue}`);
  },
  increment() {
    this.count++;
  }
});

Работа с атрибутами

Компоненты могут получать данные через HTML-атрибуты. Для этого используется метод attributeChangedCallback. В Slim.js можно просто объявить свойства в data, и библиотека автоматически свяжет их с атрибутами компонента.

Пример передачи атрибута:

Slim.define('greeting-component', {
  template: `<p>Привет, {name}!</p>`,
  data: { name: 'Мир' }
});

Использование в HTML:

<greeting-component name="Алексей"></greeting-component>

После рендеринга шаблон покажет Привет, Алексей!.

Вложенные компоненты

Slim.js позволяет использовать компоненты внутри других компонентов. Для этого необходимо зарегистрировать компонент и вставить его тег в шаблон родителя.

Пример:

Slim.define('child-component', {
  template: `<span>Я — дочерний компонент</span>`
});

Slim.define('parent-component', {
  template: `
    <div>
      <p>Родительский компонент</p>
      <child-component></child-component>
    </div>
  `
});

Slim.js автоматически создаст экземпляр дочернего компонента и встроит его в DOM родителя.

Динамическая генерация контента

Slim.js поддерживает циклы и условные конструкции через синтаксис #if и #for. Это позволяет генерировать повторяющиеся элементы и управлять отображением элементов на основе состояния.

Пример списка:

Slim.define('todo-list', {
  template: `
    <ul>
      #for item INTOdos
        <li>{item}</li>
      #end
    </ul>
  `,
  data: {
    todos: ['Купить хлеб', 'Помыть машину', 'Прочитать книгу']
  }
});

Каждый элемент массива todos будет отображён как отдельный <li>.

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

Каждый компонент в Slim.js может содержать локальные стили с использованием тега <style> внутри шаблона. Это позволяет изолировать стили и избегать конфликтов с глобальными CSS.

Пример:

Slim.define('colored-box', {
  template: `
    <style>
      div { 
        width: 100px; 
        height: 100px; 
        background-color: {color}; 
      }
    </style>
    <div></div>
  `,
  data: { color: 'red' }
});

Изменение свойства color автоматически обновит цвет блока.

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

Оглавление