Переписывание типовых конструкций

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

import $ from 'cash-dom';

$('.element').addClass('active');

В этом примере видно, что $(selector) возвращает объект, похожий на массив элементов, с набором методов для манипуляции.

Выбор элементов и базовые операции

Метод $(selector) позволяет выбрать элементы по CSS-селектору. Возвращаемый объект поддерживает такие методы, как:

  • .addClass(className) — добавляет класс;
  • .removeClass(className) — удаляет класс;
  • .toggleClass(className) — переключает наличие класса;
  • .attr(attribute, value) — чтение или установка атрибута;
  • .css(property, value) — чтение или установка стилей.
$('#menu').toggleClass('open');
$('#menu').css('display', 'block');

Важно помнить, что операции над DOM выполняются для каждого элемента в коллекции.

Манипуляции с содержимым

Cash предоставляет методы для работы с текстом, HTML и элементами:

  • .html([htmlString]) — чтение или замена HTML содержимого;
  • .text([textString]) — чтение или замена текста;
  • .append(content) — добавление элемента внутрь выбранных;
  • .prepend(content) — вставка в начало;
  • .after(content) и .before(content) — вставка относительно элемента.
$('.container').append('<div class="item">Новый элемент</div>');
$('.container').prepend('<div class="header">Заголовок</div>');

Методы принимают как строки HTML, так и объекты DOM или другие объекты Cash.

Работа с событиями

Cash упрощает регистрацию событий и их обработку:

  • .on(event, handler) — добавление обработчика;
  • .off(event, handler) — удаление обработчика;
  • .trigger(event) — инициирование события.
$('#button').on('click', function(e) {
    console.log('Клик по кнопке');
});

$('#button').off('click');

Поддерживаются делегирование событий и множественные события через пробел:

$('#list').on('click mouseenter', 'li', function() {
    console.log('Элемент списка активен');
});

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

Cash включает простые методы анимации:

  • .fadeIn(duration, callback) — плавное появление;
  • .fadeOut(duration, callback) — плавное исчезновение;
  • .fadeToggle(duration, callback) — переключение видимости с анимацией;
  • .show() и .hide() — мгновенное изменение видимости.
$('.modal').fadeIn(300, function() {
    console.log('Модальное окно появилось');
});

В отличие от jQuery, Cash не реализует сложные цепочки анимаций, что упрощает производительность и делает библиотеку легкой.

AJAX-запросы

Для работы с сетью Cash использует метод .ajax(options):

$.ajax({
    url: '/api/data',
    method: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(err) {
        console.error(err);
    }
});

Параметры аналогичны jQuery:

  • url — адрес запроса;
  • method — HTTP-метод;
  • data — данные для отправки;
  • dataType — ожидаемый формат;
  • success и error — колбэки.

Также можно использовать короткие методы: $.get(url, callback) и $.post(url, data, callback).

Переписывание типовых конструкций с jQuery

Cash позволяет переписывать привычные jQuery-конструкции без потери функциональности. Рассмотрим несколько примеров.

Добавление и удаление классов

jQuery:

$('#box').addClass('active').removeClass('hidden');

Cash:

$('#box').addClass('active').removeClass('hidden');

Разницы практически нет, синтаксис полностью совместим.

Обработка событий

jQuery:

$('#btn').on('click', function() {
    $(this).hide();
});

Cash:

$('#btn').on('click', function() {
    $(this).hide();
});

Манипуляции с содержимым

jQuery:

$('#list').append('<li>Элемент</li>');

Cash:

$('#list').append('<li>Элемент</li>');

Анимации

jQuery:

$('.modal').fadeIn(400).fadeOut(400);

Cash:

$('.modal').fadeIn(400, function() {
    $(this).fadeOut(400);
});

Здесь видна небольшая разница в методах цепочки, но по сути поведение совпадает.

Советы по оптимизации кода

  • Использовать селекторы минимально и локально, чтобы не выполнять поиск по всему DOM.
  • Для часто используемых элементы сохранять в переменную:
const $menu = $('#menu');
$menu.addClass('active');
  • Использовать делегирование событий, если элементы добавляются динамически.
  • Избегать сложных цепочек анимаций, отдавая предпочтение CSS-переходам.

Интеграция с современным JavaScript

Cash полностью совместим с ES6+ и модульной структурой. Можно использовать import $ from 'cash-dom'; и подключать методы по необходимости. Работа с промисами и async/await позволяет интегрировать AJAX-запросы и асинхронные операции:

async function fetchData() {
    try {
        const response = await $.ajax({ url: '/api/items', dataType: 'json' });
        console.log(response);
    } catch (err) {
        console.error(err);
    }
}

Библиотека не требует глобальной переменной $, что упрощает модульное программирование.

Особенности Cash по сравнению с jQuery

  • Размер: менее 10 КБ, что делает библиотеку легкой для загрузки.
  • Современные API: использует querySelectorAll, classList, fetch.
  • Простая анимация: ограниченные эффекты без сложного управления очередью.
  • Минимальное переопределение методов: большинство jQuery-конструкций можно переписать без изменений.
  • Отсутствие поддержки старых браузеров (IE ≤ 10).

Резюме возможностей

Cash сочетает:

  • Выбор и манипуляцию DOM;
  • Управление событиями и делегирование;
  • Простую анимацию и эффекты;
  • Работу с AJAX-запросами;
  • Совместимость с современными стандартами JS.

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

Оглавление