Я уверен, что это было задано раньше, но я могу найти ответы только на разные вопросы.
Эта суть того, что я пытаюсь сделать, это иметь модуль, который вызывает функцию в другом модуле, когда пользователь нажимает на кнопку нажатием кнопки. Но это очень тесно связано и приводит к различным проблемам обслуживания, когда изменение кода в одном модуле означает, что я должен изменить его в нескольких других модулях.
Вместо этого я хотел бы просто определить функцию или свойство, которое затем вызывается после того, как пользователь нажимает кнопку.
Пример текущего кода:
// 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()
, а затем создать функцию отправки, которая проходит через этот массив, вызывая все функции с данными, переданными в качестве аргумента.
Если обратный вызов предполагается использовать повторно, его можно передать при построении:
class MyClass() {
constructor(options) {
// Set options
// ...
this.clickCallback = options.clickHandler;
}
...
}
Установка свойств из параметров конструктора или объекта с одиночными параметрами применима в любом случае, когда свойство экземпляра может быть установлено.
Но это означает, что я могу иметь только одну внешнюю функцию. Что делать, если мне нужно иметь несколько функций, вызванных после того, как вычисляется clickInfo?
Тогда можно вызвать несколько функций:
new MyClass({
clickHandler: clickInfo => {
this.foo(clickInfo);
this.bar(clickInfo);
}
});