#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(); }
или что-то в этом роде