Библиотека Cash представляет собой лёгкую альтернативу jQuery, сохраняя привычный синтаксис для работы с DOM, событиями и AJAX, но с более компактным ядром и современными особенностями JavaScript. При переходе от jQuery к Cash важно понимать ключевые различия в API, которые влияют на выбор методов и подход к работе с элементами.
В Cash функция выбора элементов работает аналогично jQuery, возвращая объект, который ведёт себя как массив DOM-элементов. Однако есть нюансы:
const items = $('.item'); // Возвращает объект Cash с коллекцией элементов
Особенности:
.get() и .eq() работают иначе:items.get(0); // Возвращает чистый DOM-элемент, не обораченный в Cash
items.eq(0); // Возвращает объект Cash, содержащий один элемент
.find() работает только внутри текущих элементов,
не поддерживает глобальные селекторы вне контекста выбранного узла, что
повышает производительность.Cash поддерживает добавление, удаление и переключение классов через методы:
items.addClass('active');
items.removeClass('inactive');
items.toggleClass('highlight');
Ключевые различия с jQuery:
.hasClass() возвращает boolean,
проверяя наличие класса хотя бы у одного элемента коллекции:if (items.hasClass('active')) {
// хотя бы один элемент содержит класс
}
.toggleClass(). Каждый класс нужно указывать отдельно или
использовать функцию.Метод .css() позволяет получать и задавать стили:
items.css('color', 'red'); // Установка одного свойства
items.css({ fontSize: '16px' }); // Установка нескольких свойств
Особенности:
.width(), .height(),
.innerWidth(), .outerWidth() не
поддерживаются напрямую. Для получения размеров требуется
использование .css() или native-свойств DOM
(element.offsetWidth,
element.clientHeight).Cash предоставляет удобный API для работы с событиями, совместимый с jQuery-подходом:
items.on('click', eventHandler);
items.off('click', eventHandler);
items.one('mouseover', eventHandler);
Ключевые различия:
click.namespace). Пространства имён в jQuery позволяют
точечно удалять обработчики, в Cash это недоступно..on() работает
аналогично:$('#list').on('click', 'li', handler);
.trigger() и .triggerHandler()
ограничены стандартными событиями и не поддерживают все
jQuery-специфические расширения.Cash предоставляет упрощённый интерфейс для AJAX-запросов через метод
.ajax():
cash.ajax({
url: '/api/data',
method: 'GET',
success: function(response) { console.log(response); },
error: function(err) { console.error(err); }
});
Особенности по сравнению с jQuery:
$.getJSON,
$.post, $.getScript — все запросы делаются
через единый .ajax().ajaxStart,
ajaxStop). Все события нужно отслеживать локально..ajax() не возвращает
полноценный jQuery Deferred, используется стандартный callback.Методы .append(), .prepend(),
.before(), .after(), .remove() и
.empty() реализованы почти так же, как в jQuery, но есть
различия:
items.append('<span>New</span>');
Ключевые отличия:
.clone(true) дублирует и события..wrap(), .wrapAll(),
.wrapInner() не реализованы, для сложного
оборачивания нужно использовать native DOM API..html() для чтения и записи HTML поддерживается,
но не обрабатывает скрипты внутри вставленного кода автоматически.Cash не включает встроенные методы .animate() и эффекты
jQuery. Для анимаций рекомендуется использовать CSS-транзишны или Web
Animations API:
item.css({
transition: 'opacity 0.5s',
opacity: 0
});
.fadeIn(), .fadeOut(),
.slideUp() и .slideDown().Методы .attr(), .prop() и
.data() работают схожим образом:
items.attr('id'); // Получение атрибута
items.attr('id', 'newId'); // Установка атрибута
items.prop('checked', true); // Установка свойства
Особенности:
data- атрибутов как в jQuery.
Метод .data() лишь хранит значения в памяти объекта Cash,
не синхронизируя автоматически с data-* атрибутами после
чтения..attr() строго соответствует DOM
API, без дополнительных преобразований типов.Cash полностью поддерживает цепочку вызовов, что облегчает манипуляции с коллекциями:
$('.item')
.addClass('active')
.css('color', 'blue')
.on('click', handler);
.hasClass(),
.attr() при чтении и т.д.)..get(), .html() без аргументов), прерывают
цепочку, что нужно учитывать.Эти различия определяют подход к работе с Cash: минимализм, ориентация на стандартные возможности DOM и производительность при сохранении знакомой синтаксической структуры jQuery.