Первая программа на Bliss.js

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

Подключение библиотеки

Для использования Bliss.js достаточно добавить ссылку на библиотеку в HTML-файл:

<script src="https://cdn.jsdelivr.net/npm/blissfuljs@1.0.0/bliss.min.js"></script>

После этого глобальная переменная Bliss (или короткий $) становится доступной для работы с DOM:

const $ = Bliss;

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

Bliss.js позволяет быстро создавать элементы и добавлять их в DOM. Метод $.create() принимает имя тега и объект с атрибутами:

const button = $.create('button', {
    textContent: 'Нажми меня',
    className: 'btn-primary',
    onclick: () => alert('Кнопка нажата')
});

document.body.appendChild(button);

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

  • textContent задаёт текст внутри элемента.
  • className позволяет присвоить CSS-класс.
  • Любые события можно передавать через свойства объекта (onclick, onmouseover и т.д.).

Выбор элементов и манипуляции с ними

Выбор элементов осуществляется через метод $(), который принимает CSS-селектор:

const div = $('.container');

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

div.addClass('active');       // добавление класса
div.removeClass('hidden');    // удаление класса
div.toggleClass('highlight'); // переключение класса
div.html('<p>Новый контент</p>'); // замена HTML-контента
div.text('Простой текст');       // изменение текстового содержимого

Особенности работы с коллекциями:

  • Методы addClass, removeClass, toggleClass применяются ко всем элементам коллекции.
  • Для работы с конкретным элементом можно использовать div[0].

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

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

const input = $('#input-field');
input.on('input', e => console.log(e.target.value));
input.on('focus', () => input.addClass('focused'));
input.on('blur', () => input.removeClass('focused'));

Метод off позволяет удалить обработчики:

input.off('input');

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

$('.list').on('click', 'li', e => {
    console.log('Элемент списка:', e.target.textContent);
});

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

Bliss.js включает методы для плавного показа и скрытия элементов:

const box = $('.box');
box.fadeIn(500);  // плавное появление за 500 мс
box.fadeOut(300); // плавное исчезновение за 300 мс

Методы изменения стилей:

box.css({
    backgroundColor: 'blue',
    width: '200px',
    height: '100px'
});

Также можно использовать метод animate для создания кастомных анимаций:

box.animate({ left: '300px', opacity: 0.5 }, 1000, 'ease-in-out');
  • Первый аргумент — объект CSS-свойств.
  • Второй — длительность в миллисекундах.
  • Третий — функция тайминга анимации.

Работа с атрибутами и данными

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

const link = $('a');
link.attr('href', 'https://example.com');  // установка атрибута
console.log(link.attr('href'));            // получение атрибута
link.removeAttr('target');                 // удаление атрибута

Для хранения пользовательских данных используется data:

link.data('id', 123);
console.log(link.data('id')); // 123

AJAX-запросы

Bliss.js содержит упрощённый API для AJAX:

$.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts',
    method: 'GET',
    success: data => console.log(data),
    error: err => console.error(err)
});

Параметры метода $.ajax:

  • url — адрес запроса.
  • method — HTTP-метод.
  • data — данные для отправки (если POST).
  • success — коллбэк при успешном ответе.
  • error — обработка ошибок.

Первая программа на Bliss.js

Простейший пример объединяет создание элементов, обработку событий и анимацию:

const container = $.create('div', { className: 'container' });
document.body.appendChild(container);

const btn = $.create('button', {
    textContent: 'Показать блок',
    className: 'btn'
});
container.appendChild(btn);

const box = $.create('div', {
    className: 'box',
    css: { width: '100px', height: '100px', backgroundColor: 'red', display: 'none' }
});
container.appendChild(box);

btn.on('click', () => box.fadeIn(400));

В этом примере:

  • Создан контейнер и кнопка.
  • Создан блок div с красным фоном и скрыт по умолчанию.
  • При клике на кнопку блок плавно появляется с помощью fadeIn.

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

Оглавление