Определите метод для вызова, когда событие происходит в модуле

1

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

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

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

Пример текущего кода:

// MyModule.js
class MyClass() {
    constructor(options) {
        // Set options
        // ...
    }

    // Called when button is clicked via event listener
    onClick() {
        // Update Module State
        // ...

        AnotherModule.someFunction(clickInfo);
    }
}

Но это совсем не гибко и означает, что модули не могут существовать отдельно.

Я бы предпочел иметь что-то вроде этого:

// MyModule.js
class MyClass() {
    constructor(options) {
        // Set options
        // ...

        this.clickCallback = null; // Function to be called
    }

    // Called when button is clicked via event listener
    onClick() {
        // Update Module State
        // ...

        this.onClickCallback(clickInfo);
    }

    // Called everytime user clicks
    onClickCallback(clickInfo) {
        this.clickCallback(clickInfo);
    }

    setClickCallback(customFunction) {
        this.clickCallback = customFunction;
    }
}

// SomeOtherFile.js
import myModule from './mymodule'

myModule.setClickCallback( (clickInfo) => { this.myFunction(clickInfo) } );

myFunction(data) {
    // Do stuff with click data
}

Но это означает, что я могу иметь только одну внешнюю функцию. Что делать, если мне нужно иметь несколько функций, вызванных после того, как вычисляется clickInfo?
Это, по крайней мере, правильная идея?
Должен ли я настраивать функцию clickCallback помощью метода или путем установки свойства?
Должен ли я использовать какой-либо тип персонализатора событий/слушателя вместо этого?

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

(В случае, если это не ясно, по class ключевого слова, я использую ES6 и Бабеля).

Edit: Похоже, лучший подход заключался бы в том, чтобы добавить функцию в массив, когда onClickCallback() функция onClickCallback(), а затем создать функцию отправки, которая проходит через этот массив, вызывая все функции с данными, переданными в качестве аргумента.

Теги:
ecmascript-6
es6-modules

1 ответ

1
Лучший ответ

Если обратный вызов предполагается использовать повторно, его можно передать при построении:

class MyClass() {
    constructor(options) {
        // Set options
        // ...

        this.clickCallback = options.clickHandler;
    }
    ...
}

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

Но это означает, что я могу иметь только одну внешнюю функцию. Что делать, если мне нужно иметь несколько функций, вызванных после того, как вычисляется clickInfo?

Тогда можно вызвать несколько функций:

new MyClass({
  clickHandler: clickInfo => {
    this.foo(clickInfo);
    this.bar(clickInfo);
  }
});
  • 0
    Как насчет использования массива вместо объекта для их хранения? Проще перебирать массив. Если это так, то имеет ли смысл также предоставлять функцию для определения дополнительных функций обратного вызова после создания экземпляра? Выполнение быстрого теста, похоже, работает, но я не был уверен, правильно ли это.
  • 0
    Просто понял, что это лямбда-функция, а не объект, но вопрос об определении дополнительных обратных вызовов остается.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню