Сравнение с jQuery и vanilla JavaScript

Bliss.js — это лёгкая библиотека для работы с DOM, упрощающая манипуляции с элементами страницы, событиями и AJAX. Она сочетает удобство jQuery с минимализмом vanilla JavaScript. Базовые операции включают выбор элементов, добавление обработчиков событий и управление атрибутами.

// Выбор элементов
var buttons = Bliss.$$('.button');

// Добавление обработчика события
Bliss.$$('.button').on('click', function(event) {
    console.log('Кнопка нажата', event.target);
});

// Изменение атрибутов и классов
Bliss.$('.header').addClass('active').attr('data-state', 'opened');

Основная концепция Bliss.js — цепочки методов и работа с NodeList так же, как с коллекциями jQuery. Это позволяет писать компактный и читаемый код.

Сравнение синтаксиса с jQuery

Выбор элементов:

  • jQuery: $('.button') возвращает объект jQuery.
  • Bliss.js: Bliss.$$('.button') возвращает NodeList с расширенными методами.
  • Vanilla JS: document.querySelectorAll('.button') возвращает NodeList без дополнительных методов.

Добавление события:

// jQuery
$('.button').on('click', handler);

// Bliss.js
Bliss.$$('.button').on('click', handler);

// Vanilla JS
document.querySelectorAll('.button').forEach(el => el.addEventListener('click', handler));

Изменение классов:

// jQuery
$('.header').addClass('active').removeClass('inactive');

// Bliss.js
Bliss.$('.header').addClass('active').removeClass('inactive');

// Vanilla JS
document.querySelector('.header').classList.add('active');
document.querySelector('.header').classList.remove('inactive');

Bliss.js обеспечивает API, максимально близкое к jQuery, но без обертки всего DOM в отдельный объект. NodeList остаётся нативным, что снижает накладные расходы.

Работа с атрибутами и свойствами

Bliss.js упрощает доступ к атрибутам, свойствам и стилям:

// Установка атрибутов
Bliss.$('.image').attr('src', 'image.png');

// Получение атрибутов
var src = Bliss.$('.image').attr('src');

// Работа с CSS
Bliss.$('.box').css({
    width: '100px',
    height: '50px',
    backgroundColor: 'red'
});

Vanilla JavaScript требует более явного кода:

var img = document.querySelector('.image');
img.setAttribute('src', 'image.png');

var box = document.querySelector('.box');
box.style.width = '100px';
box.style.height = '50px';
box.style.backgroundColor = 'red';

Bliss.js объединяет операции в цепочки, сокращая код и повышая читаемость.

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

Bliss.js включает лёгкий API для AJAX:

Bliss.ajax('/api/data', { method: 'GET' })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

В jQuery используется:

$.ajax({
    url: '/api/data',
    method: 'GET',
    success: function(data) { console.log(data); },
    error: function(err) { console.error(err); }
});

Vanilla JS с Fetch API:

fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

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

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

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

var newDiv = Bliss.create('div', { class: 'new', text: 'Привет' });
Bliss.$('.container').append(newDiv);

Vanilla JS:

var newDiv = document.createElement('div');
newDiv.className = 'new';
newDiv.textContent = 'Привет';
document.querySelector('.container').appendChild(newDiv);

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

События и делегирование

Bliss.js поддерживает делегирование:

Bliss.$('.list').on('click', 'li', function(event) {
    console.log('Элемент списка', event.target);
});

Vanilla JS требует отдельного обработчика:

document.querySelector('.list').addEventListener('click', function(event) {
    if(event.target.tagName === 'LI') {
        console.log('Элемент списка', event.target);
    }
});

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

Сравнительная таблица

Операция Bliss.js jQuery Vanilla JS
Выбор элементов Bliss.$$('.btn') $('.btn') document.querySelectorAll('.btn')
Добавление события .on('click', handler) .on('click', handler) addEventListener('click', handler)
Классы .addClass('active') .addClass('active') classList.add('active')
Атрибуты .attr('src', 'img.png') .attr('src', 'img.png') setAttribute('src', 'img.png')
CSS .css({ width:'100px' }) .css({ width:'100px' }) style.width='100px'
AJAX Bliss.ajax(url) $.ajax(url) fetch(url)
Делегирование событий .on('click', 'li', handler) .on('click', 'li', handler) addEventListener + проверка target
Создание элементов Bliss.create('div', {...}) $('<div/>', {...}) document.createElement('div')

Bliss.js сочетает преимущества jQuery (цепочки, удобный синтаксис) с нативной производительностью и совместимостью, оставаясь ближе к чистому JavaScript, что делает библиотеку оптимальной для современных проектов.

Оглавление