Отсутствующие методы и их альтернативы

Библиотека Cash предоставляет облегчённую альтернативу jQuery с основным набором методов для работы с DOM, событиями и анимацией. Однако она не включает весь функционал jQuery. Некоторые методы отсутствуют, и для их реализации требуется использование альтернативных подходов или комбинаций существующих возможностей Cash.

Методы для работы с классами и атрибутами

В Cash присутствуют методы .addClass(), .removeClass(), .toggleClass(), .hasClass(), что перекрывает основные задачи работы с классами. Отсутствуют методы .attr() с полной функциональностью и .prop() для работы с DOM-свойствами.

Альтернатива .attr() для получения и установки атрибутов:

// Получение атрибута
const value = document.querySelector('#element').getAttribute('data-value');

// Установка атрибута
document.querySelector('#element').setAttribute('data-value', 'новое значение');

Для множественных элементов можно использовать Cash вместе с циклом:

$('.items').each((el) => {
    el.setAttribute('data-index', '1');
});

Альтернатива .prop():

// Пример: работа с checkbox
const checkbox = document.querySelector('#agree');
checkbox.checked = true;
const isChecked = checkbox.checked;

Работа с DOM-структурой

Методы jQuery, такие как .wrap(), .unwrap(), .replaceWith(), в Cash не реализованы напрямую. Их можно заменить комбинацией базовых методов DOM.

Оборачивание элемента (.wrap()):

const element = document.querySelector('.item');
const wrapper = document.createElement('div');
wrapper.className = 'wrapper';

element.parentNode.insertBefore(wrapper, element);
wrapper.appendChild(element);

Разворачивание (.unwrap()):

const wrapper = document.querySelector('.wrapper');
while(wrapper.firstChild) {
    wrapper.parentNode.insertBefore(wrapper.firstChild, wrapper);
}
wrapper.parentNode.removeChild(wrapper);

Замена элемента (.replaceWith()):

const oldElement = document.querySelector('.old');
const newElement = document.createElement('div');
newElement.textContent = 'Новый элемент';

oldElement.parentNode.replaceChild(newElement, oldElement);

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

Cash поддерживает .on() и .off() для базовой работы с событиями, но отсутствует поддержка некоторых специфических событий jQuery (например, .hover(), .toggle() для кликов).

Эмуляция .hover():

$('.button').on('mouseenter', (e) => {
    e.target.style.backgroundColor = 'lightblue';
}).on('mouseleave', (e) => {
    e.target.style.backgroundColor = '';
});

Альтернатива .toggle() для клика:

const button = document.querySelector('.toggle-button');
let isActive = false;

button.addEventListener('click', () => {
    isActive = !isActive;
    button.style.display = isActive ? 'block' : 'none';
});

Анимации

Cash поддерживает только .fadeIn(), .fadeOut(), .fadeToggle(). Метод .slideUp()/.slideDown() отсутствует.

Анимация с плавным скрытием (slideUp):

function slideUp(element, duration = 300) {
    element.style.height = element.offsetHeight + 'px';
    element.style.transitionProperty = 'height, margin, padding';
    element.style.transitionDuration = duration + 'ms';
    element.offsetHeight; // trigger reflow
    element.style.height = 0;
    element.style.paddingTop = 0;
    element.style.paddingBottom = 0;
    element.style.marginTop = 0;
    element.style.marginBottom = 0;

    setTimeout(() => {
        element.style.display = 'none';
        element.style.removeProperty('height');
        element.style.removeProperty('padding-top');
        element.style.removeProperty('padding-bottom');
        element.style.removeProperty('margin-top');
        element.style.removeProperty('margin-bottom');
        element.style.removeProperty('transition-duration');
        element.style.removeProperty('transition-property');
    }, duration);
}

Плавное раскрытие (slideDown):

function slideDown(element, duration = 300) {
    element.style.removeProperty('display');
    let display = window.getComputedStyle(element).display;
    if(display === 'none') display = 'block';
    element.style.display = display;

    const height = element.offsetHeight;
    element.style.height = 0;
    element.style.overflow = 'hidden';
    element.style.transitionProperty = 'height, margin, padding';
    element.style.transitionDuration = duration + 'ms';
    element.offsetHeight;
    element.style.height = height + 'px';

    setTimeout(() => {
        element.style.removeProperty('height');
        element.style.removeProperty('overflow');
        element.style.removeProperty('transition-duration');
        element.style.removeProperty('transition-property');
    }, duration);
}

Ajax-запросы

Методы jQuery для работы с Ajax ($.ajax, .load(), .get(), .post()) в Cash отсутствуют. В современном JavaScript используется fetch.

fetch('/api/data', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Для работы с GET-запросами:

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

Итоговые рекомендации

Для большинства отсутствующих методов Cash предоставляет достаточно возможностей через нативные API браузера. Основные подходы включают:

  • Использование querySelectorAll, getAttribute, setAttribute, classList для управления DOM и атрибутами.
  • Прямое управление стилями и переходами для создания анимаций.
  • fetch для сетевых запросов вместо встроенного Ajax.
  • Комбинацию .on() и чистого JavaScript для событийного делегирования и специальных обработчиков.

Эти методы позволяют сохранять лёгкость Cash, одновременно обеспечивая функциональность, аналогичную jQuery, при минимальном увеличении объёма кода.

Оглавление