Интеграция с Web Components

Библиотека Cash представляет собой облегчённый аналог jQuery, предоставляющий удобный API для работы с DOM, событиями, AJAX-запросами и анимацией. В контексте Web Components Cash позволяет эффективно манипулировать внутренней структурой кастомных элементов без необходимости использования громоздких решений или стандартного querySelector на каждом шаге.

Работа с Shadow DOM

Одной из ключевых особенностей Web Components является Shadow DOM, который инкапсулирует структуру и стили элемента. Cash по умолчанию работает с глобальным DOM, поэтому для доступа к элементам внутри Shadow DOM требуется передать root node в качестве контекста:

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button id="btn">Нажми меня</button>
      <div id="output"></div>
    `;
  }

  connectedCallback() {
    const $btn = cash('#btn', this.shadowRoot);
    const $output = cash('#output', this.shadowRoot);

    $btn.on('click', () => {
      $output.text('Кнопка нажата');
    });
  }
}

customElements.define('my-component', MyComponent);

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

  • Второй аргумент $() позволяет задать корень поиска элементов, что необходимо для Shadow DOM.
  • Cash сохраняет привычный цепочечный API, что упрощает манипуляции внутри компонента.

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

Cash предоставляет методы .on(), .off() и .trigger(), которые интегрируются с событиями кастомных элементов. В Web Components часто применяются кастомные события, которые удобно создавать и слушать через Cash:

class CounterComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button id="increment">+</button>
      <span id="count">0</span>
    `;
  }

  connectedCallback() {
    const $btn = cash('#increment', this.shadowRoot);
    const $count = cash('#count', this.shadowRoot);

    $btn.on('click', () => {
      const current = parseInt($count.text(), 10) + 1;
      $count.text(current);
      this.dispatchEvent(new CustomEvent('count-changed', { detail: { value: current } }));
    });
  }
}

customElements.define('counter-component', CounterComponent);

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

  • Cash облегчает привязку обработчиков событий к элементам внутри Shadow DOM.
  • Для передачи данных через кастомные события можно использовать объект detail.
  • Cash поддерживает множественные обработчики и удаление через .off(), что предотвращает утечки памяти.

Манипуляции с атрибутами и свойствами

В Web Components атрибуты и свойства могут управлять состоянием элемента. Cash предоставляет методы .attr(), .prop() и .data() для упрощённого доступа:

const $component = cash('my-component');

// Установка атрибута
$component.attr('disabled', true);

// Получение атрибута
const isDisabled = $component.attr('disabled');

// Работа с пользовательскими данными
$component.data('role', 'admin');
const role = $component.data('role');

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

  • .attr() работает с любыми HTML-атрибутами, включая стандартные и кастомные.
  • .data() позволяет хранить данные напрямую на DOM-элементе без необходимости создавать отдельные свойства.

Анимации и эффекты внутри компонентов

Cash поддерживает простые анимации через методы .hide(), .show(), .fadeIn(), .fadeOut() и .toggle(). В контексте Web Components это позволяет создавать интерактивные элементы без внешних библиотек:

class FadeComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button id="toggle">Показать/Скрыть</button>
      <div id="box" style="width:100px;height:100px;background:red;"></div>
    `;
  }

  connectedCallback() {
    const $btn = cash('#toggle', this.shadowRoot);
    const $box = cash('#box', this.shadowRoot);

    $btn.on('click', () => {
      $box.fadeToggle(500);
    });
  }
}

customElements.define('fade-component', FadeComponent);

Примечания:

  • Методы анимации Cash используют requestAnimationFrame и CSS-свойства для плавности.
  • Можно управлять временем анимации, создавая кастомные переходы для компонентов.

AJAX и взаимодействие с сервером

Cash включает методы для выполнения AJAX-запросов ($.ajax, $.get, $.post), что позволяет компонентам быть полностью автономными и динамическими:

class UserList extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<ul id="users"></ul>`;
  }

  connectedCallback() {
    const $list = cash('#users', this.shadowRoot);

    cash.ajax({
      url: 'https://jsonplaceholder.typicode.com/users',
      method: 'GET',
      success: (data) => {
        data.forEach(user => {
          $list.append(`<li>${user.name}</li>`);
        });
      },
      error: (err) => console.error(err)
    });
  }
}

customElements.define('user-list', UserList);

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

  • AJAX-запросы выполняются в контексте компонента, что позволяет легко обновлять внутренний DOM.
  • Методы Cash возвращают цепочку объектов для дальнейшей обработки и управления элементами.

Динамическое создание элементов

Cash позволяет создавать элементы на лету и внедрять их в Shadow DOM:

const $newButton = cash('<button>Новый элемент</button>');
$newButton.on('click', () => console.log('Кнопка создана динамически'));
cash(this.shadowRoot).append($newButton);
  • Можно создавать целые шаблоны элементов с вложенной структурой.
  • Обработчики событий автоматически привязываются к созданным элементам через Cash.

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

Cash легко интегрируется с методами connectedCallback, disconnectedCallback и attributeChangedCallback:

  • В connectedCallback выполняются операции по инициализации DOM и событий.
  • В disconnectedCallback можно использовать .off() для очистки событий и предотвращения утечек памяти.
  • В attributeChangedCallback удобно обновлять внутренние элементы при изменении атрибутов через Cash.

Использование Cash внутри Web Components обеспечивает компактный, понятный и производительный код, позволяя работать с Shadow DOM, событиями, AJAX и динамическими элементами, сохраняя при этом привычный jQuery-подобный API.

Оглавление