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

Cleave.js подключается через CDN как внешняя JavaScript-библиотека, загружаемая напрямую из сети без установки через npm или сборочные системы. Такой способ используется в ситуациях, где требуется быстрое подключение форматирования ввода без настройки сборки проекта, конфигурации зависимостей или транспиляции кода.

CDN (Content Delivery Network) предоставляет готовые версии библиотек, размещённые на распределённых серверах. При использовании Cleave.js через CDN браузер загружает уже собранный файл библиотеки по прямой ссылке, после чего становится доступен глобальный конструктор для форматирования полей ввода.

Подключение происходит через стандартный тег <script>, размещаемый в HTML-документе. Библиотека не требует дополнительных зависимостей и работает в браузерной среде сразу после загрузки.

Основные CDN-источники для Cleave.js

Наиболее распространённые CDN, предоставляющие Cleave.js:

  • cdnjs — стабильный репозиторий популярных библиотек
  • jsDelivr — гибкая сеть доставки npm-пакетов
  • unpkg — прямой доступ к пакетам из npm

Каждый источник предоставляет идентичную сборку библиотеки, различается только инфраструктура доставки.

Примеры подключений:

cdnjs: Cleave.js on cdnjs

jsDelivr: Cleave.js on jsDelivr

unpkg: Cleave.js on unpkg

Базовое подключение в HTML

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>

Либо альтернативные варианты:

<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/cleave.min.js"></script>
<script src="https://unpkg.com/cleave.js@1.6.0/dist/cleave.min.js"></script>

Подключение обычно размещается перед закрывающим тегом </body>, чтобы DOM уже был загружен к моменту инициализации скриптов.

Доступность глобального объекта

После загрузки через CDN библиотека предоставляет глобальный конструктор Cleave. Он становится доступен без импортов и дополнительных настроек модулей.

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

console.log(typeof Cleave);

Результатом является функция-конструктор, используемая для создания экземпляров форматирования.

Инициализация после загрузки CDN

После подключения библиотеки создаётся экземпляр форматирования для HTML-элемента input. Основной принцип заключается в привязке к DOM-узлу и передаче конфигурации форматирования.

<input id="phone" type="text">
new Cleave('#phone', {
    phone: true,
    phoneRegionCode: 'KZ'
});

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

Размещение нескольких полей ввода

CDN-подключение не ограничивает количество используемых экземпляров. Каждый input может иметь собственную конфигурацию форматирования.

<input id="date">
<input id="credit-card">
<input id="phone">
new Cleave('#date', {
    date: true,
    datePattern: ['d', 'm', 'Y']
});

new Cleave('#credit-card', {
    creditCard: true
});

new Cleave('#phone', {
    phone: true,
    phoneRegionCode: 'RU'
});

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

Загрузка и порядок выполнения скриптов

При подключении через CDN критическим фактором является порядок загрузки. Скрипт Cleave.js должен быть загружен до выполнения инициализационного кода.

Типичная структура документа:

<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/cleave.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    new Cleave('#phone', {
        phone: true,
        phoneRegionCode: 'KZ'
    });
});
</script>

Использование события DOMContentLoaded обеспечивает корректную работу независимо от позиции скриптов в документе.

Особенности версионирования при CDN-подключении

CDN-ссылки содержат номер версии библиотеки. Это фиксирует поведение и исключает непредсказуемые изменения при обновлениях.

Пример фиксации версии:

  • @1.6.0 в jsDelivr
  • /1.6.0/ в cdnjs

Замена версии в URL приводит к использованию другой сборки без изменения кода приложения.

Поведение при кэшировании

CDN активно использует кэширование на стороне браузера и промежуточных узлов сети. Это снижает время загрузки при повторных посещениях страницы.

Файл библиотеки загружается один раз, после чего используется локальная копия до истечения срока кэша или смены версии в URL.

Ограничения подключения через CDN

Использование CDN накладывает ряд технических ограничений:

  • отсутствие контроля над исходным кодом в runtime
  • зависимость от доступности внешнего сервера
  • невозможность tree-shaking и оптимизации бандлерами
  • отсутствие модульной структуры ES imports без дополнительных обёрток

При этом для простых страниц и прототипов такие ограничения не влияют на функциональность форматирования ввода.

Подключение в сочетании с другими библиотеками

Cleave.js, загруженный через CDN, может использоваться совместно с любыми фронтенд-библиотеками. Конфликты минимальны, так как библиотека работает через изолированные экземпляры и не модифицирует глобальные прототипы объектов JavaScript.

Типичный сценарий включает интеграцию с:

  • нативным JavaScript
  • jQuery-обработчиками событий
  • серверно-рендеренными HTML-шаблонами

Каждый случай использует один и тот же механизм инициализации через глобальный Cleave.

Поведение при повторной инициализации

Повторное создание экземпляра на одном и том же DOM-элементе приводит к наложению логики форматирования. Поэтому при динамических интерфейсах используется контроль и очистка предыдущих экземпляров перед повторным применением.

Библиотека не требует сложной конфигурации для базового сценария, что делает CDN-подключение достаточным для большинства задач форматирования пользовательского ввода.

Оглавление