Определение методов

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

Объявление методов

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

Slim.tag('my-component', class extends Slim {
  
  constructor() {
    super();
    this.count = 0;
  }

  increment() {
    this.count++;
    this.update();
  }

  decrement() {
    this.count--;
    this.update();
  }

  render() {
    return `
      <div>
        <button oncl ick="${this.decrement}">-</button>
        <span>${this.count}</span>
        <button oncl ick="${this.increment}">+</button>
      </div>
    `;
  }
});

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

  • Методы определяются как функции внутри класса компонента.
  • Для изменения состояния компонента необходимо вызвать this.update(), чтобы Slim.js перерисовал DOM.
  • Методы могут быть использованы в шаблоне через привязку событий, например, oncl ick="${this.increment}".

Связь методов с жизненным циклом

Slim.js предоставляет несколько методов жизненного цикла, которые можно использовать для инициализации, обновления и удаления компонентов:

  • onBeforeCreated(): вызывается до создания компонента, полезно для установки начального состояния.
  • onCreated(): срабатывает после создания компонента, удобно для добавления подписок или асинхронных операций.
  • onBeforeUpdate(): вызывается перед обновлением DOM, можно проверять условия обновления.
  • onUpdated(): срабатывает после обновления, используется для выполнения действий над уже обновлённым DOM.
  • onDisconnected(): вызывается при удалении компонента из DOM, позволяет очистить ресурсы.

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

Slim.tag('timer-component', class extends Slim {
  
  constructor() {
    super();
    this.seconds = 0;
  }

  onCreated() {
    this.timer = setInterval(() => this.tick(), 1000);
  }

  tick() {
    this.seconds++;
    this.update();
  }

  onDisconnected() {
    clearInterval(this.timer);
  }

  render() {
    return `<div>Прошло секунд: ${this.seconds}</div>`;
  }
});

Выводы по жизненному циклу:

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

Методы и привязка контекста

В Slim.js методы компонентов автоматически связываются с контекстом this, поэтому не требуется ручная привязка через .bind(this). Это упрощает работу с обработчиками событий и внутренними функциями компонента.

Slim.tag('toggle-component', class extends Slim {

  constructor() {
    super();
    this.active = false;
  }

  toggle() {
    this.active = !this.active;
    this.update();
  }

  render() {
    return `
      <button oncl ick="${this.toggle}">
        ${this.active ? 'Включено' : 'Выключено'}
      </button>
    `;
  }
});

Особенности привязки:

  • Методы доступны во всех частях компонента через this.
  • Привязка контекста происходит автоматически, исключая ошибки при вызове методов из DOM.

Взаимодействие методов между компонентами

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

Пример вызова метода дочернего компонента:

Slim.tag('parent-component', class extends Slim {

  callChildMethod() {
    this.querySelector('child-component').childMethod();
  }

  render() {
    return `
      <child-component></child-component>
      <button oncl ick="${this.callChildMethod}">Вызвать метод ребенка</button>
    `;
  }
});

Slim.tag('child-component', class extends Slim {

  childMethod() {
    console.log('Метод дочернего компонента вызван');
  }

  render() {
    return `<div>Дочерний компонент</div>`;
  }
});

Рекомендации по взаимодействию:

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

Асинхронные методы

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

Slim.tag('fetch-component', class extends Slim {

  constructor() {
    super();
    this.data = null;
  }

  async loadData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    this.data = await response.json();
    this.update();
  }

  onCreated() {
    this.loadData();
  }

  render() {
    return this.data
      ? `<div>Загруженные данные: ${this.data.title}</div>`
      : `<div>Загрузка...</div>`;
  }
});

Особенности асинхронных методов:

  • async/await полностью поддерживается.
  • После изменения состояния компонента необходимо вызывать this.update().

Итоговое понимание методов в Slim.js

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

Методы могут быть:

  • Пользовательскими — для действий и логики компонента.
  • Жизненного цикла — для контроля состояния и ресурсов.
  • Асинхронными — для работы с API и задержками.
  • Взаимодействующими с другими компонентами — через события или прямые вызовы.

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

Оглавление