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

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

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 ，因此必须使用函数定义样式的获取方式。

我正在努力解决这个问题，因为我发现它很难阅读，难以扩展，而且我敢肯定，有很多更好的方法可以解决这个问题，因为这应该是一个常见的问题。但是，在浏览了一下Internet之后，我没有找到解决方案。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ecmascript-6 es6-modules javascript