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

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

0 голосов
/ 10 июня 2018

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

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

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

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

// 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
}

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

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

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

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

1 Ответ

0 голосов
/ 10 июня 2018

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

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

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

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

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

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

new MyClass({
  clickHandler: clickInfo => {
    this.foo(clickInfo);
    this.bar(clickInfo);
  }
});
...