Основные различия в API

Библиотека Cash представляет собой лёгкую альтернативу jQuery, сохраняя привычный синтаксис для работы с DOM, событиями и AJAX, но с более компактным ядром и современными особенностями JavaScript. При переходе от jQuery к Cash важно понимать ключевые различия в API, которые влияют на выбор методов и подход к работе с элементами.


1. Выбор элементов и коллекции

В Cash функция выбора элементов работает аналогично jQuery, возвращая объект, который ведёт себя как массив DOM-элементов. Однако есть нюансы:

const items = $('.item'); // Возвращает объект Cash с коллекцией элементов

Особенности:

  • Cash не создаёт полноценный объект jQuery с множеством свойств. Это массивоподобная коллекция, поддерживающая методы перебора и цепочки.
  • Методы .get() и .eq() работают иначе:
items.get(0); // Возвращает чистый DOM-элемент, не обораченный в Cash
items.eq(0);  // Возвращает объект Cash, содержащий один элемент
  • Метод .find() работает только внутри текущих элементов, не поддерживает глобальные селекторы вне контекста выбранного узла, что повышает производительность.

2. Манипуляции с классами

Cash поддерживает добавление, удаление и переключение классов через методы:

items.addClass('active');
items.removeClass('inactive');
items.toggleClass('highlight');

Ключевые различия с jQuery:

  • Методы принимают только строку или функцию, возвращающую строку. Массивы классов или пробельные строки с ошибками обрабатываются иначе.
  • Метод .hasClass() возвращает boolean, проверяя наличие класса хотя бы у одного элемента коллекции:
if (items.hasClass('active')) {
    // хотя бы один элемент содержит класс
}
  • Нет поддержки аргументов с несколькими классами через пробел для .toggleClass(). Каждый класс нужно указывать отдельно или использовать функцию.

3. Работа со стилями и CSS

Метод .css() позволяет получать и задавать стили:

items.css('color', 'red');          // Установка одного свойства
items.css({ fontSize: '16px' });    // Установка нескольких свойств

Особенности:

  • Cash использует native getComputedStyle при чтении стилей, поэтому возвращаемые значения точнее соответствуют текущему состоянию элементов.
  • Методы типа .width(), .height(), .innerWidth(), .outerWidth() не поддерживаются напрямую. Для получения размеров требуется использование .css() или native-свойств DOM (element.offsetWidth, element.clientHeight).

4. События

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-специфические расширения.

5. AJAX и асинхронные запросы

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().
  • Нет глобальных обработчиков AJAX (ajaxStart, ajaxStop). Все события нужно отслеживать локально.
  • Поддержка Promise ограничена: .ajax() не возвращает полноценный jQuery Deferred, используется стандартный callback.

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

Методы .append(), .prepend(), .before(), .after(), .remove() и .empty() реализованы почти так же, как в jQuery, но есть различия:

items.append('<span>New</span>');

Ключевые отличия:

  • Cash не клонирует обработчики событий при вставке элементов. В jQuery .clone(true) дублирует и события.
  • Методы .wrap(), .wrapAll(), .wrapInner() не реализованы, для сложного оборачивания нужно использовать native DOM API.
  • Метод .html() для чтения и записи HTML поддерживается, но не обрабатывает скрипты внутри вставленного кода автоматически.

7. Анимации

Cash не включает встроенные методы .animate() и эффекты jQuery. Для анимаций рекомендуется использовать CSS-транзишны или Web Animations API:

item.css({
    transition: 'opacity 0.5s',
    opacity: 0
});
  • Переход на CSS-анимации делает библиотеку легче и быстрее.
  • Нет поддержки .fadeIn(), .fadeOut(), .slideUp() и .slideDown().

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

Методы .attr(), .prop() и .data() работают схожим образом:

items.attr('id');              // Получение атрибута
items.attr('id', 'newId');     // Установка атрибута
items.prop('checked', true);   // Установка свойства

Особенности:

  • Cash не создает объект data- атрибутов как в jQuery. Метод .data() лишь хранит значения в памяти объекта Cash, не синхронизируя автоматически с data-* атрибутами после чтения.
  • Чтение и запись через .attr() строго соответствует DOM API, без дополнительных преобразований типов.

9. Цепочки методов

Cash полностью поддерживает цепочку вызовов, что облегчает манипуляции с коллекциями:

$('.item')
    .addClass('active')
    .css('color', 'blue')
    .on('click', handler);
  • Методы возвращают объект Cash для текущей коллекции, кроме тех, что возвращают конкретные значения (.hasClass(), .attr() при чтении и т.д.).
  • Некоторые методы, возвращающие массивы или значения (.get(), .html() без аргументов), прерывают цепочку, что нужно учитывать.

10. Основные рекомендации при переходе

  • Проверять, поддерживает ли Cash метод, используемый в jQuery, особенно для анимаций, обёртывания и AJAX.
  • Для сложных эффектов и плагинов jQuery требуется либо альтернативная реализация на CSS/JS, либо использовать нативный API.
  • Использовать Cash там, где важен лёгкий вес библиотеки и современные браузеры, избегая старых IE-хаки.

Эти различия определяют подход к работе с Cash: минимализм, ориентация на стандартные возможности DOM и производительность при сохранении знакомой синтаксической структуры jQuery.