Javascript ES6是否可以使用函数使多个页面之间共享的模块可以访问实例？

我有两个网页，我们叫它们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 };

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, [...] };
});

在main.js中，我从A和B执行以下操作：

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 };

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共享到

common/mymodule.js

，我还必须使用一个函数来定义如何获得样式，因为数据来自A/store.js或B/store.js

---

我正在努力解决这个问题，因为我发现它很难阅读，很难扩展，我很确定有很多更好的方法来处理这个问题，因为这应该是一个常见的问题。但是，在浏览了大量的互联网之后，我没有找到我的解决方案。

乍一看，这看起来基本上是合理的。就个人而言，我宁愿避免重新分配，而是让

mymodule

成为一个高阶函数或类，它接受对象和样式函数作为arguments@CertainPerformance读了你的评论后，我看了一下高阶函数（因为我没有听到这个词）。我现在正在做的不是吗？比如，一个返回函数的函数。或者，在这里，我想它应该是一个返回函数对象的函数<代码>导出常量makeItemInterface=（objectFromAorB，getItemStyle）=>{const items={}；//…返回（{focusOnItem（id）{const item=items[id]；objectFromAorB.refresh（）；}或类似的东西，乍一看，这看起来很合理。就我个人而言，我宁愿避免重新分配，而是让

mymodule

成为一个高阶函数或类，它接受对象和样式函数作为arguments@CertainPerformance读了你的评论后，我看了一下高阶函数（因为我没听说过这个词）。我现在不是在做什么吗？比如，一个返回函数的函数。或者，在这里，我猜它是一个返回函数对象的函数。

export const makeItemInterface=（objectFromAorB，getItemStyle）=>{const items={}；/…return（{focusonim（id）{const item=items[id]；objectFromAorB.refresh（）；}

或类似的内容