Установка и подключение

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

Установка через npm

Для проектов, использующих Node.js и сборщики модулей (Webpack, Vite, Parcel), библиотеку Cash можно установить через npm:

npm install cash-dom

После установки её подключение в коде JavaScript выглядит следующим образом:

import $ from 'cash-dom';

// Пример использования
$('.button').on('click', () => {
    console.log('Кнопка нажата');
});

Особенности подключения через npm:

  • Библиотека экспортируется как модуль ES6, что позволяет использовать import.
  • Для CommonJS-среды (require) также поддерживается подключение:
const $ = require('cash-dom');

$('.button').hide();

Подключение через CDN

Если проект не использует сборщики модулей, Cash можно подключить напрямую через CDN:

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

После подключения через CDN объект $ автоматически становится глобальным, аналогично jQuery:

$('.menu-item').addClass('active');

Преимущества CDN-подключения:

  • Нет необходимости в установке через npm.
  • Быстрая интеграция на статические страницы.
  • Возможность использовать последнюю стабильную версию библиотеки.

Проверка подключения

Для проверки правильности подключения библиотеки достаточно вызвать консольную команду:

console.log($); // Должен вывести функцию cash

Если в консоли появляется функция, Cash подключена корректно и готова к работе.

Особенности интеграции с другими библиотеками

  • Cash совместима с большинством современных фреймворков и библиотек, однако она не поддерживает старые версии Internet Explorer (до IE11).
  • Методы Cash частично перекрывают стандартные методы DOM, поэтому при совместном использовании с jQuery важно следить за конфликтами идентичных имён функций.
  • Библиотека оптимизирована для работы с современными браузерными API, что уменьшает размер итогового бандла и повышает производительность.

Минимальный пример инициализации

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример Cash</title>
    <script src="https://cdn.jsdelivr.net/npm/cash-dom@8/dist/cash.min.js"></script>
</head>
<body>
    <button class="btn">Нажми меня</button>
    <script>
        $('.btn').on('click', function() {
            alert('Событие сработало!');
        });
    </script>
</body>
</html>

В этом примере демонстрируется базовое подключение через CDN, выбор элемента по классу и установка обработчика события click.

Настройка сборки и Tree Shaking

При использовании сборщиков модулей рекомендуется подключать Cash через ES-модуль:

import $ from 'cash-dom';

Это позволяет сборщику автоматически исключать неиспользуемые функции, уменьшая размер итогового бандла. Методы, такие как $.ajax или $.animate, включаются только при явном вызове.

Итоговые рекомендации по подключению

  • Для современных проектов с npm предпочтительно подключение через модуль cash-dom.
  • Для статических страниц или прототипов удобнее использовать CDN-версию.
  • Проверка глобального объекта $ после подключения позволяет убедиться в корректной интеграции.

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

Оглавление