JavaScript компоненты — Введение

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

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

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

Текущая ситуация с веб-компонентами

Спецификация веб-компонентов находится в разработке, но пока не завершена и требует полифилов. Текущая реализация использует синтаксис ES6, что усложняет работу с прототипами.

Рынок переполнен фреймворками (React JS, Vue), что создаёт проблемы с избыточной сложностью и размером бандла. Самый мощный фреймворк JavaScript — это сам JavaScript.

Создание простого компонента

Пример базового компонента, использующего объектную литеральную нотацию без конструктора new и применяющего принципы паттерна factory:

const Button = {
  tagName: 'btn',
  init(btn) {
    btn.addEventListener('click', () => {
      btn.textContent++;
    });
  },

  getAll(container = document.body) {
    return container.getElementsByTagName(this.tagName);
  }
};

Методы получают DOM-элемент первым аргументом. На протяжении более 10 лет компоненты создавались как jQuery-плагины или автономные виджеты — простые объекты и функции JavaScript. Разработчики импортировали файл и вызывали метод init().

Решение: Mutation Observer

Вместо слушания DOM-событий используется современный API Mutation Observer, поддерживаемый всеми современными браузерами, включая IE11.

Возможно инициализировать один MutationObserver для отслеживания всего document.body и регистрировать обработчики для добавления тегов в DOM. Это позволяет вызывать init() и deinit() автоматически при изменении DOM.