Метод destroy

Назначение метода destroy

Метод destroy в Cleave.js используется для полного удаления экземпляра форматирования, созданного на входном элементе. Он завершает работу библиотеки для конкретного инстанса, снимает все связанные обработчики событий, очищает внутренние ссылки и возвращает DOM-элемент в исходное состояние без активного форматирования.

Ключевая задача метода — предотвращение утечек памяти и корректное освобождение ресурсов при динамическом управлении формами, особенно в SPA-приложениях.

Что именно делает destroy

При вызове destroy выполняется несколько внутренних операций:

  • удаляются все event listeners, добавленные Cleave.js к input-элементу;
  • разрывается связь между экземпляром и DOM-элементом;
  • очищаются внутренние кеши и ссылки на состояние форматирования;
  • прекращается автоматическое преобразование вводимых данных;
  • элемент перестаёт реагировать на форматирующую логику библиотеки.

После вызова метод экземпляр считается невалидным для дальнейшего использования.

Сигнатура и особенности вызова

Метод вызывается на экземпляре Cleave:

const cleave = new Cleave(inputElement, {
    phone: true,
    phoneRegionCode: 'US'
});

cleave.destroy();

Возвращаемое значение отсутствует. Вызов носит побочный характер и полностью изменяет состояние экземпляра.

Поведение DOM-элемента после уничтожения

После выполнения destroy input-элемент:

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

Важно, что метод не удаляет сам DOM-элемент и не изменяет его атрибуты напрямую, если это не связано с внутренней логикой Cleave.js.

Сценарии применения

Удаление компонентов в SPA

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

class PhoneInput {
    constructor(input) {
        this.cleave = new Cleave(input, {
            phone: true
        });
    }

    destroy() {
        this.cleave.destroy();
    }
}

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

Переконфигурация input

При необходимости смены типа форматирования сначала уничтожается старый экземпляр:

cleave.destroy();

cleave = new Cleave(inputElement, {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand'
});

Такой подход исключает конфликт старых настроек с новыми.

Динамические формы

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

function removeField(field) {
    field.cleaveInstance.destroy();
    field.element.remove();
}

Поведение при повторном вызове

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

Влияние на события и обработчики

Cleave.js добавляет обработчики событий, таких как:

  • input
  • keydown
  • focus
  • blur

После вызова destroy:

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

Это особенно важно для предотвращения дублирующей логики при повторной инициализации.

Работа с памятью и утечками

В длительно работающих интерфейсах неправильное управление экземплярами Cleave.js приводит к накоплению:

  • обработчиков событий;
  • замыканий на DOM;
  • ссылок на устаревшие данные состояния.

Метод destroy устраняет эти риски, обеспечивая корректное освобождение памяти.

Использование в связке с повторной инициализацией

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

if (cleave) {
    cleave.destroy();
}

cleave = new Cleave(inputElement, {
    date: true,
    datePattern: ['Y', 'm', 'd']
});

Нарушение этого порядка может привести к наложению обработчиков и некорректному форматированию ввода.

Особенности поведения в React-архитектуре

В React-окружении destroy обычно вызывается в useEffect cleanup:

useEffect(() => {
    const cleave = new Cleave(inputRef.current, {
        numeral: true
    });

    return () => {
        cleave.destroy();
    };
}, []);

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

Особенности в Vue

Во Vue логика аналогична и обычно привязывается к хуку beforeUnmount:

beforeUnmount() {
    this.cleave.destroy();
}

Это предотвращает сохранение активных обработчиков после удаления компонента.

Ограничения метода

Метод destroy не выполняет следующих действий:

  • не удаляет DOM-элемент;
  • не очищает значение input автоматически;
  • не восстанавливает исходные HTML-атрибуты;
  • не сохраняет состояние для повторного использования;
  • не переводит экземпляр в «пауза-режим» — он полностью деактивируется.

Типичные ошибки использования

Часто встречаются следующие ошибки:

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

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

Внутренняя логика освобождения ресурсов

При вызове destroy Cleave.js выполняет последовательность:

  1. Снятие всех обработчиков событий.
  2. Очистка внутренних состояний форматирования.
  3. Обнуление связей с DOM.
  4. Пометка экземпляра как уничтоженного.

После этого объект перестаёт участвовать в жизненном цикле библиотеки.

Практическое значение метода

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

  • предсказуемость поведения input-полей;
  • отсутствие конфликтов между экземплярами;
  • корректное освобождение ресурсов браузера;
  • стабильность при многократных рендерах интерфейса.
Оглавление