将数据从一个应用程序传递到另一个应用程序的最佳方式是什么

Question

将数据从一个应用程序传递到另一个应用程序的最佳方式是什么。

我有两个名为 appA 和 appB 的 extJS 应用程序。

在我的 appA 中，我使用了 appB 的一些视图。因此我需要传递一些数据。

传递数据的正确方法是什么。

目前我正在使用

var myOb= {"key1" : "value1","key2" : "value2"}

    sessionStorage.setItem('obJectData', muObj);

使用后我将删除它

sessionStorage.removeItem("obJectData");

任何人都可以帮助我如何以及在何处以正确的方式存储数据。

我也有一个全局可用的想法。

Answer 1

如果您需要在同一页面上加载多个不同的微应用程序，您可以考虑以下组合方法：

保存当前共享状态项的单例
可用于 pubsub (publish-subscribe) 的事件总线，以便 components/apps 可以订阅事件并在发生更改时获取更新。

这里可以看到一个基本的例子：

const appState = {
  count: 0,
};

const eventBus = {
  // just using the built-in DOM handlers, but you could create a custom one
  subscribe: (eventName, handler) => document.addEventListener(eventName, handler),
  publish: (eventName, payload) => document.dispatchEvent(new CustomEvent(eventName, payload)),
};

const incrementCount = () => {
  appState.count = appState.count + 1;
  eventBus.publish('newCount', { detail: { count: appState.count } });
}

const addCountDisplay = () => {
  const newDisplay = document.createElement('div');
  newDisplay.classList.add('countDisplay');
  newDisplay.textContent = appState.count;
  document.body.append(newDisplay);
}

// updateAllCountDisplays
eventBus.subscribe('newCount', (e) => {
  const newCount = e.detail.count;
  const displays = document.querySelectorAll('.countDisplay');
  ([...displays]).forEach((display) => display.textContent = newCount.toString());
});

<button onclick="incrementCount()">increment count</button>
<button onclick="addCountDisplay()">add count display</button>

在此示例中，您可以看到：

任何时候你创建一个新的计数显示，它都能够从单例中获取当前计数appState
每当您更新计数时，都会触发一个自定义事件，可以订阅该事件以更新 UI 以响应状态变化

这显然可以在很多方面进行改进，但它作为一个示例，说明如何将内存中全局可用的单例作为状态缓存与自定义事件结合起来，使所有组件都可以访问当前状态以及一种订阅和响应状态变化的方式。这不是您可以使用的唯一模式；这只是要考虑的一种选择。

将数据从一个应用程序传递到另一个应用程序的最佳方式是什么

What is the best way to pass data from one app to another app

javascript

extjs

extjs6