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

Библиотека Interact.js распространяется как JavaScript-файл, который может быть подключён напрямую в веб-страницу без установки через менеджеры пакетов. Один из самых простых способов — использование CDN (Content Delivery Network). В этом случае файл библиотеки загружается с удалённого сервера и автоматически кэшируется браузером.

CDN-подключение удобно для:

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

Что такое CDN

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

Преимущества CDN:

  • уменьшение времени загрузки файлов;
  • автоматическое кэширование в браузере;
  • отсутствие необходимости хранить библиотеку в проекте;
  • снижение нагрузки на основной сервер сайта.

Для JavaScript-библиотек CDN обычно предоставляет готовые ссылки на конкретные версии файлов.

Популярные CDN для Interact.js

Библиотека Interact.js доступна на нескольких крупных CDN-платформах.

jsDelivr

Один из наиболее быстрых и популярных CDN.

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>

Особенности:

  • автоматический выбор ближайшего сервера;
  • поддержка конкретных версий пакетов;
  • высокая стабильность.

Подключение конкретной версии:

<script src="https://cdn.jsdelivr.net/npm/interactjs@1.10.17/dist/interact.min.js"></script>

Фиксация версии важна для стабильности проекта, так как обновления библиотеки могут изменять API.

unpkg

CDN, напрямую связанный с репозиториями npm.

<script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>

Подключение конкретной версии:

<script src="https://unpkg.com/interactjs@1.10.17/dist/interact.min.js"></script>

unpkg автоматически отдаёт файлы из npm-пакета без дополнительной конфигурации.

cdnjs

CDN, поддерживаемый сообществом и компанией Cloudflare.

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

Особенности:

  • глобальная сеть серверов Cloudflare;
  • строгая версияция;
  • высокая надёжность.

Минимальная HTML-страница с подключением Interact.js

Простейшая структура страницы с CDN-подключением библиотеки:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Interact.js Example</title>
</head>
<body>

<div id="box">Перетащи меня</div>

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script>
  interact('#box').draggable({
    listeners: {
      move (event) {
        const target = event.target
        const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
        const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

        target.style.transform = `translate(${x}px, ${y}px)`

        target.setAttribute('data-x', x)
        target.setAttribute('data-y', y)
      }
    }
  })
</script>

</body>
</html>

В этом примере:

  1. библиотека загружается через CDN;
  2. после загрузки становится доступна глобальная функция interact();
  3. элементу назначается поведение drag-and-drop.

Правильное расположение тега <script>

Файл библиотеки можно подключать в двух основных местах HTML-документа.

В конце <body>

Наиболее распространённый способ:

<body>

<div class="item"></div>

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script src="app.js"></script>

</body>

Преимущества:

  • DOM уже загружен;
  • скрипты выполняются без ожидания.

В <head> с атрибутом defer

<head>
  <script defer src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
  <script defer src="app.js"></script>
</head>

Атрибут defer позволяет:

  • не блокировать загрузку страницы;
  • выполнить скрипты после построения DOM.

Проверка успешного подключения

После загрузки Interact.js в глобальной области видимости появляется функция interact.

Проверка:

console.log(typeof interact)

Если библиотека подключена корректно, в консоли будет выведено:

function

Можно также проверить версию:

console.log(interact.version)

Использование SRI (Subresource Integrity)

При подключении через CDN возможно использование механизма SRI — проверки целостности файла.

Пример:

<script
  src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"
  integrity="sha384-XXXXXXXX"
  crossorigin="anonymous">
</script>

SRI позволяет браузеру:

  • проверить хэш файла;
  • убедиться, что библиотека не была изменена.

Это повышает безопасность подключения сторонних ресурсов.

Загрузка полной и минифицированной версии

Interact.js распространяется в двух вариантах:

Версия Назначение
interact.js обычная версия для разработки
interact.min.js минифицированная версия для продакшена

Минифицированная версия:

  • имеет меньший размер;
  • быстрее загружается;
  • используется в большинстве случаев.

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

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>

Подключение дополнительных модулей

Современные версии Interact.js объединяют большинство возможностей в одном файле. Однако при работе с CDN важно убедиться, что используется полная сборка библиотеки, содержащая:

  • drag-and-drop;
  • resize;
  • gestures;
  • snapping;
  • auto-scroll.

Полный файл обычно располагается по пути:

dist/interact.min.js

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

Если используется несколько скриптов, порядок имеет значение.

Правильная последовательность:

<script src="interact.min.js"></script>
<script src="app.js"></script>

Причина:

  • код приложения может использовать API библиотеки;
  • Interact.js должен быть загружен раньше.

Неправильный порядок приведёт к ошибке:

ReferenceError: interact is not defined

Использование CDN в учебных и тестовых проектах

CDN-подключение особенно удобно при:

  • изучении библиотеки;
  • создании демонстрационных примеров;
  • разработке интерфейсов в CodePen, JSFiddle и аналогичных средах.

В таких условиях не требуется:

  • установка Node.js;
  • настройка сборщиков;
  • управление зависимостями.

Достаточно добавить один тег <script>.

Возможные проблемы при подключении через CDN

Блокировка CDN

Некоторые корпоративные сети или страны могут ограничивать доступ к определённым CDN.

Решение:

  • использовать альтернативный CDN;
  • хранить файл локально.

Несовместимость версии

Если библиотека обновилась, а код написан под старую версию, возможны ошибки.

Рекомендуемая практика:

  • фиксировать версию в URL.

Пример:

@1.10.17

Отсутствие интернета

Если соединение недоступно, CDN-файл не загрузится.

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

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script>
if (typeof interact === 'undefined') {
  document.write('<script src="/js/interact.min.js"><\/script>');
}
</script>

Такой подход обеспечивает fallback-загрузку локальной копии библиотеки.

Рекомендуемая структура проекта при использовании CDN

Даже при CDN-подключении обычно создаётся структура проекта:

project/
│
├── index.html
├── css/
│   └── styles.css
└── js/
    └── app.js

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

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script src="js/app.js"></script>

Таким образом:

  • библиотека загружается с CDN;
  • пользовательский код хранится локально.

Асинхронная загрузка

В некоторых случаях можно использовать атрибут async:

<script async src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>

Однако при использовании async необходимо учитывать:

  • порядок выполнения скриптов не гарантируется;
  • код приложения может выполниться раньше загрузки библиотеки.

Поэтому чаще используется defer или размещение скриптов в конце body.

Использование Interact.js после загрузки страницы

Если библиотека подключена через CDN и скрипт выполняется после загрузки DOM, код можно писать напрямую:

interact('.draggable').draggable()

Если скрипт расположен в <head> без defer, необходимо дождаться загрузки DOM:

document.addEventListener('DOMContentLoaded', () => {
  interact('.draggable').draggable()
})

Это предотвращает ошибки, связанные с отсутствием элементов в DOM.

Кэширование CDN-ресурсов

Браузеры активно кэшируют популярные CDN-файлы. Если пользователь ранее посещал сайт, использующий ту же версию Interact.js, файл может быть уже сохранён локально.

Преимущества:

  • почти мгновенная загрузка;
  • уменьшение сетевого трафика.

Когда CDN лучше не использовать

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

  • корпоративные системы без доступа к интернету;
  • проекты с повышенными требованиями безопасности;
  • приложения с полностью офлайн-режимом;
  • сложные проекты со сборкой через Webpack, Vite или Rollup.

В таких случаях библиотека устанавливается через npm и подключается как модуль.

Краткая схема подключения

  1. выбрать CDN;
  2. добавить тег <script> с ссылкой на interact.min.js;
  3. подключить собственный JavaScript после библиотеки;
  4. использовать глобальную функцию interact() для настройки взаимодействий элементов.

CDN-подключение позволяет начать использование Interact.js буквально с нескольких строк HTML, не требуя дополнительных инструментов сборки и конфигурации среды разработки.

Оглавление