Подключение в HTML

timeago.js представляет собой библиотеку для преобразования временных меток в человекочитаемый относительный формат («5 минут назад», «2 дня назад», «только что»). При подключении через HTML ключевым аспектом становится выбор способа загрузки: через CDN, локальный файл или модульную сборку. От корректности подключения зависит доступность глобальных функций и дальнейшая инициализация.

Наиболее простой способ использования — подключение библиотеки напрямую в HTML-документ через CDN. Такой подход не требует сборщиков, установки npm-зависимостей или настройки окружения.

Подключение выполняется через тег <script>, который загружает UMD-сборку:

<script src="https://unpkg.com/timeago.js"></script>

После подключения библиотека становится доступной в глобальном объекте timeago.

Ключевые особенности такого способа:

  • отсутствие этапа сборки проекта;
  • мгновенная доступность API в браузере;
  • подходит для прототипов и небольших страниц;
  • зависит от доступности внешнего CDN.

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

<script>
  const node = document.querySelector('#time');
  const timeagoInstance = timeago.format(node.getAttribute('datetime'));
</script>

Подключение локальной версии файла

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

Структура проекта:

/project
  index.html
  timeago.min.js

HTML-файл:

<script src="./timeago.min.js"></script>

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

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

  • отсутствие зависимости от внешних сервисов;
  • возможность фиксировать конкретную версию библиотеки;
  • стабильность работы в офлайн-средах.

Подключение в head и body

Расположение <script> влияет на момент доступности DOM и выполнения кода.

Подключение в <head>:

<head>
  <script src="https://unpkg.com/timeago.js"></script>
</head>

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

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll('.time');
    elements.forEach(el => {
      el.textContent = timeago.format(el.getAttribute('datetime'));
    });
  });
</script>

Подключение перед закрывающим тегом </body>:

<body>
  <span class="time" datetime="2026-05-26T12:00:00Z"></span>

  <script src="https://unpkg.com/timeago.js"></script>
  <script>
    const elements = document.querySelectorAll('.time');
    elements.forEach(el => {
      el.textContent = timeago.format(el.getAttribute('datetime'));
    });
  </script>
</body>

Такой вариант предпочтителен, так как DOM уже гарантированно доступен.

Работа с глобальным объектом

При подключении через <script> библиотека экспортирует объект, содержащий основные методы форматирования.

Основной метод:

timeago.format(date)

где date может быть:

  • строкой даты ISO;
  • объектом Date;
  • timestamp.

Пример:

<script>
  console.log(timeago.format('2026-05-25T10:00:00Z'));
</script>

Использование data-атрибутов

HTML-подключение часто комбинируется с data-* атрибутами для декларативного хранения даты:

<span class="time" data-time="2026-05-25T10:00:00Z"></span>

Обработка:

<script>
  const nodes = document.querySelectorAll('[data-time]');

  nodes.forEach(node => {
    const value = node.getAttribute('data-time');
    node.textContent = timeago.format(value);
  });
</script>

Такой подход позволяет отделить структуру HTML от логики JavaScript.

Подключение нескольких версий и контроль конфликтов

При использовании нескольких библиотек или версий важно учитывать глобальное пространство имён.

Если подключаются разные скрипты, возможны конфликты объекта timeago. Для предотвращения перекрытия используется:

  • изоляция через IIFE;
  • контроль порядка подключения;
  • использование фиксированной версии CDN.

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

<script src="https://unpkg.com/timeago.js@4.0.2"></script>

Особенности инициализации после загрузки DOM

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

<script>
  function renderTimes() {
    document.querySelectorAll('.time').forEach(el => {
      el.textContent = timeago.format(el.dataset.time);
    });
  }

  document.addEventListener('DOMContentLoaded', renderTimes);
</script>

При добавлении новых элементов в DOM после загрузки страницы требуется повторный вызов функции обработки.

Обработка динамического контента

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

const newElement = document.createElement('span');
newElement.className = 'time';
newElement.dataset.time = new Date().toISOString();
document.body.appendChild(newElement);

newElement.textContent = timeago.format(newElement.dataset.time);

Работа с несколькими языками через HTML-подключение

При подключении через script можно дополнительно подключать локализации:

<script src="https://unpkg.com/timeago.js"></script>
<script src="https://unpkg.com/timeago.js/dist/lang/ru.js"></script>

После этого локаль может быть применена:

timeago.register('ru', locale);
timeago.format('2026-05-25T10:00:00Z', 'ru');

Типичные ошибки подключения

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

  • попытка вызвать timeago.format до загрузки скрипта;
  • отсутствие атрибута datetime или data-time;
  • неверный формат даты;
  • размещение скрипта в <head> без обработки DOMContentLoaded;
  • конфликт версий при подключении нескольких CDN.

Корректная последовательность подключения и строгий контроль DOM-элементов исключают большую часть этих ошибок.

Оглавление