Загрузка и локальное подключение

AutoNumeric можно подключить напрямую через CDN, что позволяет сразу использовать библиотеку без необходимости установки через менеджеры пакетов. Для этого достаточно добавить тег <script> в HTML-документ.

<!-- Подключение последней версии AutoNumeric через CDN -->
<script src="https://cdn.jsdelivr.net/npm/autonumeric@latest/dist/autoNumeric.min.js"></script>

Ключевые моменты подключения через CDN:

  • Скрипт должен располагаться после всех элементов формы, к которым будет применяться AutoNumeric, чтобы инициализация прошла корректно.
  • Можно использовать различные CDN-провайдеры, например: jsDelivr, unpkg.

Пример использования после подключения:

<input type="text" id="price" />

<script>
  new AutoNumeric('#price', { currencySymbol: '$', decimalPlaces: 2 });
</script>

Установка AutoNumeric через npm и локальное подключение

Для проектов с использованием сборщиков модулей (Webpack, Vite, Parcel) предпочтительно устанавливать AutoNumeric через npm:

npm install autonumeric

После установки доступна возможность импорта библиотеки:

// Импорт для современных модулей ES6
import AutoNumeric from 'autonumeric';

// Создание экземпляра
const priceInput = document.querySelector('#price');
new AutoNumeric(priceInput, { currencySymbol: '€', decimalPlaces: 2 });

Особенности локального подключения:

  • Локальная установка позволяет фиксировать версию библиотеки и избежать неожиданных изменений при обновлении CDN.
  • Поддерживается работа с TypeScript через типы, доступные в пакете @types/autonumeric (для версии, где они предоставляются).
  • Можно использовать AutoNumeric как CommonJS модуль для Node.js окружений:
const AutoNumeric = require('autonumeric');

const input = document.getElementById('salary');
new AutoNumeric(input, { digitGroupSeparator: ',', decimalPlaces: 0 });

Локальное подключение без менеджеров пакетов

Для случаев, когда npm или Yarn не используются, библиотеку можно скачать с официального репозитория и подключить локально:

  1. Скачивается файл autoNumeric.min.js из GitHub Releases.
  2. Помещается в папку проекта, например js/lib/.
  3. Подключается через HTML:
<script src="js/lib/autoNumeric.min.js"></script>

Инициализация идентична CDN-подключению:

const input = document.querySelector('#amount');
new AutoNumeric(input, { decimalCharacter: '.', digitGroupSeparator: ',' });

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

  • Полный контроль над версией библиотеки.
  • Возможность использовать библиотеку в оффлайн-проектах.
  • Легче интегрировать с корпоративными системами, где запрещён прямой доступ к внешним CDN.

Советы по выбору метода подключения

Метод Преимущества Недостатки
CDN Быстрая интеграция, нет необходимости в сборщиках Зависимость от внешнего сервера, потенциальные задержки
npm/Yarn Контроль версий, интеграция с сборщиками, поддержка модулей Требуется сборка проекта
Локальный файл Работа оффлайн, контроль над версией Ручное обновление, необходимость хранить файл в проекте

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

Инициализация и повторное подключение

При динамическом создании элементов формы важно повторно инициализировать AutoNumeric для новых элементов:

const newInput = document.createElement('input');
document.body.appendChild(newInput);
new AutoNumeric(newInput, { currencySymbol: '£', decimalPlaces: 2 });

Для уже инициализированных элементов используется метод update:

const anElement = AutoNumeric.getAutoNumericElement('#price');
anElement.update({ currencySymbol: '¥' });

Это обеспечивает гибкость при работе с динамическими интерфейсами и многошаговыми формами.

Проверка доступности библиотеки

После подключения важно убедиться, что библиотека доступна:

if (typeof AutoNumeric !== 'undefined') {
    console.log('AutoNumeric успешно загружен');
} else {
    console.error('AutoNumeric не найден');
}

Такой подход предотвращает ошибки при попытке инициализации до полной загрузки скрипта или при неправильном пути подключения.

Оглавление