Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Грамотное добавление событий (https://javascript.ru/forum/events/72883-gramotnoe-dobavlenie-sobytijj.html)

gevaraweb 04.03.2018 15:34

Грамотное добавление событий
 
Добрый день! Хочу написать свою библиотечку. Главный класс в ней - Event. В нем выполняется куча тяжелых действий. Хочу сделать так, что программист, пользуясь этой библиотекой, мог добавлять свои мелкие события userEventFirst, userEventTwo и пр., в специально отведенном месте. Чтобы он не искал это место, хочу предоставить ему "интерфейс".

Вот мой класс:

addEvent = function () {

	this.userEventFirst = function () {};
	this.userEventTwo = function () {};

	this.attachEvent = function (event, handler) {

		switch ( event ) {
			case 'eventFirst':  this.userEventFirst = handler;	break;
			case 'eventTwo': 	this.userEventTwo = handler;	break;		
			break;
		}

	};

	this.working = function () {
		
		this.userEventFirst();	
		
		//... hard work
		console.log('working');
		
		this.userEventTwo();
	}	
	
};


И вот программист берет мой класс, и дописывает действия:

addEvent1 = new addEvent();

addEvent1.attachEvent('eventFirst', function() {

    console.log('click eventFirst'); // что угодно еще

});

addEvent1.attachEvent('eventTwo', function() {

    console.log('click eventTwo'); // что угодно еще

});

addEvent1.working();


Все работает. Только насколько грамотно это сделано? может теряется производительность и т.п. Таких событий может быть десяток, они могут вызываться в цикле или в таймере. Причем программист может задавать не все события, а только то, что ему нужно. Смущает, что не заданные действия крутятся вхолостую:

this.userEventFirst = function () {};

Nexus 05.03.2018 10:49

Если не хватает знаний, то стоит ли вообще писать такую "библиотеку"?
Почему не вешать кастомные события на document и на нем же их вызывать?
Зачем вообще реализовывать обработчики событий за программиста Васю?

Вам стоит посмотреть на EventEmitter.

Rise 05.03.2018 11:19

gevaraweb,
Похоже на Наблюдателя
// Observable
class Man {
    constructor(name) {
        this.name = name;
        this.observers = new Set();
    }
    attach(observer) {
        this.observers.add(observer);
    }
    detach(observer) {
        this.observers.delete(observer);
    }
    notify(message) {
        this.message = message;
        for (let observer of this.observers)
            observer.update(this);
    }
}
// Observer1
class Dog {
    constructor(name) {
        this.name = name;
    }
    update(observable) {
        console.log(`> ${observable.name}: ${observable.message}`);
        console.log(`< ${this.name}: Гав-гав!`);
    }
}
// Observer2
class Cat {
    constructor(name) {
        this.name = name;
    }
    update(observable) {
        console.log(`> ${observable.name}: ${observable.message}`);
        console.log(`< ${this.name}: Мяв-мяв!`);
    }
}

let vasya = new Man('Вася');
let tuzik = new Dog('Тузик');
let murka = new Cat('Мурка');

vasya.attach(tuzik);
vasya.attach(murka);
vasya.notify('Ням-ням!');
vasya.detach(murka);
vasya.notify('Ням-ням-ням!');


Часовой пояс GMT +3, время: 06:08.