Переход с vanilla JS на Bliss

Bliss.js представляет собой лёгкую и мощную библиотеку для работы с DOM в JavaScript, обеспечивая удобный синтаксис для манипуляций с элементами, событиями и AJAX-запросами. В отличие от vanilla JS, Bliss.js минимизирует количество кода и делает его более читаемым, сохраняя при этом высокую производительность.

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

В vanilla JS для получения элементов часто используются методы document.querySelector или document.getElementById. В Bliss.js выборка упрощается за счёт использования функции $, которая поддерживает CSS-селекторы:

// Vanilla JS
const buttons = document.querySelectorAll('.btn');

// Bliss.js
const buttons = $('.btn');

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

buttons.addClass('active');

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

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

const box = $('#box');

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

// Работа с атрибутами
box.attr('data-id', '123');
const dataId = box.attr('data-id');

Методы addClass, removeClass, toggleClass и attr делают код чище и понятнее по сравнению с vanilla JS:

// Vanilla JS
box.classList.add('highlight');
box.classList.remove('highlight');
box.classList.toggle('active');
box.setAttribute('data-id', '123');
const dataId = box.getAttribute('data-id');

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

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

box.html('<p>Новый контент</p>');
box.text('Простой текст');
const currentHtml = box.html();
const currentText = box.text();

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

События

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

buttons.on('click', function(event) {
  console.log('Кнопка нажата', event.target);
});

// Делегирование
$('#container').on('click', '.btn', function() {
  console.log('Кнопка внутри контейнера нажата');
});

Методы on и off заменяют стандартные addEventListener и removeEventListener, сокращая объём кода и улучшая читаемость.

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

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

box.hide(); // скрыть элемент
box.show(); // показать элемент
box.fadeIn(); // плавное появление
box.fadeOut(); // плавное исчезновение

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

AJAX-запросы

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

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

Интерфейс схож с jQuery, но более лёгкий и современный, без лишней нагрузки.

Преимущества Bliss.js при переходе с vanilla JS

  1. Сокращение кода – большинство операций с DOM сводятся к вызовам одного метода.
  2. Удобная работа с коллекциями – методы автоматически применяются ко всем выбранным элементам.
  3. Чистый синтаксис событий – делегирование и массовая привязка проще и короче.
  4. Интегрированные эффекты и AJAX – встроенные возможности заменяют внешние библиотеки.
  5. Совместимость с современным JS – Bliss.js хорошо сочетается с ES6+ синтаксисом, включая стрелочные функции, деструктуризацию и шаблонные строки.

Перенос существующего кода

При переходе с vanilla JS на Bliss.js основные изменения затрагивают:

  • Выборку элементов – заменяется document.querySelectorAll на $.
  • Манипуляции с классами и атрибутами – используются методы addClass, removeClass, attr.
  • События – вместо addEventListener применяются on и off.
  • Работу с контентом – innerHTML и textContent заменяются на html и text.
  • AJAX-запросы – заменяются на метод ajax для сокращения кода и повышения читаемости.

Эта трансформация позволяет создавать более компактный, структурированный и легко поддерживаемый код, сохраняя при этом высокую производительность и гибкость.

Оглавление