Инструменты разработчика

Cash — это лёгкая и производительная библиотека для работы с DOM, вдохновлённая jQuery, но оптимизированная для современных браузеров. Её минимальный размер делает её удобной для проектов, где важна скорость загрузки и производительность.

Для подключения используется npm или CDN:

npm install cash-dom

Для браузера через CDN:

<script src="https://cdn.jsdelivr.net/npm/cash-dom/dist/cash.min.js"></script>

После подключения объект $ становится доступен в глобальной области видимости, предоставляя методы для манипуляций с DOM.

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

Cash использует селекторы CSS для выбора элементов, аналогично jQuery.

const items = $('.item'); // все элементы с классом item
const header = $('#header'); // элемент с id header

Метод возвращает коллекцию, которая поддерживает цепочку вызовов.

Особенности выбора:

  • Cash использует нативный querySelectorAll.
  • Возвращаемая коллекция — объект с массивоподобной структурой.
  • Методы коллекции применяются сразу ко всем элементам.

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

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

$('.item').html('<strong>Новый контент</strong>'); // заменяет HTML
$('.item').text('Текст'); // заменяет текстовое содержимое

Методы .html() и .text() поддерживают как получение, так и установку значения. Если аргумент не передан, возвращается значение первого элемента.

Добавление и удаление элементов

$('.container').append('<div class="new">Новый блок</div>'); // добавление внутрь
$('.container').prepend('<div class="new">Сверху</div>'); // добавление в начало
$('.item').remove(); // удаление элементов

Методы позволяют работать с HTML-строкой, DOM-элементами или коллекциями Cash.

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

$('.item').attr('data-id', '123'); // установка атрибута
console.log($('.item').attr('data-id')); // получение атрибута
$('.item').removeAttr('data-id'); // удаление атрибута

$('.item').prop('checked', true); // установка свойства
console.log($('.item').prop('checked')); // чтение свойства

Различие между attr и prop:

  • attr работает с HTML-атрибутами.
  • prop работает с внутренними свойствами DOM-элементов.

Работа с классами

$('.item').addClass('active'); // добавление класса
$('.item').removeClass('active'); // удаление класса
$('.item').toggleClass('active'); // переключение класса
console.log($('.item').hasClass('active')); // проверка наличия класса

Эти методы применяются сразу ко всем элементам коллекции, что упрощает массовые изменения.

Стили и CSS

$('.item').css('color', 'red'); // установка одного свойства
$('.item').css({ color: 'blue', fontSize: '16px' }); // установка нескольких свойств
console.log($('.item').css('color')); // получение значения

Метод .css() позволяет работать как с отдельным свойством, так и с объектом стилей. Значения возвращаются в виде строки с единицами измерения.

События

$('.item').on('click', function(e) {
    console.log('Нажат элемент', e.currentTarget);
});

$('.item').off('click'); // удаление обработчика
$('.item').trigger('click'); // программное вызовы события

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

  • Cash поддерживает делегирование событий через .on(event, selector, handler).
  • Можно передавать несколько событий через пробел: .on('mouseenter mouseleave', handler).

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

Cash включает базовые методы для анимации скрытия и отображения элементов:

$('.item').hide(); // скрытие
$('.item').show(); // показ
$('.item').toggle(); // переключение видимости

Эти методы используют CSS-свойство display и работают без дополнительных зависимостей.

Работа с коллекциями

Методы .each() и .map() позволяют обрабатывать элементы коллекции:

$('.item').each((index, el) => {
    console.log(index, el);
});

const texts = $('.item').map(el => el.textContent);

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

  • .each() предназначен для обхода коллекции с доступом к индексу и элементу.
  • .map() возвращает массив результатов.

AJAX-запросы

Cash предоставляет упрощённый интерфейс для работы с HTTP:

$.get('data.json', data => {
    console.log(data);
});

$.post('submit', { name: 'John' }, response => {
    console.log(response);
});

Методы .get() и .post() используют Fetch API под капотом, обеспечивая современный подход без XMLHttpRequest.

Совместимость и производительность

  • Поддержка современных браузеров без необходимости полифиллов.
  • Минимальный вес библиотеки (~10 КБ gzipped).
  • Оптимизация под работу с коллекциями DOM, что уменьшает количество циклов и операций.

Основные преимущества Cash

  • Меньше нагрузки на загрузку страницы по сравнению с jQuery.
  • Современные методы DOM и CSS.
  • Поддержка цепочек вызовов и обработчиков событий.
  • Простота интеграции с современными сборщиками, такими как Webpack или Vite.

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

Оглавление