Философия и принципы проектирования

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

Выбор элементов и цепочки методов

Выбор элементов выполняется с помощью функции $, аналогично jQuery:

const items = $('.item');

Возвращается объект Cash, который поддерживает цепочки вызовов методов:

$('.item')
  .addClass('active')
  .css('color', 'red')
  .on('click', () => console.log('Clicked'));

Это позволяет объединять несколько операций в единый поток, сокращая код и повышая читаемость.

Манипуляции с классами и атрибутами

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

  • addClass(className) — добавление класса.
  • removeClass(className) — удаление класса.
  • toggleClass(className) — переключение класса.
  • hasClass(className) — проверка наличия класса.

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

  • attr(name, value) — установка атрибута или получение его значения.
  • removeAttr(name) — удаление атрибута.
  • prop(name, value) — управление свойствами элементов.
$('.item')
  .attr('data-id', '123')
  .prop('disabled', true);

Управление стилями

Метод css позволяет изменять стиль элементов:

$('.item').css({
  color: 'blue',
  fontSize: '16px'
});

Можно передавать объект с несколькими свойствами или пару ключ-значение.

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

Cash упрощает манипуляции с содержимым:

  • html(content) — получение или установка HTML-кода.
  • text(content) — получение или установка текстового содержимого.
  • append(content) и prepend(content) — добавление элементов внутрь.
  • before(content) и after(content) — вставка элементов рядом.
$('.container').append('<div class="new">Новый элемент</div>');

Эти методы поддерживают работу с HTML-строками, элементами и коллекциями Cash.

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

Cash обеспечивает удобный API для событий:

  • on(event, handler) — привязка обработчика.
  • off(event, handler) — удаление обработчика.
  • one(event, handler) — одноразовое событие.
  • trigger(event) — вызов события вручную.
$('.btn').on('click', () => alert('Нажато'));

Поддерживаются все стандартные DOM-события, включая кастомные.

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

Cash включает базовые методы анимации:

  • show(duration, callback) и hide(duration, callback) — плавное появление и скрытие элементов.
  • fadeIn(duration) и fadeOut(duration) — эффекты прозрачности.
  • slideDown(duration) и slideUp(duration) — эффект «сворачивания/разворачивания».

Методы используют таймеры и CSS-свойства для анимации, не зависят от сторонних библиотек.

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

Объект Cash — это массивоподобная коллекция элементов, которая поддерживает итерации и методы:

  • each(callback) — перебор элементов.
  • map(callback) — преобразование элементов.
  • filter(selectorOrFunction) — фильтрация по селектору или функции.
  • find(selector) — поиск потомков внутри коллекции.
$('.item').each((el, index) => console.log(index, el));

Коллекции Cash совместимы с современными методами массивов, что облегчает интеграцию с существующим кодом.

Совместимость и минимализм

Cash разработан с прицелом на современные браузеры, что позволяет использовать нативные методы DOM (querySelectorAll, classList, addEventListener) вместо полифилов. Минимализм обеспечивает быстрый загрузочный вес и отсутствие лишней нагрузки на проект.

Подход к расширению

Cash можно расширять собственными методами:

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

$('.item').highlight();

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

Философия проектирования

  • Простота: минимальный API для основных задач.
  • Скорость: использование нативных методов DOM.
  • Совместимость: работа в современных браузерах без зависимостей.
  • Расширяемость: поддержка добавления собственных функций через $.fn.
  • Цепочки вызовов: единый объект Cash возвращается во всех методах, что облегчает создание последовательных операций.

Библиотека Cash сочетает в себе удобство jQuery с современными стандартами JavaScript, делая работу с DOM легкой, быстрой и компактной. Она фокусируется на повседневных задачах веб-разработки, избегая избыточного функционала, что делает её идеальным инструментом для проектов, где важна производительность и простота поддержки.

Оглавление