Я пытаюсь провести рефакторинг некоторого кода, где отдельные модули имеют одинаковый пользовательский вспомогательный метод. Вместо того, чтобы каждый из этих модулей имел свою собственную реализацию этого вспомогательного метода, я пытаюсь переместить метод в ранее существующий вспомогательный модуль и затем импортировать его в каждый модуль, который нуждается в нем. Универсальный метод должен управлять состоянием внутри объекта this.components.
Ниже приведен упрощенный пример, и каждый фрагмент кода находится внутри класса. В действительности, вспомогательный метод используется во многих местах, и небольшое изменение его работы потребует многих изменений в других местах.
Вспомогательный метод (пример)
setComponent = (component, label) => {
this.components.push({component, label});
}
Я могу импортировать и использовать таким образом.
import { setComponent } from './helpers';
...
setComponent(this.button, 'example');
Я также хочу иметь возможность удалять все компоненты, которые были установлены для определенного c модуля. Например:
removeComponents = module => {
// remove components by module
}
import { removeComponents } from './helpers';
...
removeComponents('moduleName');
Проблема здесь в том, что this.components необходимо передавать имя модуля каждый раз, когда вызывается setComponent, чтобы у него был ключ для использования в качестве способа удалите нужные компоненты в removeComponents. setComponent потребуется дополнительный аргумент module.
setComponent = (component, label, module) => {
this.components.push({component, label, module});
}
Хотя это работает, это создает проблему раздувания в каждом из модулей. Теперь каждый раз, когда вызывается setComponent, он должен каждый раз передавать одно и то же имя модуля.
setComponent(this.a, 'example1', 'thisModule');
setComponent(this.b, 'example2', 'thisModule');
setComponent(this.c, 'example3', 'thisModule');
setComponent(this.d, 'example4', 'thisModule');
setComponent(this.e, 'example5', 'thisModule');
...
Аргумент имени модуля можно абстрагировать, и каждый модуль может использовать локальный метод, который передает локальный метод. имя модуля вместе с объектом данных компонента в helper.setComponent.
import { setComponent as helperSetComponent } from './helpers';
...
// use local setComponent method to pass component data to
// helper's setComponent along with this module's name
setComponent = (component, label) => helperSetComponent(component, label, 'thisModule');
...
this.setComponent(this.button, 'example');
Но теперь я вернулся к исходной точке. Пытаясь использовать универсальный метод, я должен создать локальный метод-обработчик, чтобы все работало.
Есть ли другой ванильный JS способ сделать это, который не будет создавать никакого дополнительного раздувания кода в процессе, и это не вводит React / Redux / Angular / Vue, et c.? Возможности ESnext открыты.
edit : предложение функции карри от Bergi
В локальных модулях:
// local helper function
setComponent = helperSetComponent(component, label)('thisModule');
В файле помощника:
setComponent = module => (component, label) => {
this.components.push({component, label, module});
}