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

#javascript #ecmascript-6 #es6-modules

#javascript #ecmascript-6 #es6-модули

Вопрос:

У меня есть 2 веб-страницы, давайте назовем их A и B. В основном они разные, но иногда используют некоторые специфические модули ES6.
Моя структура каталогов такова:

 /A.js
/B.js
/A/main.js
/A/store.js
/B/main.js
/B/store.js
/commun/mymodule.js
  

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

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

 let objectFromAorB = null; // Will be the instance from A or B
let getItemStyle = null; // Will be a function set from A or B

const items = {}

function initItem(id) {
    // Fill item
    items[id] = [...];
}

function focusOnItem(id) {
    const item = items[id];
    // Do stuff with item
    // [...]
    objectFromAorB.refresh(); // HERE: objectFromAorB
}

function setItemVisible(id) {
    const item = items[id];
    // Do stuff with item
    // [...]
    item.setStyle(getItemStyle(id)); // HERE: getItemStyle
}

// HERE: Setters
function setObject(extObj) {
    objectFromAorB = extObj;
}
function setStyleFunction(fct) {
    getItemStyle = fct;
}

export { setObject, setStyleFunction, initItem, focusOnItem, setItemVisible };
  

В main.js из A и B я делаю такие вещи, как это:

 import Store from './store';
import * as Mymodule from '../commun/mymodule';

const anImportantObject = [...];
Mymodule.setObject(anImportantObject);
Mymodule.setStyleFunction(function(id) {
    const color = Store.element[id]?.color;
    return { color: color, [...] };
});
  

Я должен поделиться anImportantObject экземпляром из A/main.js или B/main.js to common/mymodule.js , и я также должен использовать функцию, чтобы определить, как получается стиль, потому что данные поступают либо из A/store.js или B/store.js .

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

Комментарии:

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

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

3. Например, функция, которая возвращает функцию. Или, здесь, я думаю, это была бы функция, которая возвращает объект функций. export const makeItemInterface = (objectFromAorB, getItemStyle) => { const items = {}; // ... return ({ focusOnItem(id) { const item = items[id]; objectFromAorB.refresh(); } или что-то в этом роде