Первый компонент на Slim.js

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

class MyComponent extends Slim {
  constructor() {
    super();
    this.message = "Привет, Slim.js!";
  }
  
  get template() {
    return `<p>{this.message}</p>`;
  }
}

Slim.tag('my-component', MyComponent);

В этом примере создается компонент my-component, который отображает текст, хранящийся в свойстве message.

Структура компонента

1. Наследование от Slim Каждый компонент создается путем наследования от базового класса Slim. Это обеспечивает доступ к реактивным свойствам, методам жизненного цикла и возможности автоматически обновлять DOM при изменении данных.

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

3. Шаблон (template) Шаблон — это геттер, который возвращает HTML-код с привязкой к свойствам компонента. Синтаксис {this.propertyName} позволяет автоматически обновлять DOM при изменении значения свойства.

Реактивные свойства

Любое свойство, использованное в шаблоне через {this.property}, автоматически становится реактивным. При изменении его значения DOM обновляется без необходимости ручного вызова рендеринга.

class CounterComponent extends Slim {
  constructor() {
    super();
    this.count = 0;
  }

  increment() {
    this.count += 1;
  }

  get template() {
    return `
      <div>
        <p>Счётчик: {this.count}</p>
        <button oncl ick="{this.increment}">Увеличить</button>
      </div>
    `;
  }
}

Slim.tag('counter-component', CounterComponent);

Метод increment изменяет значение count, и элемент <p> автоматически обновляется благодаря реактивной привязке.

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

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

  • onBeforeCreated() — вызывается перед инициализацией компонента.
  • onCreated() — вызывается сразу после создания элемента.
  • onBeforeUpdate() — вызывается перед обновлением DOM.
  • onUpdated() — вызывается после обновления DOM.
  • onBeforeDestroyed() — вызывается перед удалением компонента.
  • onDestroyed() — вызывается после удаления компонента.

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

class LifecycleComponent extends Slim {
  constructor() {
    super();
    this.status = "Создан";
  }

  onCreated() {
    console.log("Компонент создан");
  }

  onUpdated() {
    console.log("Компонент обновлен, статус:", this.status);
  }

  get template() {
    return `<p>{this.status}</p>`;
  }
}

Slim.tag('lifecycle-component', LifecycleComponent);

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

Slim.js позволяет привязывать события напрямую к методам компонента через атрибуты HTML, используя синтаксис {this.methodName}.

class ClickComponent extends Slim {
  constructor() {
    super();
    this.clicked = false;
  }

  handleClick() {
    this.clicked = !this.clicked;
  }

  get template() {
    return `
      <button oncl ick="{this.handleClick}">
        {this.clicked ? 'Нажато' : 'Не нажато'}
      </button>
    `;
  }
}

Slim.tag('click-component', ClickComponent);

Состояние кнопки изменяется при каждом клике благодаря реактивной привязке.

Работа с вложенными компонентами

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

class ParentComponent extends Slim {
  get template() {
    return `
      <div>
        <h2>Родительский компонент</h2>
        <child-component></child-component>
      </div>
    `;
  }
}

class ChildComponent extends Slim {
  get template() {
    return `<p>Дочерний компонент</p>`;
  }
}

Slim.tag('parent-component', ParentComponent);
Slim.tag('child-component', ChildComponent);

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

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

Компоненты можно стилизовать через стандартные CSS или встроенные <style> внутри шаблона:

class StyledComponent extends Slim {
  get template() {
    return `
      <style>
        p { color: blue; font-weight: bold; }
      </style>
      <p>Стилизованный текст</p>
    `;
  }
}

Slim.tag('styled-component', StyledComponent);

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

Итоговое понимание

Первый компонент в Slim.js строится вокруг:

  • Наследования от Slim
  • Инициализации реактивных свойств в конструкторе
  • Определения шаблона через геттер template
  • Реактивного обновления DOM при изменении свойств
  • Обработки событий и использования методов жизненного цикла
  • Возможности встраивания дочерних компонентов и стилизации

Это обеспечивает мощный, при этом компактный, инструмент для построения веб-интерфейсов с четкой архитектурой и минимальным объемом кода.

Оглавление