Использование с Vue

Bliss.js — это лёгкая библиотека для работы с DOM и событийной моделью в JavaScript, оптимизированная для минимизации шаблонного кода. При использовании с Vue она не заменяет реактивность фреймворка, но позволяет выполнять низкоуровневые манипуляции с элементами DOM, обходясь без прямого обращения к ref или querySelector в сложных случаях.

Установка производится через npm:

npm install bliss-js

Подключение в проекте Vue осуществляется стандартным образом:

import Bliss from 'bliss-js';

Вариант использования через глобальный объект Vue возможен через плагин:

import Bliss from 'bliss-js';

export default {
  install(app) {
    app.config.globalProperties.$bliss = Bliss;
  }
}

После этого любой компонент Vue может обращаться к методам Bliss через this.$bliss.

Работа с DOM-элементами

Bliss.js предоставляет удобные методы для работы с элементами DOM, аналогичные нативным методам, но с синтаксисом, упрощающим цепочки операций.

Примеры основных методов:

  • Bliss.$(selector) — возвращает первый элемент, соответствующий селектору.
  • Bliss.$$(selector) — возвращает массив всех элементов, соответствующих селектору.
  • Bliss.addClass(element, className) — добавление класса.
  • Bliss.removeClass(element, className) — удаление класса.
  • Bliss.toggleClass(element, className) — переключение класса.
  • Bliss.attr(element, attribute, value) — установка атрибута.
  • Bliss.on(element, event, handler) — добавление обработчика события.
  • Bliss.off(element, event, handler) — удаление обработчика события.

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

import Bliss from 'bliss-js';

export default {
  mounted() {
    const button = Bliss.$('#my-button');
    Bliss.on(button, 'click', () => {
      Bliss.toggleClass(button, 'active');
    });
  }
}

Здесь mounted() гарантирует, что элемент существует в DOM, что важно для корректной работы методов Bliss.

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

Bliss позволяет работать с атрибутами и стилями элементов в цепочках, упрощая код по сравнению с нативным DOM API.

const box = Bliss.$('#box');
Bliss.attr(box, 'data-state', 'expanded');
Bliss.css(box, {
  width: '200px',
  height: '200px',
  backgroundColor: '#f0f0f0'
});

Метод Bliss.css() принимает объект с ключами CSS-свойств. Это упрощает одновременную установку нескольких стилей без необходимости по отдельности присваивать каждое свойство через element.style.

Работа с событиями

Bliss.js упрощает делегирование событий и их управление. Основная модель — это добавление и удаление обработчиков с минимальной обвязкой.

const list = Bliss.$('#list');
Bliss.on(list, 'click', 'li', (event) => {
  const item = event.target;
  Bliss.toggleClass(item, 'selected');
});

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

Удаление обработчика:

const handler = (event) => console.log(event.target);
Bliss.on(list, 'click', handler);
Bliss.off(list, 'click', handler);

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

Использование с реактивными данными Vue

Bliss.js хорошо сочетается с реактивными переменными Vue, особенно для манипуляций с классами и атрибутами в зависимости от состояния компонента.

import { ref, watch } from 'vue';
import Bliss from 'bliss-js';

export default {
  setup() {
    const isActive = ref(false);

    watch(isActive, (newValue) => {
      const element = Bliss.$('#toggle-element');
      if (newValue) {
        Bliss.addClass(element, 'active');
      } else {
        Bliss.removeClass(element, 'active');
      }
    });

    return { isActive };
  }
}

Такой подход объединяет реактивность Vue и удобные методы работы с DOM от Bliss, минимизируя прямое использование document.querySelector.

Асинхронные операции и эффекты

Bliss.js можно использовать совместно с асинхронными событиями, например, для обработки сетевых запросов, анимаций или таймеров.

import Bliss from 'bliss-js';

export default {
  async mounted() {
    const button = Bliss.$('#fetch-button');
    Bliss.on(button, 'click', async () => {
      const data = await fetch('/api/data').then(res => res.json());
      const container = Bliss.$('#container');
      Bliss.html(container, JSON.stringify(data, null, 2));
    });
  }
}

Метод Bliss.html(element, content) заменяет внутреннее содержимое элемента и автоматически работает с безопасной подстановкой текста.

Интеграция с Vue transitions и анимациями

Bliss.js позволяет добавлять и удалять классы, необходимые для CSS-анимаций и Vue transition. Это удобно для сложных сценариев, где стандартные директивы Vue недостаточны:

import Bliss from 'bliss-js';

export default {
  mounted() {
    const modal = Bliss.$('#modal');
    Bliss.on(Bliss.$('#open-modal'), 'click', () => {
      Bliss.addClass(modal, 'fade-in');
      setTimeout(() => Bliss.removeClass(modal, 'fade-in'), 300);
    });
  }
}

Такой подход позволяет тонко контролировать временные интервалы и последовательность анимаций, сохраняя интеграцию с реактивной моделью Vue.

Организация компонентов с Bliss.js

Bliss хорошо подходит для небольших вспомогательных компонентов, где требуется прямое управление DOM без полной зависимости от Vue ref и v-bind. Использование методов Bliss сокращает объем кода и делает компоненты более декларативными по структуре DOM, при этом не нарушая реактивность Vue.

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

Оглавление