Что такое Bliss.js

Bliss.js — это легковесная JavaScript-библиотека, ориентированная на упрощение работы с DOM, событиями, AJAX-запросами и утилитами для обработки данных. Она сочетает в себе функциональность jQuery с минималистичным API, сохраняя при этом высокую производительность и совместимость с современными браузерами.

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

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

Bliss.js позволяет легко находить и модифицировать элементы. Основные функции:

  • Выбор элементов
var button = bliss.$('.my-button'); // Первый элемент с классом
var items = bliss.$$('.item');      // Все элементы с классом

$ возвращает первый элемент, а $$ — коллекцию элементов.

  • Манипуляция классами
button.addClass('active');
button.removeClass('disabled');
button.toggleClass('hidden');

Эти методы работают напрямую с classList, упрощая добавление и удаление классов без явных проверок.

  • Работа с атрибутами
button.attr('data-id', 42);       // Установка атрибута
var id = button.attr('data-id');  // Чтение атрибута
button.removeAttr('disabled');    // Удаление атрибута

Bliss.js объединяет чтение и запись атрибутов в один метод attr, что делает код компактным.

  • Стили
button.css('color', 'red');       // Установка CSS-свойства
var color = button.css('color');  // Чтение CSS-свойства

Метод css поддерживает как одиночные свойства, так и объектные записи для множественных стилей.

События

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

  • Привязка и удаление событий
button.on('click', function(event) {
    console.log('Нажата кнопка');
});

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

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

  • Упрощённая работа с событиями
button.on('mouseenter mouseleave', function() {
    this.toggleClass('hover');
});

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

AJAX и работа с данными

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

bliss.ajax({
    url: '/api/data',
    method: 'GET',
    success: function(response) {
        console.log('Данные получены', response);
    },
    error: function(err) {
        console.error('Ошибка запроса', err);
    }
});

Параметры success и error позволяют сразу обработать ответ, без необходимости вручную создавать XMLHttpRequest.

Дополнительно поддерживаются методы GET и POST с передачей данных в виде объекта:

bliss.post('/api/save', {name: 'Alice', age: 25});

Bliss автоматически сериализует объект в application/x-www-form-urlencoded или JSON, в зависимости от настроек.

Утилиты для работы с массивами и объектами

Библиотека содержит функции для упрощённой обработки коллекций:

  • Итерация
bliss.each([1,2,3], function(value, index) {
    console.log(index, value);
});
  • Фильтрация и поиск
var result = bliss.filter([1,2,3,4], function(n) { return n % 2 === 0; }); // [2,4]
var found = bliss.find([1,2,3], function(n) { return n > 1; }); // 2
  • Расширение объектов
var obj = bliss.extend({a:1}, {b:2}, {c:3}); // {a:1,b:2,c:3}

Метод extend объединяет несколько объектов, копируя свойства в первый объект.

Работа с DOM-фрагментами

Bliss.js упрощает создание и вставку новых элементов:

var div = bliss.create('div', {
    class: 'box',
    html: 'Привет, Bliss!'
});

document.body.appendChild(div);

Метод create поддерживает передачу атрибутов, классов, текста и HTML-содержимого, а также вложенные структуры:

var list = bliss.create('ul', {
    html: [
        bliss.create('li', {html: 'Элемент 1'}),
        bliss.create('li', {html: 'Элемент 2'})
    ]
});

Совместимость и производительность

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

  • Минимальный размер библиотеки
  • Высокую скорость выполнения операций с DOM
  • Простую интеграцию с другими библиотеками и фреймворками

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

Особенности и отличия от jQuery

  • Лёгкость: Bliss занимает меньше места и не включает устаревшие функции jQuery.
  • Прямой доступ к элементам: Методы возвращают реальные DOM-элементы, а не обёртки, что уменьшает накладные расходы.
  • Современные методы: Использование classList, querySelectorAll, fetch и других современных API.
  • Читаемость кода: Сокращённые методы и единообразный синтаксис делают код компактным и понятным.

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

Оглавление