Привет! В наследство достался шаблон для движка интернет-магазина и большой однофайловый кусок JS-кода в нем. Задача – отрефакторить JS и разбить на модули.
Большая часть кода – цепочка промисов, которые используют и перезаписывают одни и те же переменные, объявленные в самом начале. Собственно, вопрос в том, как это правильнее организовать с заделом на будущее.
В категориях товаров есть фильтр по брендам, пагинация и непосредственно перечень товаров. Всё это дело обновляется аяксом: отметили чекбокс в фильтре – пагинация и список товаров обновились без перезагрузки страницы; перешли на N страницу – аналогично. Соответственно, в обоих случаях обновилась переменная page, обозначающая текущую страницу и стоящая в области видимости на уровень выше (чтобы ее видели все функции).
Мне нужно вынести функционал, отвечающий за фильтр, в один модуль, пагинацию в другой, запрос/рендеринг товаров в третий и т.п. И при этом должны быть общие переменные сверху, которые видел бы каждый модуль.
import/export у нас не поддерживается (облачная платформа без папочной структуры), динамические импорты тоже не подходят в силу некоторых причин.
Варианта пока вижу два:
а) выносить каждую функцию в отдельный файл, а переменные поместить в глобальную область;
б) использовать доступный на платформе функционал #= require – но, опять же, как поступать в этом случае с глобальными переменными, куда их помещать?
Еще немного покопался в платформе, обнаружил в готовом виде EventBus. Добавил туда свои события, код удалось разбросать по модулям, всё работает. Поэтому вопрос закрыт.
