Компонентный подход

Bliss.js — это современная библиотека для работы с DOM и управления состоянием в веб-приложениях, которая активно использует компонентный подход. Компоненты в Bliss.js представляют собой изолированные, переиспользуемые блоки интерфейса, объединяющие структуру, поведение и стиль в одном логическом элементе.

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

Компонент в Bliss.js создаётся с помощью функции Bliss.component. Основная структура компонента включает:

  • Шаблон HTML — определяет визуальную структуру.
  • Состояние (state) — объект, управляющий данными компонента.
  • Методы — функции для изменения состояния и управления поведением.

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

const Counter = Bliss.component({
  template: `
    <div class="counter">
      <span class="value">{{ count }}</span>
      <button data-action="increment">+</button>
      <button data-action="decrement">-</button>
    </div>
  `,
  state: {
    count: 0
  },
  methods: {
    increment() {
      this.state.count += 1;
    },
    decrement() {
      this.state.count -= 1;
    }
  }
});

document.body.appendChild(Counter());

Особенности:

  • {{ count }} — привязка состояния к DOM.
  • data-action — стандартный способ связывать события с методами компонента.
  • this.state автоматически реагирует на изменения и обновляет DOM.

Привязка событий и реактивность

Bliss.js поддерживает декларативное связывание событий. Любое действие на элементе DOM можно привязать к методу компонента через data-action.

Пример:

<button data-action="increment">+</button>

При клике на кнопку Bliss автоматически вызывает метод increment компонента.

Реактивность состояния реализуется через Proxy: любые изменения this.state мгновенно отражаются в DOM, без необходимости ручного обновления.

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

Компоненты можно вкладывать друг в друга для создания сложных интерфейсов. Bliss.js позволяет использовать другие компоненты внутри шаблона с синтаксисом:

const App = Bliss.component({
  template: `
    <div>
      <h1>Счётчик приложения</h1>
      <Counter></Counter>
    </div>
  `
});

При этом Counter рендерится как самостоятельный блок со своим состоянием и методами.

Передача данных между компонентами

Bliss.js использует props для передачи данных от родителя к дочернему компоненту. Props передаются как атрибуты при создании компонента:

const Display = Bliss.component({
  template: `<p>{{ message }}</p>`,
  state: { message: '' }
});

const App = Bliss.component({
  template: `<Display message="Привет, Bliss!" />`
});

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

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

Компоненты Bliss.js имеют жизненный цикл, который включает следующие этапы:

  1. beforeMount — выполняется до рендера.
  2. mounted — вызывается после вставки в DOM.
  3. beforeUpdate — перед обновлением состояния.
  4. updated — после обновления DOM.
  5. beforeUnmount — перед удалением компонента.
  6. unmounted — после удаления из DOM.

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

const Timer = Bliss.component({
  state: { seconds: 0 },
  template: `<p>Прошло секунд: {{ seconds }}</p>`,
  mounted() {
    this.interval = setInterval(() => this.state.seconds++, 1000);
  },
  unmounted() {
    clearInterval(this.interval);
  }
});

Такой подход позволяет безопасно управлять ресурсами и сторонними эффектами.

Управление стилями компонентов

Bliss.js поддерживает локальные стили, которые применяются только к текущему компоненту. Стили можно определять внутри объекта компонента:

const Card = Bliss.component({
  template: `<div class="card">{{ content }}</div>`,
  state: { content: 'Текст карточки' },
  styles: `
    .card {
      padding: 16px;
      border: 1px solid #ccc;
      border-radius: 8px;
      background: #f9f9f9;
    }
  `
});

Это предотвращает коллизии классов между разными компонентами.

Реактивные вычисляемые свойства

Bliss.js позволяет создавать вычисляемые свойства (computed), которые автоматически пересчитываются при изменении зависимого состояния:

const Todo = Bliss.component({
  state: { todos: ['Купить хлеб', 'Позвонить другу'] },
  computed: {
    count() {
      return this.state.todos.length;
    }
  },
  template: `<p>Всего задач: {{ count }}</p>`
});

Computed-свойства позволяют избегать дублирования данных и упрощают управление зависимостями внутри компонента.

Работа с асинхронными данными

Bliss.js интегрируется с промисами и асинхронными вызовами через методы компонента:

const UserList = Bliss.component({
  state: { users: [] },
  async mounted() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    this.state.users = await response.json();
  },
  template: `
    <ul>
      {{ users.map(user => '<li>' + user.name + '</li>').join('') }}
    </ul>
  `
});

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

Итоговые принципы

  • Каждый компонент — изолированный блок с собственным состоянием, методами и стилями.
  • Связь между компонентами реализуется через props и события.
  • Изменения состояния реактивны и автоматически обновляют DOM.
  • Жизненный цикл компонентов позволяет управлять ресурсами и эффектами.
  • Bliss.js поддерживает вложенность, вычисляемые свойства и асинхронные операции без дополнительной настройки.

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

Оглавление