Как отследить выполнение функции класса вне класса?

Question

[bQ1]

Есть такой класс (для примера)

spoiler

class CustomSelect {

    constructor(options) {
        this.options = options
        this.init();
    }

    init() {
        this.bind();
    }

    bind() {

        /** toggle dropdown  **/
        this.options.selectCurrent.onclick = (event) => {
            this.options.container.classList.contains('opened') ? this.closeDropdown() : this.openDropdown()
        }
    }

    openDropdown() {
        console.log('open');
        this.options.container.classList.add('opened');
    }

    closeDropdown() {
        console.log('close');
        this.options.container.classList.remove('opened');
    }
}

if( document.querySelector('.custom-select') ) {
    customSelectInstanse = new CustomSelect({
        container           : document.querySelector('.custom-select'),
        selectCurrent       : document.querySelector('.custom-select__current'),
        dropDown            : document.querySelector('.custom-select__dropdown'),
        dropDownElements    : document.querySelectorAll('.custom-select__dropdown-item')
    })
}

Как можно отследить выполнение openDropdown() вне класса CustomSelect
Что то типо такого customSelectInstanse.on(.....) { ... }

Comments

[Kovalsky]

Можно либо объявить какие-нибудь кастомные ивенты которые вы будете триггерить при выполнении функций, либо в кастомселект передавать колбэки, которые так же как и ивенты будут вызываться перед/после выполнения функций. Первое - гибче, второе - проще.

Answer 1

[Александр]

Пишем какой-то

EventEmitter

class EventEmitter {
	constructor() {
		this.handlers = new Map();
	}

	on(event, handler) {
		const handlers = this.handlers.has(event) ? this.handlers.get(event) : new Set();

		handlers.add(handler);

		this.handlers.set(event, handlers);
	}

	emit(event, ...args) {
		if (this.handlers.has(event)) {
			const handlers = this.handlers.get(event);

			for (let handler of handlers) {
				handler(...args);
			}
		}
	}
}

В конструкторе создаем экземпляр EventEmitter'а. Добавляем метод on у CustomSelect

on(event, callback) {
	this.events.on(event, callback);
}

В closeDropdown дописываем this.events.emit('close'); а для customSelectInstanse

customSelectInstanse.on('close', () => {
	console.log('Close');
});

Comments

[bQ1]

Спасибо большое

Answer 2

[Дмитрий Марков]

https://developer.mozilla.org/en-US/docs/Web/API/D...