Breaking changes

Когда библиотека подвергается изменению архитектуры или добавляются новые ключевые возможности, часто возникают так называемые breaking changes — изменения, которые могут сломать обратную совместимость с предыдущими версиями. В tingle.js такие изменения были внедрены на различных этапах её развития, что важно учитывать при обновлениях или миграции проектов.

1. Удаление устаревших функций

Одним из ярких примеров breaking change является удаление устаревших методов или параметров, которые использовались в старых версиях библиотеки. Например, с переходом от версии 0.x.x к версии 1.x.x некоторые методы были исключены из API, так как они уже не соответствовали новым стандартам разработки или не соответствовали общей философии улучшения производительности и удобства использования.

Пример:

// Устаревший метод
var modal = new tingle.modal();
modal.open();
modal.close();

В версии 1.x.x и выше для работы с такими действиями нужно использовать новый подход:

// Новый способ
var modal = new tingle.modal({
  closeMethods: ['button', 'overlay'],
});
modal.open();

2. Изменения в API

Одним из наиболее заметных breaking changes было изменение в обработке событий. В старых версиях tingle.js использовались глобальные события, что могло привести к различным проблемам с производительностью при использовании модальных окон на множестве страниц. В более новых версиях библиотека начала использовать более локализованные события, что позволило избежать конфликтов и повысить скорость работы.

Пример изменения:

До изменений:

modal.on('open', function() {
  console.log('Modal opened!');
});

После изменений:

modal.addEventListener('open', function() {
  console.log('Modal opened!');
});

3. Поведение по умолчанию

С развитием tingle.js были изменены значения некоторых параметров по умолчанию. Например, поведение модальных окон в отношении закрытия при клике на фон или кнопки закрытия было изменено, чтобы повысить юзабилити и снизить вероятность случайного закрытия модальных окон.

Пример изменения поведения:

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

var modal = new tingle.modal({
  closeMethods: ['overlay', 'button']
});

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

var modal = new tingle.modal({
  closeMethods: ['button'] // теперь клик по фону не закрывает окно по умолчанию
});

4. Изменения в настройках анимации

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

С версиями 1.x.x и выше анимации были значительно улучшены, и теперь они управляются через настройки и встроенные CSS-классы:

Пример настройки анимации в новой версии:

var modal = new tingle.modal({
  animation: 'fade',  // 'fade' или 'zoom'
});

5. Обновления для совместимости с современными браузерами

С течением времени tingle.js обновлялся для поддержки современных браузеров и более гибкой работы с различными устройствами и разрешениями экранов. Некоторые старые методы, которые раньше использовались для решения проблем с совместимостью, были удалены, а функционал был переработан с использованием современных стандартов.

В одной из последних версий был обновлён способ работы с CSS-свойствами для поддержки адаптивного дизайна:

var modal = new tingle.modal({
  responsive: true, // теперь этот параметр по умолчанию включает адаптивность
});

6. Поведение модальных окон при многократном открытии

Ранее tingle.js не поддерживал многократное открытие модальных окон, что в случае с несколькими окнами на одной странице вызывало проблемы с доступностью. В новых версиях добавлена поддержка работы с несколькими модальными окнами на одной странице.

Пример кода для работы с несколькими окнами:

var modal1 = new tingle.modal();
var modal2 = new tingle.modal();

// открытие первого окна
modal1.open();

// открытие второго окна
modal2.open();

7. Работа с формами и фокусом

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

Теперь можно явно указать, какой элемент должен получить фокус при открытии модального окна:

var modal = new tingle.modal({
  focusOnOpen: '#myInputField',
});
modal.open();

Заключение

Breaking changes — это неизбежная часть эволюции любой библиотеки. В случае tingle.js они были необходимы для улучшения производительности, стабильности и совместимости с новыми технологиями. Понимание этих изменений помогает разработчикам правильно адаптировать старые проекты к новым версиям библиотеки и эффективно использовать её возможности в современных веб-приложениях.

Оглавление