Добавление опций в веб-компонент

Наш веб-компонент

Вчера мы создали веб-компонент <wc-count>. Когда кто-то кликает на элемент <button>, веб-компонент отслеживает количество кликов и обновляет текст с текущим количеством.

<wc-count>
  <button>Clicked 0 Times</button>
</wc-count>

Давайте добавим несколько опций, позволяющих пользователям настраивать его работу, включая…

• Начало отсчёта с числа, отличного от 0
• Увеличение числа более чем на 1
• Настройка текста кнопки

Настройка веб-компонентов с помощью атрибутов

В традиционной библиотеке JavaScript настройки и параметры передаются в виде объекта опций…

new Counter('#my-button', {
  start: 42,
  step: 5,
  text: 'Press Me - {{count}}'
});

В веб-компоненте эти параметры предоставляются в виде атрибутов элемента веб-компонента.

<wc-count start="42" step="5" text="Press Me - {{count}}">
  <button>Clicked 0 Times</button>
</wc-count>

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

Не нужно многократно инициализировать библиотеку с разными настройками или вообще инстанцировать её. Также не нужно придумывать настраиваемые селекторы для каждого элемента.

Процесс разработки намного приятнее, и на основе одного только HTML сразу понятно, какие параметры у элемента и что он будет делать.

Сохранение настроек в виде свойств веб-компонента

Внутри метода constructor() сначала обновим свойство this.count.

Используем метод Element.getAttribute(), для получения атрибута [start]. Он возвращает строку, поэтому передадим её в метод parseFloat(), для преобразования в число.

Присвоим это значение свойству this.count, но если значение не указано, то установим его равным 0.

/**
 * Конструктор класса
 */
constructor () {

  // Всегда вызывайте super первым в конструкторе
  super();

  // Свойства экземпляра
  this.button = this.querySelector('button');
  this.count = parseFloat(this.getAttribute('start')) || 0;

  // Прослушивание события click
  this.button.addEventListener('click', this);

  // Объявление об обновлении UI
  this.button.setAttribute('aria-live', 'polite');

}

То же самое сделаем для атрибута [step] и присвоим его свойству this.step.

Также получим атрибут [text], если он существует, то присвоим его this.text. Если нет, используем текст по умолчанию. Кроме того, включим строку {{count}}, служащую переменной, которую можно заменить на фактический счётчик.

// Свойства экземпляра
this.button = this.querySelector('button');
this.count = parseFloat(this.getAttribute('start')) || 0;
this.step = parseFloat(this.getAttribute('step')) || 1;
this.text = this.getAttribute('text') || 'Clicked {{count}} Times';

Использование настроек

Теперь, когда есть пользовательские опции, можно использовать их в веб-компоненте.

Внутри метода handlEvent() заменим this.count++ на код, добавляющий this.step к this.count.

/**
 * Обработка событий
 * @param  {Event} event Объект события
 */
handleEvent (event) {
  this.count = this.count + this.step;
  this.button.textContent = `Clicked ${this.count} Times`;
}

Также воспользуемся методом String.prototype.replace(), чтобы заменить {{count}} в this.text на this.count, и отрендерим его в this.button.

/**
 * Обработка событий
 * @param  {Event} event Объект события
 */
handleEvent (event) {
  this.count = this.count + this.step;
  this.button.textContent = this.text.replace('{{count}}', this.count);
}

Теперь пользователи могут создавать разные типы кнопок-счётчиков с разными параметрами, и они будут вести себя по-разному.

See the Pen

Все статьи серии о Веб-Компонентах/Web Component

• Ваш первый веб-компонент
• Добавление опций в веб-компонент
• Улучшение веб-компонента
• Различные способы инстанцирования веб-компонента
• Методы жизненного цикла веб-компонента
• Как обнаружить изменение атрибутов веб-компонента
• Как заставить веб-компоненты общаться (часть 1)
• Как заставить веб-компоненты общаться (часть 2)