Переход с jQuery на Bliss

Bliss.js — это лёгкая библиотека для работы с DOM, предназначенная для упрощения повседневных задач, которые ранее решались с помощью jQuery. Она минималистична, но при этом предлагает удобный синтаксис для манипуляций с элементами, событий и Ajax-запросов. В отличие от jQuery, Bliss не внедряет глобальные объекты и работает напрямую с нативными методами браузера, сохраняя чистоту кода и высокую производительность.

Основная идея Bliss заключается в обёртке над стандартным DOM, которая добавляет удобные методы без дублирования функциональности браузера.

Выбор элементов и обход коллекций

В Bliss.js выбор элементов осуществляется через функцию $ для одиночных элементов и $$ для коллекций:

var button = $('#submit');   // одиночный элемент
var items = $$('.list-item'); // коллекция элементов

Методы $ и $$ возвращают настоящие DOM-элементы, а не собственные объекты, как в jQuery. Это означает, что для большинства операций можно использовать стандартные методы DOM, дополненные методами Bliss.

Примеры обхода коллекций:

$$('.list-item').forEach(function(item) {
    item.classList.add('highlighted');
});

Bliss не перегружает нативные методы, поэтому методы коллекций совместимы с forEach, map и другими стандартными функциями массивов.

Работа с классами и атрибутами

Bliss.js добавляет методы для удобного управления классами и атрибутами:

var element = $('#box');

// Добавление и удаление классов
element.addClass('active');
element.removeClass('hidden');
element.toggleClass('selected');

// Работа с атрибутами
element.setAttr('data-id', '123');
var id = element.getAttr('data-id');
element.removeAttr('data-temp');

Ключевой момент: методы addClass, removeClass, toggleClass — это обёртки над classList, а setAttr, getAttr, removeAttr — над стандартными setAttribute, getAttribute, removeAttribute.

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

События в Bliss.js обрабатываются через методы on, off и once.

var button = $('#submit');

button.on('click', function(event) {
    console.log('Клик по кнопке');
});

button.once('mouseenter', function() {
    console.log('Событие выполнится только один раз');
});

button.off('click'); // удаление обработчика

Для коллекций событий можно назначать одним вызовом:

$$('.list-item').on('mouseover', function() {
    this.classList.add('hovered');
});

В отличие от jQuery, Bliss не использует делегирование по умолчанию. Для делегирования применяется метод delegate:

$('#container').delegate('.item', 'click', function() {
    console.log('Нажат элемент внутри контейнера');
});

Манипуляции с DOM

Bliss предоставляет удобные методы для вставки и удаления элементов:

var newDiv = document.createElement('div');

// Вставка элементов
$('#container').append(newDiv);       // добавление внутрь контейнера
$('#container').prepend(newDiv);      // добавление в начало
$('#container').before(newDiv);       // вставка перед контейнером
$('#container').after(newDiv);        // вставка после контейнера

// Удаление элементов
newDiv.remove();

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

Работа с содержимым

Bliss.js упрощает работу с текстом и HTML:

var content = $('#content');

// Чтение и запись текста
content.text('Новый текст');

// Чтение и запись HTML
content.html('<strong>Выделенный текст</strong>');

Отличие от jQuery заключается в том, что возвращаемые значения — это чистые строки, а не обёрнутые объекты.

Ajax и загрузка данных

Bliss.js предоставляет минималистичный метод fetch, упрощающий отправку запросов:

$.fetch('/api/data', {
    method: 'GET',
    json: true
}).then(function(data) {
    console.log('Полученные данные:', data);
}).catch(function(error) {
    console.error('Ошибка запроса', error);
});

Важные особенности:

  • Bliss использует нативный fetch, поэтому поддержка старых браузеров через полифиллы возможна, но не встроена.
  • Параметр json: true автоматически преобразует ответ в объект.
  • Можно передавать headers, body и другие опции, как в стандартном fetch.

Работа с атрибутами данных и пользовательскими свойствами

Bliss упрощает работу с data-* атрибутами через методы data и removeData:

var elem = $('#item');
elem.data('id', 42);          // установка
var id = elem.data('id');      // чтение
elem.removeData('id');         // удаление

Методы представляют собой удобный синтаксис для dataset, сохраняя нативную совместимость:

elem.dataset.id = 42;
var id = elem.dataset.id;
delete elem.dataset.id;

Анимации и эффекты

Bliss не имеет встроенных сложных анимаций, но добавление классов и CSS-переходов делает анимации простыми и гибкими:

var box = $('#box');
box.addClass('fade-in'); // предполагается, что CSS содержит transition/animation

Для последовательного управления анимациями используются коллбэки событий transitionend или animationend:

box.on('transitionend', function() {
    console.log('Анимация завершена');
});

Такой подход полностью контролируется через CSS и события, без необходимости применять громоздкие JS-эффекты, как в jQuery.

Преимущества перехода с jQuery на Bliss

  1. Лёгкость и производительность — нет обёртки над всем документом, минимальный вес библиотеки.
  2. Совместимость с нативным DOM — методы Bliss расширяют стандартный API, не заменяя его.
  3. Чистый синтаксис — нет конфликтов с другими библиотеками, использование $ и $$ не создает глобальных объектов.
  4. Простая работа с коллекциями — совместимость с массивными методами forEach, map, filter.
  5. Современный подход — отказ от устаревших конструкций jQuery, таких как $.ajax, $.bind, $.delegate с поддержкой нативного fetch и addEventListener.

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

Оглавление