Публикация и распространение плагинов

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

Подключение Cash

Cash может использоваться через CDN или как модуль в проектах на основе npm. Для подключения через CDN достаточно добавить в HTML:

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

Для npm:

npm install cash-dom

И в коде Jav * aScript:

import $ from 'cash-dom';

После этого $ доступен для работы с DOM аналогично jQuery.

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

Выбор элементов выполняется с помощью CSS-селекторов. Cash возвращает обертку, которая поддерживает методы работы с коллекцией элементов.

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

Важно: Cash возвращает живой объект, поэтому добавление новых элементов в DOM не обновляет автоматически существующие выборки. Для работы с динамическим контентом нужно повторно выполнять выборку.

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

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

  • Вставка элементов:
$('<div>Новый элемент</div>').appendTo('#container'); // Вставляет в конец контейнера
$('#container').prepend('<p>Привет</p>'); // Вставляет в начало контейнера
  • Удаление элементов:
$('.old-item').remove(); // Полностью удаляет из DOM
  • Изменение содержимого и атрибутов:
$('#title').text('Новый заголовок'); // Изменяет текст
$('.link').attr('href', 'https://example.com'); // Устанавливает атрибут
  • Манипуляции с классами:
$('#menu').addClass('active');
$('#menu').removeClass('inactive');
$('#menu').toggleClass('highlighted');

Работа с CSS

Cash позволяет читать и изменять стили элементов:

$('.box').css('color', 'red'); // Устанавливает цвет текста
const bgColor = $('.box').css('background-color'); // Получает значение CSS

Можно задавать несколько свойств одновременно:

$('.box').css({
  color: 'white',
  backgroundColor: 'blue',
  padding: '10px'
});

События

Обработка событий в Cash выполняется через методы on и off:

$('#button').on('click', () => {
  console.log('Кнопка нажата');
});

$('#button').off('click'); // Убирает обработчик

Поддерживаются делегированные события:

$(document).on('click', '.dynamic-item', (e) => {
  console.log('Нажат динамический элемент:', e.target);
});

Также есть удобные сокращенные методы для популярных событий:

$('#input').focus(() => console.log('Фокус'));
$('#input').blur(() => console.log('Потеря фокуса'));

AJAX-запросы

Cash имеет встроенный метод $.ajax для работы с HTTP-запросами:

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

Есть упрощенные методы $.get и $.post:

$.get('/api/data', (response) => console.log(response));
$.post('/api/send', { name: 'John' }, (response) => console.log(response));

Анимации

Библиотека поддерживает базовые анимации с помощью методов hide, show и toggle:

$('#box').hide(); // Скрыть элемент
$('#box').show(); // Показать элемент
$('#box').toggle(); // Переключение видимости

Можно указать скорость анимации:

$('#box').hide(500); // 500 мс
$('#box').show(300);
$('#box').toggle(200);

Расширение функциональности через плагины

Cash позволяет создавать собственные расширения и подключать их как плагины. Плагин — это функция, добавляющая новые методы к объекту Cash.

Пример создания плагина:

$.fn.highlight = function(color = 'yellow') {
  return this.css('background-color', color);
};

// Использование
$('.item').highlight('orange');

Любой метод, добавленный через $.fn, становится доступен для всех выбранных элементов Cash.

Совместимость с jQuery-плагинами

Cash поддерживает большую часть синтаксиса jQuery, поэтому многие плагины можно использовать напрямую, если они не зависят от устаревших API или специфичных методов jQuery. Для интеграции иногда требуется небольшая адаптация кода.

Итоговая структура кода с Cash

Стандартная работа с Cash строится по схеме:

  1. Подключение библиотеки (import $ или <script>).
  2. Выбор элементов через селекторы.
  3. Манипуляции с DOM, классами, CSS.
  4. Добавление обработчиков событий.
  5. Использование AJAX для обмена данными.
  6. Расширение функционала через плагины.

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

Оглавление