Разработка клиентской части веб-приложения банка
Команда разработчиков участвовала в решении проблемы интерфейса карточки кредитных продуктов: при открытии подсказки (тултипа) на новой карточке ранее открытые подсказки не закрывались. Это нарушало логику взаимодействия.
Поскольку вносить изменения в исходный компонент было нельзя, требовалось найти обходное решение.
Задача
-
Обеспечить корректное поведение UI-компонента. Реализовать ожидаемую логику, при которой открытие новой всплывающей подсказки автоматически закрывает предыдущую.
-
Устранить «визуальный мусор». Исправить ситуацию, когда на экране одновременно висят несколько открытых тултипов, перекрывающих контент и мешающих восприятию интерфейса.
-
Найти решение без модификации исходного кода. Поскольку прямое изменение компонента карточки и его дочерних элементов было невозможным, требовалось найти обходной путь.
-
Сохранить функциональность каждой карточки. Решение не должно было сломать работу самого «знака вопроса» и всплывающей подсказки на отдельно взятой карточке.
-
Диагностировать причину «зависания» тултипов. Понять, какой именно механизм (или отсутствие механизма) в коде компонента отвечает за закрытие всплывающих окон и почему он не срабатывает при открытии нового элемента.
Решение
Изначально планировался масштабный рефакторинг силами двух senior-разработчиков. Вместо этого нашли альтернативу: объявили переменную-флаг в глобальной области видимости, что обеспечило единое состояние для всех экземпляров.
Другими словами, вынесли переменную-флаг за пределы карточки и тем самым добились того, что подсказки открывались по одной и закрывались автоматически при нажатии на другую карточку.
Результат
-
Корректное поведение интерфейса. При открытии новой всплывающей подсказки все ранее открытые автоматически закрываются, что полностью соответствует ожидаемой логике работы компонента.
-
Устранение визуального «шума». На экране больше не висят множественные открытые тултипы — интерфейс стал чистым, аккуратным и не перегружает пользователя.
-
Сохранение целостности кодовой базы. Исходный компонент и его внутренняя структура не были затронуты. Это позволило не вносить изменения в закрытые или сложные для модификации части системы и не создавать новые ошибки (регрессию).
-
Снятие блокировки зависимых задач. Проблема, которая могла тормозить разработку других функций, связанных с этим компонентом, была оперативно решена, что разблокировало работу команды.
Бизнес-эффект
Удалось избежать масштабного и трудоемкого рефакторинга, который планировалось выполнять силами двух senior-разработчиков.
Задача решена с минимальными затратами ресурсов, что сэкономило бюджет и человеко-часы.
Технологии
- JavaScript
